@veltra/ai 2.1.1 → 2.1.2

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

@@ -7,46 +7,79 @@
       @scroll="handleScroll"
       @wheel.passive="handleWheel"
     >
-      <div v-if="!visibleMessages.length" :class="cls.e('welcome')">
-        <slot name="welcome">
-          <div :class="cls.e('welcome-inner')">
-            <UAiOrb :size="WELCOME_ORB_SIZE" @click="cycleWelcome" />
-            <!-- 快捷提问逐条展示在球右侧并自动轮换：点文案发送，点球立即换下一条。
-                 固定锚点布局：球位置钉死不动，气泡只向右延展，避免轮换时水平瞬移 -->
-            <div v-if="welcomeItems.length" :class="cls.e('welcome-item-wrap')">
-              <Transition :name="cls.em('welcome', 'swap')" mode="out-in">
-                <button
-                  v-if="currentWelcomeItem"
-                  :key="welcomeIndex"
-                  type="button"
-                  :class="cls.e('welcome-item')"
-                  @click="emit('welcome-click', currentWelcomeItem)"
-                >
-                  {{ currentWelcomeItem }}
-                </button>
-              </Transition>
-            </div>
-          </div>
-        </slot>
-      </div>
-
-      <MessageItem
-        v-for="(msg, index) in visibleMessages"
-        :key="msg.id"
-        :message="msg"
-        :is-last="index === visibleMessages.length - 1"
-        :renderer-props="rendererProps"
-        @respond="(id, approved) => emit('respond', id, approved)"
-        @regenerate="emit('regenerate')"
-      />
-
-      <!-- 工作状态统一指示：生成中在列表末尾展示活体球 + 文案；结束 / 失败停留片刻再隐藏 -->
-      <div v-if="running || finishing" :class="cls.e('working')">
-        <UAiOrb ref="workingOrb" :size="WORKING_ORB_SIZE" :status="workingOrbStatus" />
+      <template v-for="turn in turns" :key="turn.key">
+        <MessageItem
+          v-if="turn.userMsg"
+          :message="turn.userMsg"
+          :is-last="false"
+          :renderer-props="rendererProps"
+          @respond="(id, approved) => emit('respond', id, approved)"
+          @regenerate="emit('regenerate')"
+        />
+
+        <!-- 最终答案开始输出后，本轮之前的思考/工具调用过程收进「已完成」折叠块 -->
+        <TurnProcess
+          v-if="turn.processCollapsed"
+          :messages="turn.processMsgs"
+          :renderer-props="rendererProps"
+          @respond="(id, approved) => emit('respond', id, approved)"
+        />
+        <template v-else>
+          <MessageItem
+            v-for="msg in turn.processMsgs"
+            :key="msg.id"
+            :message="msg"
+            :is-last="false"
+            :renderer-props="rendererProps"
+            @respond="(id, approved) => emit('respond', id, approved)"
+            @regenerate="emit('regenerate')"
+          />
+        </template>
+
+        <MessageItem
+          v-if="turn.answerMsg"
+          :message="turn.answerMsg"
+          :is-last="turn.isLast"
+          :renderer-props="rendererProps"
+          @respond="(id, approved) => emit('respond', id, approved)"
+          @regenerate="emit('regenerate')"
+        />
+      </template>
+
+      <!-- 工作中：活体球从输入框上方跳到最新会话下面；结束停留后再跳回 -->
+      <div v-if="showWorking" :class="[cls.e('working'), bem.is('leaving', workingLeaving)]">
+        <UAiOrb ref="workingOrb" :size="ORB_SIZE" :status="workingOrbStatus" />
         <span v-if="running" :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
       </div>
     </UScroll>
 
+    <!-- 空闲：始终钉在滚动容器外、输入框上方；工作开始时缩小离开、结束后放大回来 -->
+    <div
+      v-if="showIdleWelcome"
+      :class="[cls.e('welcome'), bem.is('leaving', idleLeaving), bem.is('enter', idleEnter)]"
+    >
+      <slot name="welcome">
+        <div :class="cls.e('welcome-inner')">
+          <UAiOrb :size="ORB_SIZE" @click="cycleWelcome" />
+          <!-- 快捷提问逐条展示在球右侧并自动轮换：点文案发送，点球立即换下一条。
+               固定锚点布局：球位置钉死不动，气泡只向右延展，避免轮换时水平瞬移 -->
+          <div v-if="welcomeItems.length" :class="cls.e('welcome-item-wrap')">
+            <Transition :name="cls.em('welcome', 'swap')" mode="out-in">
+              <button
+                v-if="currentWelcomeItem"
+                :key="welcomeIndex"
+                type="button"
+                :class="cls.e('welcome-item')"
+                @click="emit('welcome-click', currentWelcomeItem)"
+              >
+                {{ currentWelcomeItem }}
+              </button>
+            </Transition>
+          </div>
+        </div>
+      </slot>
+    </div>
+
     <!-- 用户上翻浏览时悬浮入口：一键回到最新消息 -->
     <Transition :name="cls.em('to-latest', 'fade')">
       <button v-if="showToLatest" type="button" :class="cls.e('to-latest')" @click="scrollToLatest">
@@ -78,19 +111,20 @@ import type { AiOrbExposed, AiOrbReaction, AiOrbStatus } from '../../types/ai-or
 import UAiOrb from '../ai-orb/ai-orb.vue'
 import { AiChatDIKey } from './di'
 import MessageItem from './message-item.vue'
+import TurnProcess from './turn-process.vue'
 
 defineOptions({ name: 'UAiChatMessageList' })
 
-/** 欢迎区活体球直径（px） */
-const WELCOME_ORB_SIZE = 64
-/** 工作指示活体球直径（px） */
-const WORKING_ORB_SIZE = 48
-/** 生成结束 / 失败后工作球停留再隐藏 */
+/** 空闲欢迎 / 工作指示共用活体球直径（px） */
+const ORB_SIZE = 48
+/** 生成结束 / 失败后工作球停留再跳回输入框上方 */
 const WORKING_LINGER_MS = 2500
+/** 两处活体球对向缩放的时长（与样式中的 jump 过渡一致） */
+const JUMP_MS = 380
 
 const props = defineProps<{
   messages: ChatMessage[]
-  /** 空状态欢迎项；字符串按单项处理 */
+  /** 空闲时输入框上方的快捷提问；字符串按单项处理 */
   welcome?: string | string[]
   /** 是否生成中（控制底部工作状态指示） */
   running?: boolean
@@ -106,7 +140,7 @@ const emit = defineEmits<{
 }>()
 
 defineSlots<{
-  /** 空状态欢迎区插槽 */
+  /** 空闲欢迎区插槽（输入框上方；工作中跳到列表末尾） */
   welcome(): any
 }>()
 
@@ -116,6 +150,56 @@ const cls = di?.cls ?? bem('ai-chat')
 /** tool 消息不单独渲染，其内容体现在工具卡片的结果区 */
 const visibleMessages = computed(() => props.messages.filter((msg) => msg.role !== 'tool'))
 
+/** 一轮对话：以 user 消息为界，含本轮全部 assistant 消息（每次工具循环产生一条） */
+interface ChatTurn {
+  /** 轮次 key（取用户消息或首条 assistant 消息 id） */
+  key: string
+  userMsg?: ChatMessage
+  /** 最终答案之前的过程消息（思考 + 中间文本 + 工具卡片） */
+  processMsgs: ChatMessage[]
+  /** 本轮最终答案（最后一条 assistant 消息） */
+  answerMsg?: ChatMessage
+  /** 过程消息是否收进「已完成」折叠块 */
+  processCollapsed: boolean
+  /** answerMsg 是否为全局最后一条可见消息 */
+  isLast: boolean
+}
+
+const isFinalStatus = (msg?: ChatMessage) =>
+  msg?.status === 'done' || msg?.status === 'error' || msg?.status === 'aborted'
+
+const turns = computed<ChatTurn[]>(() => {
+  const grouped: { key: string; userMsg?: ChatMessage; assistants: ChatMessage[] }[] = []
+  for (const msg of visibleMessages.value) {
+    if (msg.role === 'user') {
+      grouped.push({ key: msg.id, userMsg: msg, assistants: [] })
+      continue
+    }
+    const last = grouped[grouped.length - 1]
+    // 兼容 assistant 开头的历史会话：归入无用户消息的轮次
+    if (last) last.assistants.push(msg)
+    else grouped.push({ key: msg.id, assistants: [msg] })
+  }
+  return grouped.map((turn, index) => {
+    const processMsgs = turn.assistants.slice(0, -1)
+    const answerMsg = turn.assistants[turn.assistants.length - 1]
+    const isLastTurn = index === grouped.length - 1
+    // 该轮结束（非最后一轮 / 答案进入终态）或最终答案开始输出时折叠过程。
+    // content 只增不减，折叠后不会回弹；regenerate 删除本轮 assistant 重跑，条件自然复位
+    const processCollapsed =
+      processMsgs.length > 0 &&
+      (!isLastTurn || !!answerMsg?.content || (!props.running && isFinalStatus(answerMsg)))
+    return {
+      key: turn.key,
+      userMsg: turn.userMsg,
+      processMsgs,
+      answerMsg,
+      processCollapsed,
+      isLast: isLastTurn && !!answerMsg
+    }
+  })
+})
+
 const welcomeItems = computed(() => {
   const welcome = props.welcome
   if (!welcome) return []
@@ -154,17 +238,27 @@ const cycleWelcome = () => {
   startWelcomeRotation()
 }
 
-// 欢迎区展示期间自动轮换；出现消息后停止
-watch(
-  () => [welcomeItems.value.length, visibleMessages.value.length] as const,
-  () => {
-    if (visibleMessages.value.length > 0) stopWelcomeRotation()
-    else startWelcomeRotation()
-  },
-  { immediate: true }
-)
+/** 回答完毕 / 失败后工作球短暂停留，播完表情再跳回输入框上方 */
+const finishing = ref(false)
+/** 列表中的球正在缩小离开 */
+const workingLeaving = ref(false)
+/** 输入框上方的球正在缩小离开 */
+const idleLeaving = ref(false)
+/** 输入框上方的球从工作位放大回来（首屏出现不播） */
+const idleEnter = ref(false)
 
-onBeforeUnmount(stopWelcomeRotation)
+let finishTimer: ReturnType<typeof setTimeout> | undefined
+let jumpTimer: ReturnType<typeof setTimeout> | undefined
+
+const clearJumpTimers = () => {
+  clearTimeout(finishTimer)
+  clearTimeout(jumpTimer)
+}
+
+/** 列表末尾的工作球：生成中 / 收尾停留 / 跳回过渡 */
+const showWorking = computed(() => !!(props.running || finishing.value || workingLeaving.value))
+/** 输入框上方的空闲欢迎：含工作开始时的缩小离开帧 */
+const showIdleWelcome = computed(() => (!props.running && !finishing.value) || idleLeaving.value)
 
 const workingOrbRef = useTemplateRef<AiOrbExposed>('workingOrb')
 
@@ -191,15 +285,6 @@ watch(toolErrorIds, (ids) => {
   }
 })
 
-/** 回答完毕 / 失败后工作球短暂停留，播完表情再隐藏 */
-const finishing = ref(false)
-let finishTimer: ReturnType<typeof setTimeout> | undefined
-
-const clearFinishing = () => {
-  clearTimeout(finishTimer)
-  finishing.value = false
-}
-
 /** 工作球状态：收尾停留 → idle；正文输出中 → speaking；其余生成阶段 → thinking */
 const workingOrbStatus = computed<AiOrbStatus>(() => {
   if (finishing.value) return 'idle'
@@ -214,13 +299,26 @@ watch(
   () => props.running,
   (running, prev) => {
     if (running) {
-      // 新一轮生成开始：立即结束收尾停留
-      clearFinishing()
+      // 工作开始：立即从输入框上方跳到列表，无停留
+      clearJumpTimers()
+      const idleWasVisible = !prev && !finishing.value && !workingLeaving.value
+      finishing.value = false
+      workingLeaving.value = false
+      idleEnter.value = false
+      if (idleWasVisible) {
+        idleLeaving.value = true
+        jumpTimer = setTimeout(() => {
+          idleLeaving.value = false
+        }, JUMP_MS)
+      } else {
+        idleLeaving.value = false
+      }
       return
     }
     if (!prev) return
 
     finishing.value = true
+    idleLeaving.value = false
     const last = visibleMessages.value[visibleMessages.value.length - 1]
     let reaction: AiOrbReaction | undefined
     if (last?.role === 'assistant') {
@@ -230,11 +328,33 @@ watch(
     if (reaction) {
       nextTick(() => workingOrbRef.value?.react(reaction))
     }
-    finishTimer = setTimeout(clearFinishing, WORKING_LINGER_MS)
+    // 停留结束 → 列表中缩小、输入框上方放大
+    finishTimer = setTimeout(() => {
+      finishing.value = false
+      workingLeaving.value = true
+      idleEnter.value = true
+      jumpTimer = setTimeout(() => {
+        workingLeaving.value = false
+        idleEnter.value = false
+      }, JUMP_MS)
+    }, WORKING_LINGER_MS)
   }
 )
 
-onBeforeUnmount(clearFinishing)
+// 空闲欢迎区展示期间自动轮换；跳到工作位后停止
+watch(
+  () => [welcomeItems.value.length, showIdleWelcome.value] as const,
+  () => {
+    if (showIdleWelcome.value) startWelcomeRotation()
+    else stopWelcomeRotation()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  stopWelcomeRotation()
+  clearJumpTimers()
+})
 
 const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()
 /** 是否吸附底部（用户上翻浏览历史时取消吸附） */

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

@@ -22,7 +22,7 @@ $root-name: ai-chat;
     padding: 0 fn.use-var(gap, default);
 
     // 空会话：列表区与末尾占位各分一半剩余空间，输入区垂直居中，
-    // 欢迎区（orb + 快捷提问）贴于输入区上方并与之左对齐；有消息后自动回落到底部
+    // 欢迎区钉在滚动容器外、贴于输入框上方；有消息后自动回落到底部
     @include m.is(empty) {
       &::after {
         content: '';
@@ -78,6 +78,19 @@ $root-name: ai-chat;
     }
   }
 
+  // 活体球在输入框上方 ↔ 列表末尾对向缩放（时长与 JUMP_MS 一致）
+  @keyframes u-ai-chat-orb-jump-in {
+    from {
+      opacity: 0;
+      transform: scale(0);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
   // 面板头部：无下分割线，靠留白与卡片边界区分内容区
   @include m.e(panel-header) {
     flex: none;
@@ -178,22 +191,43 @@ $root-name: ai-chat;
   @include m.e(list) {
     flex: 1;
     min-height: 0;
-
-    // 内容不足一屏时撑满滚动视口并按列排布，空会话欢迎区才能占满整列做底部对齐
-    .u-scroll__content {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
   }
 
-  // 欢迎区仅在空会话渲染：占满整列并底部对齐，使其贴在居中的输入区上方
+  // 空闲欢迎：钉在滚动容器外、输入框上方；高度锁 48px（球 + 快捷提问）
   @include m.e(welcome) {
-    flex: 1;
-    @include m.flex(flex, center, flex-end);
+    flex-shrink: 0;
+    width: 100%;
+    height: 48px;
+    @include m.flex(flex, flex-start, center);
     color: fn.use-var(text-color, assist);
-    padding: fn.use-var(gap, default) 0;
-    text-align: center;
+    padding: 0 fn.use-var(gap, default);
+
+    .u-ai-orb {
+      transform-origin: center;
+    }
+
+    @include m.is(enter) {
+      .u-ai-orb {
+        animation: u-ai-chat-orb-jump-in 0.38s ease both;
+      }
+    }
+
+    @include m.is(leaving) {
+      pointer-events: none;
+
+      .u-ai-orb {
+        opacity: 0;
+        transform: scale(0);
+        transition:
+          opacity 0.28s ease,
+          transform 0.38s ease;
+      }
+
+      .u-#{$root-name}__welcome-item-wrap {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+    }
   }
 
   @include m.e(welcome-inner) {
@@ -207,14 +241,14 @@ $root-name: ai-chat;
   @include m.e(welcome-item-wrap) {
     flex: 1;
     min-width: 0;
+    height: 48px;
     display: flex;
     align-items: center;
-    // 预留两行高度：长文案换行时行高不抖动
-    min-height: 54px;
   }
 
   @include m.e(welcome-item) {
     max-width: 100%;
+    @include m.ellipsis;
     padding: fn.use-var(gap, small) fn.use-var(gap, default);
     border: none;
     border-radius: fn.use-var(radius, large);
@@ -261,12 +295,44 @@ $root-name: ai-chat;
     @include m.flex(flex, flex-start, center);
     gap: fn.use-var(gap, small);
     padding: 0 fn.use-var(gap, default) fn.use-var(gap, small);
+    width: fit-content;
+
+    // 工作开始：立即从 0 放大（无延时），与输入框上方缩小形成对向跳
+    .u-ai-orb {
+      transform-origin: center;
+      animation: u-ai-chat-orb-jump-in 0.38s ease both;
+    }
+
+    @include m.is(leaving) {
+      pointer-events: none;
+
+      .u-ai-orb {
+        animation: none;
+        opacity: 0;
+        transform: scale(0);
+        transition:
+          opacity 0.28s ease,
+          transform 0.38s ease;
+      }
+    }
   }
 
   @include m.e(working-text) {
     font-size: fn.use-var(font-size-main, small);
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .u-#{$root-name}__welcome.is-enter .u-ai-orb,
+    .u-#{$root-name}__working .u-ai-orb {
+      animation: none;
+    }
+
+    .u-#{$root-name}__welcome.is-leaving .u-ai-orb,
+    .u-#{$root-name}__working.is-leaving .u-ai-orb {
+      transition: none;
+    }
+  }
+
   // 「最新消息」悬浮按钮：上翻浏览时出现，点击回到底部
   @include m.e(to-latest) {
     position: absolute;
@@ -382,7 +448,7 @@ $root-name: ai-chat;
 
   @include m.e(message-status) {
     margin-top: fn.use-var(gap, small);
-    color: fn.use-var(text-color, assist);
+    color: fn.use-var(text-color, second);
     font-size: fn.use-var(font-size-main, small);
   }
 
@@ -395,7 +461,7 @@ $root-name: ai-chat;
   // 思考过程
   @include m.e(reasoning) {
     margin-bottom: 4px;
-    color: fn.use-var(text-color, assist);
+    color: fn.use-var(text-color, second);
 
     @include m.is(expanded) {
       @include m.bem($root-name, 'reasoning-chevron') {
@@ -435,10 +501,54 @@ $root-name: ai-chat;
     line-height: 1.55;
   }
 
-  // 工具调用卡片（复用 UCollapseItem：头部经 #header 插槽自定义，body 为折叠内容区）
+  // 轮次过程折叠块（最终答案输出后，之前的思考/工具调用过程收进「已完成」）
+  @include m.e(process) {
+    padding: 4px fn.use-var(gap, default);
+    color: fn.use-var(text-color, second);
+
+    @include m.is(expanded) {
+      @include m.bem($root-name, 'process-chevron') {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  @include m.e(process-header) {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(process-icon) {
+    color: fn.use-var(color, success);
+  }
+
+  @include m.e(process-title) {
+    line-height: 1.5;
+  }
+
+  @include m.e(process-chevron) {
+    font-size: 12px;
+    transition: transform 0.2s;
+  }
+
+  @include m.e(process-content) {
+    margin-top: 4px;
+    padding-left: fn.use-var(gap, small);
+    border-left: fn.use-var(border-muted);
+
+    // 过程消息在边线内对齐：抵消列表项横向 padding
+    .u-#{$root-name}__message {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  // 工具调用卡片（复用 UCollapseItem：背景/边框走组件原生配色，#header 只自定义标题区）
   @include m.e(tool-call) {
     margin: 4px 0;
-    background-color: fn.use-var(bg-color, top);
     font-size: fn.use-var(font-size-main, small);
 
     // 相邻工具卡片保持紧凑间距（覆盖 UCollapseItem 的兄弟间距）
@@ -455,18 +565,11 @@ $root-name: ai-chat;
     }
 
     .u-collapse__content {
-      border-top: fn.use-var(border-muted);
       padding: fn.use-var(gap, small);
       line-height: 1.5;
     }
   }
 
-  @include m.e(tool-call-chevron) {
-    flex-shrink: 0;
-    font-size: 12px;
-    color: fn.use-var(text-color, assist);
-  }
-
   @include m.e(tool-call-status) {
     flex-shrink: 0;
     font-size: 13px;
@@ -760,7 +863,7 @@ $root-name: ai-chat;
     width: 100%;
     max-width: 800px;
     box-sizing: border-box;
-    margin: fn.use-var(gap, small) 0 fn.use-var(gap, default);
+    margin: 0 0 fn.use-var(gap, default);
     border-radius: fn.use-var(radius, large);
     background-color: fn.use-var(bg-color, top);
     padding: fn.use-var(gap, small);

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

@@ -24,8 +24,6 @@
         <UButton size="small" type="primary" @click="emit('respond', true)">允许</UButton>
         <UButton size="small" text @click="emit('respond', false)">拒绝</UButton>
       </span>
-
-      <UIcon :class="cls.e('tool-call-chevron')"><ArrowDown /></UIcon>
     </template>
 
     <!-- 面板工具：render 展示在右侧侧边面板，卡片 body 仅提供查看入口 -->
@@ -56,14 +54,7 @@
 
 <script lang="ts" setup>
 import { UButton, UCollapseItem, UIcon } from '@veltra/desktop'
-import {
-  ArrowDown,
-  CircleCheckFilled,
-  CircleClose,
-  Close,
-  Loading,
-  WarningFilled
-} from '@veltra/icons/normal'
+import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, ref, watch, type Component } from 'vue'
 

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

@@ -0,0 +1,47 @@
+<template>
+  <div :class="[cls.e('process'), bem.is('expanded', expanded)]">
+    <div :class="cls.e('process-header')" @click="expanded = !expanded">
+      <UIcon :class="cls.e('process-icon')"><CircleCheck /></UIcon>
+      <span :class="cls.e('process-title')">已完成</span>
+      <UIcon :class="cls.e('process-chevron')"><ArrowRight /></UIcon>
+    </div>
+    <!-- 折叠时完全卸载过程 DOM：历史轮次的思考/工具卡片可能很多，常驻挂载浪费渲染成本 -->
+    <div v-if="expanded" :class="cls.e('process-content')">
+      <MessageItem
+        v-for="msg in messages"
+        :key="msg.id"
+        :message="msg"
+        :is-last="false"
+        :renderer-props="rendererProps"
+        @respond="(id, approved) => emit('respond', id, approved)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UIcon } from '@veltra/desktop'
+import { ArrowRight, CircleCheck } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject, ref } from 'vue'
+
+import type { ChatMessage } from '../../chat/types'
+import { AiChatDIKey } from './di'
+import MessageItem from './message-item.vue'
+
+defineOptions({ name: 'UAiChatTurnProcess' })
+
+defineProps<{
+  /** 本轮最终答案之前的过程消息（思考 + 中间文本 + 工具卡片） */
+  messages: ChatMessage[]
+  /** 透传给 MarkdownRender 的属性 */
+  rendererProps?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{ (e: 'respond', toolCallId: string, approved: boolean): void }>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const expanded = ref(false)
+</script>