@veltra/ai 1.4.0

package/dist/components/ai-chat/message-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-item.js","names":[],"sources":["../../../src/components/ai-chat/message-item.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.e('message'), cls.em('message', message.role), bem.is('streaming', isStreaming)]\"\n  >\n    <!-- 用户消息：右对齐气泡 -->\n    <template v-if=\"message.role === 'user'\">\n      <div :class=\"cls.e('message-bubble')\">\n        <div v-if=\"message.attachments?.length\" :class=\"cls.e('message-attachments')\">\n          <img\n            v-for=\"att in message.attachments\"\n            :key=\"att.dataUrl\"\n            :src=\"att.dataUrl\"\n            :alt=\"att.name\"\n            :class=\"cls.e('message-attachment')\"\n          />\n        </div>\n        <div v-if=\"message.content\" :class=\"cls.e('message-text')\">{{ message.content }}</div>\n      </div>\n    </template>\n\n    <!-- assistant 消息 -->\n    <template v-else>\n      <div\n        v-if=\"message.reasoning\"\n        :class=\"[cls.e('reasoning'), bem.is('expanded', reasoningExpanded)]\"\n      >\n        <div :class=\"cls.e('reasoning-header')\" @click=\"reasoningExpanded = !reasoningExpanded\">\n          <UIcon :class=\"[cls.e('reasoning-icon'), isThinking && cls.is('loading')]\">\n            <Loading v-if=\"isThinking\" />\n            <InfoCircle v-else />\n          </UIcon>\n          <span>{{ isThinking ? '思考中…' : '思考过程' }}</span>\n          <UIcon :class=\"cls.e('reasoning-chevron')\"><ArrowDown /></UIcon>\n        </div>\n        <div v-show=\"reasoningExpanded\" :class=\"cls.e('reasoning-content')\">\n          {{ message.reasoning }}\n        </div>\n      </div>\n\n      <MarkdownRender\n        v-if=\"message.content || isStreaming\"\n        mode=\"chat\"\n        :class=\"cls.e('message-content')\"\n        :content=\"message.content\"\n        :final=\"!isStreaming\"\n        :fade=\"false\"\n        v-bind=\"rendererProps\"\n      />\n\n      <ToolCallCard\n        v-for=\"call in message.toolCalls ?? []\"\n        :key=\"call.id\"\n        :tool-call=\"call\"\n        @respond=\"(approved) => emit('respond', call.id, approved)\"\n      />\n\n      <div v-if=\"message.status === 'error'\" :class=\"cls.e('message-status')\">生成出错</div>\n      <div v-else-if=\"message.status === 'aborted'\" :class=\"cls.e('message-status')\">\n        已停止生成\n      </div>\n\n      <div v-if=\"showActions\" :class=\"cls.e('message-actions')\" @click=\"emit('regenerate')\">\n        <UIcon title=\"重新生成\"><Refresh /></UIcon>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UIcon } from '@veltra/desktop'\nimport { ArrowDown, InfoCircle, Loading, Refresh } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport MarkdownRender from 'markstream-vue'\nimport { computed, inject, ref, watch } from 'vue'\n\nimport type { ChatMessage } from '../../chat/types'\nimport { AiChatDIKey } from './di'\nimport ToolCallCard from './tool-call.vue'\n\ndefineOptions({ name: 'UAiChatMessageItem' })\n\nconst props = defineProps<{\n  message: ChatMessage\n  /** 是否为最后一条可见消息（决定是否显示重新生成） */\n  isLast: boolean\n  /** 透传给 MarkdownRender 的属性 */\n  rendererProps?: Record<string, unknown>\n}>()\n\nconst emit = defineEmits<{\n  (e: 'respond', toolCallId: string, approved: boolean): void\n  (e: 'regenerate'): void\n}>()\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst isStreaming = computed(() => props.message.status === 'streaming')\n/** 思考中：流式且正文还未开始输出 */\nconst isThinking = computed(() => isStreaming.value && !props.message.content)\n\nconst reasoningExpanded = ref(true)\n\n// 流式结束后自动折叠思考过程\nwatch(\n  () => props.message.status,\n  (status) => {\n    if (status === 'streaming') {\n      reasoningExpanded.value = true\n    } else if (status) {\n      reasoningExpanded.value = false\n    }\n  }\n)\n\nconst showActions = computed(() => {\n  if (props.message.role !== 'assistant' || !props.isLast) return false\n  return ['done', 'error', 'aborted'].includes(props.message.status ?? '')\n})\n</script>\n"],"mappings":"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"}

package/dist/components/ai-chat/message-list.js

@@ -0,0 +1,75 @@
+import { AiChatDIKey } from "./di.js";
+import _sfc_main$1 from "./message-item.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, inject, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { UScroll } from "@veltra/desktop";
+//#region src/components/ai-chat/message-list.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UAiChatMessageList",
+	__name: "message-list",
+	props: {
+		messages: {},
+		welcome: {},
+		rendererProps: {}
+	},
+	emits: ["respond", "regenerate"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = inject(AiChatDIKey)?.cls ?? bem("ai-chat");
+		/** tool 消息不单独渲染，其内容体现在工具卡片的结果区 */
+		const visibleMessages = computed(() => props.messages.filter((msg) => msg.role !== "tool"));
+		const scrollRef = shallowRef();
+		/** 是否吸附底部（用户上翻浏览历史时取消吸附） */
+		const stickToBottom = ref(true);
+		const handleScroll = (position) => {
+			stickToBottom.value = position.sh - position.ch - position.y < 60;
+		};
+		watch(() => {
+			const list = visibleMessages.value;
+			const last = list[list.length - 1];
+			return [
+				list.length,
+				last?.content.length ?? 0,
+				last?.reasoning?.length ?? 0,
+				last?.toolCalls?.length ?? 0
+			].join("|");
+		}, async () => {
+			if (!stickToBottom.value) return;
+			await nextTick();
+			scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER });
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UScroll), {
+				class: normalizeClass(unref(cls).e("list")),
+				ref_key: "scrollRef",
+				ref: scrollRef,
+				always: "",
+				onScroll: handleScroll
+			}, {
+				default: withCtx(() => [!visibleMessages.value.length ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("welcome"))
+				}, [renderSlot(_ctx.$slots, "welcome", {}, () => [createTextVNode(toDisplayString(__props.welcome), 1)])], 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleMessages.value, (msg, index) => {
+					return openBlock(), createBlock(_sfc_main$1, {
+						key: msg.id,
+						message: msg,
+						"is-last": index === visibleMessages.value.length - 1,
+						"renderer-props": __props.rendererProps,
+						onRespond: _cache[0] || (_cache[0] = (id, approved) => emit("respond", id, approved)),
+						onRegenerate: _cache[1] || (_cache[1] = ($event) => emit("regenerate"))
+					}, null, 8, [
+						"message",
+						"is-last",
+						"renderer-props"
+					]);
+				}), 128))]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=message-list.js.map

package/dist/components/ai-chat/message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-list.js","names":[],"sources":["../../../src/components/ai-chat/message-list.vue"],"sourcesContent":["<template>\n  <UScroll :class=\"cls.e('list')\" ref=\"scrollRef\" always @scroll=\"handleScroll\">\n    <div v-if=\"!visibleMessages.length\" :class=\"cls.e('welcome')\">\n      <slot name=\"welcome\">{{ welcome }}</slot>\n    </div>\n\n    <MessageItem\n      v-for=\"(msg, index) in visibleMessages\"\n      :key=\"msg.id\"\n      :message=\"msg\"\n      :is-last=\"index === visibleMessages.length - 1\"\n      :renderer-props=\"rendererProps\"\n      @respond=\"(id, approved) => emit('respond', id, approved)\"\n      @regenerate=\"emit('regenerate')\"\n    />\n  </UScroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UScroll } from '@veltra/desktop'\nimport type { ScrollPosition } from '@veltra/desktop'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'\n\nimport type { ChatMessage } from '../../chat/types'\nimport { AiChatDIKey } from './di'\nimport MessageItem from './message-item.vue'\n\ndefineOptions({ name: 'UAiChatMessageList' })\n\nconst props = defineProps<{\n  messages: ChatMessage[]\n  /** 空状态欢迎语 */\n  welcome?: string\n  /** 透传给 MarkdownRender 的属性 */\n  rendererProps?: Record<string, unknown>\n}>()\n\nconst emit = defineEmits<{\n  (e: 'respond', toolCallId: string, approved: boolean): void\n  (e: 'regenerate'): void\n}>()\n\ndefineSlots<{\n  /** 空状态欢迎区插槽 */\n  welcome(): any\n}>()\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\n/** tool 消息不单独渲染，其内容体现在工具卡片的结果区 */\nconst visibleMessages = computed(() => props.messages.filter((msg) => msg.role !== 'tool'))\n\nconst scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()\n/** 是否吸附底部（用户上翻浏览历史时取消吸附） */\nconst stickToBottom = ref(true)\n\nconst handleScroll = (position: Required<ScrollPosition>) => {\n  stickToBottom.value = position.sh - position.ch - position.y < 60\n}\n\n// 消息数量或流式内容变化时，若处于吸附状态则滚动到底部\nwatch(\n  () => {\n    const list = visibleMessages.value\n    const last = list[list.length - 1]\n    return [\n      list.length,\n      last?.content.length ?? 0,\n      last?.reasoning?.length ?? 0,\n      last?.toolCalls?.length ?? 0\n    ].join('|')\n  },\n  async () => {\n    if (!stickToBottom.value) return\n    await nextTick()\n    scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })\n  }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EAQd,MAAM,OAAO;EAWb,MAAM,MADK,OAAO,WACN,CAAA,EAAI,OAAO,IAAI,SAAS;;EAGpC,MAAM,kBAAkB,eAAe,MAAM,SAAS,QAAQ,QAAQ,IAAI,SAAS,MAAM,CAAC;EAE1F,MAAM,YAAY,WAA6D;;EAE/E,MAAM,gBAAgB,IAAI,IAAI;EAE9B,MAAM,gBAAgB,aAAuC;GAC3D,cAAc,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,IAAI;EACjE;EAGA,YACQ;GACJ,MAAM,OAAO,gBAAgB;GAC7B,MAAM,OAAO,KAAK,KAAK,SAAS;GAChC,OAAO;IACL,KAAK;IACL,MAAM,QAAQ,UAAU;IACxB,MAAM,WAAW,UAAU;IAC3B,MAAM,WAAW,UAAU;GAC7B,CAAC,CAAC,KAAK,GAAG;EACZ,GACA,YAAY;GACV,IAAI,CAAC,cAAc,OAAO;GAC1B,MAAM,SAAS;GACf,UAAU,OAAO,SAAS,EAAE,GAAG,OAAO,iBAAiB,CAAC;EAC1D,CACF;;uBA9EE,YAcU,MAAA,OAAA,GAAA;IAdA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA;aAAc;IAAJ,KAAI;IAAY,QAAA;IAAQ,UAAQ;;2BAGxD,CAAA,CAFM,gBAAA,MAAgB,UAAA,UAAA,GAA5B,mBAEM,OAAA;;KAF+B,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA;QAC/C,WAAyC,KAAA,QAAA,WAAA,CAAA,SAAA,CAAA,gBAAA,gBAAjB,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,IAAA,UAAA,IAAA,GAGjC,mBAQE,UAAA,MAAA,WAPuB,gBAAA,QAAf,KAAK,UAAK;yBADpB,YAQE,aAAA;MANC,KAAK,IAAI;MACT,SAAS;MACT,WAAS,UAAU,gBAAA,MAAgB,SAAM;MACzC,kBAAgB,QAAA;MAChB,WAAO,OAAA,OAAA,OAAA,MAAG,IAAI,aAAa,KAAI,WAAY,IAAI,QAAQ;MACvD,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,YAAA"}

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

@@ -0,0 +1,5 @@
+import "@veltra/desktop/components/button/style";
+import "@veltra/desktop/components/icon/style";
+import "@veltra/desktop/components/input/style";
+import "@veltra/desktop/components/scroll/style";
+import "markstream-vue/index.css";

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

@@ -0,0 +1,6 @@
+import "./style2.css";
+import "@veltra/desktop/components/button/style";
+import "@veltra/desktop/components/icon/style";
+import "@veltra/desktop/components/input/style";
+import "@veltra/desktop/components/scroll/style";
+import "markstream-vue/index.css";

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

@@ -0,0 +1,416 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-ai-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-size: var(--u-font-size-main-default);
+  color: var(--u-text-color-main);
+}
+.u-ai-chat__list {
+  flex: 1;
+  min-height: 0;
+}
+.u-ai-chat__welcome {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  color: var(--u-text-color-assist);
+  padding: var(--u-gap-default);
+  text-align: center;
+}
+.u-ai-chat__message {
+  padding: var(--u-gap-small) var(--u-gap-default);
+}
+.u-ai-chat__message--user {
+  display: flex;
+  justify-content: flex-end;
+}
+.u-ai-chat__message-bubble {
+  max-width: 80%;
+  padding: var(--u-gap-small) var(--u-gap-default);
+  border-radius: var(--u-radius-large);
+  background-color: var(--u-color-primary-light-9);
+  color: var(--u-text-color-main);
+  overflow: hidden;
+}
+.u-ai-chat__message-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.u-ai-chat__message-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--u-gap-small);
+  margin-bottom: var(--u-gap-small);
+}
+.u-ai-chat__message-attachment {
+  max-width: 160px;
+  max-height: 160px;
+  border-radius: var(--u-radius-default);
+  display: block;
+}
+.u-ai-chat__message-content {
+  line-height: 1.7;
+}
+.u-ai-chat__message-status {
+  margin-top: var(--u-gap-small);
+  color: var(--u-text-color-assist);
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__message-actions {
+  margin-top: var(--u-gap-small);
+  color: var(--u-text-color-assist);
+  cursor: pointer;
+  display: inline-flex;
+}
+.u-ai-chat__message-actions:hover {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__reasoning {
+  margin-bottom: var(--u-gap-small);
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__reasoning.is-expanded .u-ai-chat__reasoning-chevron {
+  transform: rotate(180deg);
+}
+.u-ai-chat__reasoning-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__reasoning-chevron {
+  transition: transform 0.2s;
+}
+.u-ai-chat__reasoning-content {
+  margin-top: var(--u-gap-small);
+  padding-left: var(--u-gap-default);
+  border-left: var(--u-border-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: var(--u-font-size-main-small);
+  line-height: 1.6;
+}
+.u-ai-chat__tool-call {
+  margin: var(--u-gap-small) 0;
+}
+.u-ai-chat__tool-call-status {
+  flex-shrink: 0;
+}
+.u-ai-chat__tool-call-status.is-loading {
+  color: var(--u-color-primary);
+  animation: u-ai-chat-rotate 1s linear infinite;
+}
+.u-ai-chat__tool-call-status.is-warning {
+  color: var(--u-color-warning);
+}
+.u-ai-chat__tool-call-status.is-success {
+  color: var(--u-color-success);
+}
+.u-ai-chat__tool-call-status.is-danger {
+  color: var(--u-color-danger);
+}
+.u-ai-chat__tool-call-name {
+  font-family: var(--u-font-family-code);
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-title);
+  flex-shrink: 0;
+}
+.u-ai-chat__tool-call-summary {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--u-text-color-assist);
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__tool-call-confirm {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+}
+.u-ai-chat__tool-call-section {
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-assist);
+  margin: var(--u-gap-small) 0;
+}
+.u-ai-chat__tool-call-code {
+  margin: 0;
+  padding: var(--u-gap-small);
+  border-radius: var(--u-radius-default);
+  background-color: var(--u-bg-color-bottom);
+  font-family: var(--u-font-family-code);
+  font-size: var(--u-font-size-main-small);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 240px;
+  overflow: auto;
+}
+.u-ai-chat__ask-question {
+  display: flex;
+  flex-direction: column;
+  gap: var(--u-gap-small);
+  font-size: var(--u-font-size-main-small);
+}
+.u-ai-chat__ask-question-progress {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__ask-question-dots {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+.u-ai-chat__ask-question-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--u-text-color-placeholder);
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+.u-ai-chat__ask-question-dot.is-answered {
+  background-color: var(--u-color-primary);
+}
+.u-ai-chat__ask-question-dot.is-current {
+  box-shadow: 0 0 0 3px var(--u-color-primary-light-7);
+}
+.u-ai-chat__ask-question-q {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+  color: var(--u-text-color-title);
+  font-weight: 500;
+  line-height: 1.5;
+}
+.u-ai-chat__ask-question-no {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  background-color: var(--u-color-primary-light-9);
+  color: var(--u-color-primary);
+  font-size: 11px;
+}
+.u-ai-chat__ask-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--u-gap-small);
+}
+.u-ai-chat__ask-question-opt {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-small) var(--u-gap-default);
+  border: var(--u-border-muted);
+  border-radius: var(--u-radius-default);
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--u-text-color-main);
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.5;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+.u-ai-chat__ask-question-opt:hover {
+  border-color: var(--u-color-primary);
+}
+.u-ai-chat__ask-question-opt.is-selected {
+  border-color: var(--u-color-primary);
+  background-color: var(--u-color-primary-light-9);
+}
+.u-ai-chat__ask-question-glyph {
+  flex-shrink: 0;
+  position: relative;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: var(--u-border-muted);
+  transition: border-color 0.2s;
+}
+.u-ai-chat__ask-question-glyph.is-selected {
+  border-color: var(--u-color-primary);
+}
+.u-ai-chat__ask-question-glyph.is-selected::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background-color: var(--u-color-primary);
+}
+.u-ai-chat__ask-question-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--u-gap-small);
+}
+.u-ai-chat__ask-question-result {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.u-ai-chat__ask-question-result-q {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__ask-question-result-no {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  background-color: var(--u-color-primary-light-9);
+  color: var(--u-color-primary);
+  font-size: 11px;
+}
+.u-ai-chat__ask-question-result-a {
+  color: var(--u-text-color-main);
+  line-height: 1.5;
+}
+.u-ai-chat__ask-question-chip {
+  display: inline-block;
+  padding: 2px var(--u-gap-small);
+  border-radius: var(--u-radius-default);
+  background-color: var(--u-color-primary-light-9);
+  color: var(--u-color-primary);
+}
+.u-ai-chat__ask-question-status {
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__input-area {
+  flex-shrink: 0;
+  margin: var(--u-gap-default);
+  margin-top: var(--u-gap-small);
+  border: var(--u-border-muted);
+  border-radius: var(--u-radius-large);
+  background-color: var(--u-bg-color-top);
+  padding: var(--u-gap-small);
+}
+.u-ai-chat__input-area:focus-within {
+  border-color: var(--u-color-primary);
+}
+.u-ai-chat__input {
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-default);
+  font-family: inherit;
+  line-height: 1.6;
+  padding: var(--u-gap-small);
+  box-sizing: border-box;
+}
+.u-ai-chat__input::placeholder {
+  color: var(--u-text-color-placeholder);
+}
+.u-ai-chat__input-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding: 0 var(--u-gap-small);
+}
+.u-ai-chat__input-attach {
+  color: var(--u-text-color-assist);
+  cursor: pointer;
+  font-size: 18px;
+}
+.u-ai-chat__input-attach:hover {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__input-stop {
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background-color: currentColor;
+}
+.u-ai-chat__input-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-small);
+}
+.u-ai-chat__input-attachment {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--u-radius-default);
+  overflow: hidden;
+  border: var(--u-border-muted);
+}
+.u-ai-chat__input-attachment img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.u-ai-chat__input-attachment-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: var(--u-shadow-color-a-52);
+  color: var(--u-text-color-white);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+@keyframes u-ai-chat-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/ai-chat/tool-call.js

@@ -0,0 +1,151 @@
+import { AiChatDIKey } from "./di.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { UButton, UCollapseItem, UIcon } from "@veltra/desktop";
+import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from "@veltra/icons/normal";
+import "@veltra/desktop/components/collapse/style";
+//#region src/components/ai-chat/tool-call.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UAiChatToolCall",
+	__name: "tool-call",
+	props: { toolCall: {} },
+	emits: ["respond"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const di = inject(AiChatDIKey);
+		const cls = di?.cls ?? bem("ai-chat");
+		/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse） */
+		const tool = computed(() => di?.tools.value[props.toolCall.name]);
+		const isExpanded = ref(false);
+		/** 用户手动切换过后，不再随 status 自动展开/折叠 */
+		let userToggled = false;
+		function markUserToggled() {
+			userToggled = true;
+		}
+		/** 完成后是否自动折叠：缺省有 render 时不折叠，否则折叠 */
+		const autoCollapse = computed(() => tool.value?.autoCollapse ?? !tool.value?.render);
+		watch(() => props.toolCall.status, (status) => {
+			if (userToggled) return;
+			if (status === "running" || status === "awaiting-confirm") isExpanded.value = true;
+			else isExpanded.value = !autoCollapse.value;
+		}, { immediate: true });
+		const STATUS_META = {
+			pending: {
+				icon: Loading,
+				class: "is-loading"
+			},
+			running: {
+				icon: Loading,
+				class: "is-loading"
+			},
+			"awaiting-confirm": {
+				icon: WarningFilled,
+				class: "is-warning"
+			},
+			success: {
+				icon: CircleCheckFilled,
+				class: "is-success"
+			},
+			error: {
+				icon: CircleClose,
+				class: "is-danger"
+			},
+			rejected: {
+				icon: Close,
+				class: "is-danger"
+			}
+		};
+		const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading);
+		const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? "");
+		/** 头部图标：工具自定义图标优先，缺省用状态图标 */
+		const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value);
+		const parsedArguments = computed(() => {
+			if (!props.toolCall.arguments) return null;
+			try {
+				return JSON.parse(props.toolCall.arguments);
+			} catch {
+				return null;
+			}
+		});
+		/** 折叠态参数摘要：取第一个字符串参数值 */
+		const summary = computed(() => {
+			const args = parsedArguments.value;
+			if (!args) return "";
+			for (const value of Object.values(args)) if (typeof value === "string" && value) return value.length > 40 ? `${value.slice(0, 40)}…` : value;
+			return "";
+		});
+		const prettyArguments = computed(() => {
+			const args = parsedArguments.value;
+			if (args) return JSON.stringify(args, null, 2);
+			return props.toolCall.arguments || "";
+		});
+		const hasResult = computed(() => {
+			return props.toolCall.result != null || props.toolCall.error != null;
+		});
+		const displayResult = computed(() => {
+			const raw = props.toolCall.error ?? props.toolCall.result ?? "";
+			try {
+				return JSON.stringify(JSON.parse(raw), null, 2);
+			} catch {
+				return raw;
+			}
+		});
+		/** 使用方通过 tool-<name> 插槽自定义该工具的展示（有结果时替换整个 body） */
+		const slotBody = computed(() => {
+			const slot = di?.slots[`tool-${props.toolCall.name}`];
+			return slot ? () => slot({ toolCall: props.toolCall }) : void 0;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				unref(cls).e("tool-call"),
+				unref(bem).is(__props.toolCall.status),
+				unref(bem).is("expanded", isExpanded.value)
+			]) }, [createVNode(unref(UCollapseItem), {
+				modelValue: isExpanded.value,
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isExpanded.value = $event),
+				onChange: markUserToggled
+			}, {
+				title: withCtx(() => [
+					createVNode(unref(UIcon), { class: normalizeClass([unref(cls).e("tool-call-status"), statusClass.value]) }, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(headerIcon.value)))]),
+						_: 1
+					}, 8, ["class"]),
+					createElementVNode("span", { class: normalizeClass(unref(cls).e("tool-call-name")) }, toDisplayString(tool.value?.label ?? __props.toolCall.name), 3),
+					summary.value ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("tool-call-summary"))
+					}, toDisplayString(summary.value), 3)) : createCommentVNode("v-if", true),
+					__props.toolCall.status === "awaiting-confirm" ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(cls).e("tool-call-confirm")),
+						onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+					}, [createVNode(unref(UButton), {
+						size: "small",
+						type: "primary",
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("respond", true))
+					}, {
+						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("允许", -1)])]),
+						_: 1
+					}), createVNode(unref(UButton), {
+						size: "small",
+						text: "",
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("respond", false))
+					}, {
+						default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("拒绝", -1)])]),
+						_: 1
+					})], 2)) : createCommentVNode("v-if", true)
+				]),
+				default: withCtx(() => [tool.value?.render ? (openBlock(), createBlock(resolveDynamicComponent(tool.value?.render), {
+					key: 0,
+					"tool-call": __props.toolCall
+				}, null, 8, ["tool-call"])) : slotBody.value && hasResult.value ? (openBlock(), createBlock(resolveDynamicComponent(slotBody.value), { key: 1 })) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [prettyArguments.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-call-section")) }, "参数", 2), createElementVNode("pre", { class: normalizeClass(unref(cls).e("tool-call-code")) }, toDisplayString(prettyArguments.value), 3)], 64)) : createCommentVNode("v-if", true), hasResult.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-call-section")) }, toDisplayString(__props.toolCall.status === "error" ? "错误" : "结果"), 3), createElementVNode("pre", { class: normalizeClass(unref(cls).e("tool-call-code")) }, toDisplayString(displayResult.value), 3)], 64)) : createCommentVNode("v-if", true)], 64))]),
+				_: 1
+			}, 8, ["modelValue"])], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tool-call.js.map