@veltra/ai 2.0.0 → 2.1.1

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

@@ -1,37 +1,99 @@
 <template>
-  <UScroll :class="cls.e('list')" ref="scrollRef" always @scroll="handleScroll">
-    <div v-if="!visibleMessages.length" :class="cls.e('welcome')">
-      <slot name="welcome">{{ welcome }}</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')"
-    />
-  </UScroll>
+  <div :class="cls.e('list-wrap')">
+    <UScroll
+      :class="cls.e('list')"
+      ref="scrollRef"
+      always
+      @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" />
+        <span v-if="running" :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+      </div>
+    </UScroll>
+
+    <!-- 用户上翻浏览时悬浮入口：一键回到最新消息 -->
+    <Transition :name="cls.em('to-latest', 'fade')">
+      <button v-if="showToLatest" type="button" :class="cls.e('to-latest')" @click="scrollToLatest">
+        <UIcon><ArrowDown /></UIcon>
+        <span>最新消息</span>
+      </button>
+    </Transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { UScroll } from '@veltra/desktop'
+import { UIcon, UScroll } from '@veltra/desktop'
 import type { ScrollPosition } from '@veltra/desktop'
+import { ArrowDown } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch
+} from 'vue'
 
 import type { ChatMessage } from '../../chat/types'
+import type { AiOrbExposed, AiOrbReaction, AiOrbStatus } from '../../types/ai-orb'
+import UAiOrb from '../ai-orb/ai-orb.vue'
 import { AiChatDIKey } from './di'
 import MessageItem from './message-item.vue'
 
 defineOptions({ name: 'UAiChatMessageList' })
 
+/** 欢迎区活体球直径（px） */
+const WELCOME_ORB_SIZE = 64
+/** 工作指示活体球直径（px） */
+const WORKING_ORB_SIZE = 48
+/** 生成结束 / 失败后工作球停留再隐藏 */
+const WORKING_LINGER_MS = 2500
+
 const props = defineProps<{
   messages: ChatMessage[]
-  /** 空状态欢迎语 */
-  welcome?: string
+  /** 空状态欢迎项；字符串按单项处理 */
+  welcome?: string | string[]
+  /** 是否生成中（控制底部工作状态指示） */
+  running?: boolean
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()
@@ -39,6 +101,8 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'respond', toolCallId: string, approved: boolean): void
   (e: 'regenerate'): void
+  /** 点击欢迎项（快捷提问） */
+  (e: 'welcome-click', text: string): void
 }>()
 
 defineSlots<{
@@ -52,12 +116,161 @@ const cls = di?.cls ?? bem('ai-chat')
 /** tool 消息不单独渲染，其内容体现在工具卡片的结果区 */
 const visibleMessages = computed(() => props.messages.filter((msg) => msg.role !== 'tool'))
 
+const welcomeItems = computed(() => {
+  const welcome = props.welcome
+  if (!welcome) return []
+  return (Array.isArray(welcome) ? welcome : [welcome]).filter(Boolean)
+})
+
+/** 欢迎语逐条轮换：当前展示项的下标 */
+const welcomeIndex = ref(0)
+
+/** 当前展示的欢迎语 */
+const currentWelcomeItem = computed(() => {
+  const items = welcomeItems.value
+  return items.length ? items[welcomeIndex.value % items.length] : undefined
+})
+
+let welcomeTimer: ReturnType<typeof setInterval> | undefined
+
+const stopWelcomeRotation = () => {
+  clearInterval(welcomeTimer)
+  welcomeTimer = undefined
+}
+
+const startWelcomeRotation = () => {
+  stopWelcomeRotation()
+  if (welcomeItems.value.length > 1) {
+    welcomeTimer = setInterval(() => {
+      welcomeIndex.value += 1
+    }, 4000)
+  }
+}
+
+/** 点击欢迎球：不等自动轮换，立即换下一条，并重置计时 */
+const cycleWelcome = () => {
+  if (welcomeItems.value.length <= 1) return
+  welcomeIndex.value += 1
+  startWelcomeRotation()
+}
+
+// 欢迎区展示期间自动轮换；出现消息后停止
+watch(
+  () => [welcomeItems.value.length, visibleMessages.value.length] as const,
+  () => {
+    if (visibleMessages.value.length > 0) stopWelcomeRotation()
+    else startWelcomeRotation()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(stopWelcomeRotation)
+
+const workingOrbRef = useTemplateRef<AiOrbExposed>('workingOrb')
+
+/** 工具调用失败的 id 去重集合：同一次失败只播一次沮丧表情 */
+const reactedToolErrorIds = new Set<string>()
+
+const toolErrorIds = computed(() => {
+  const ids: string[] = []
+  for (const msg of props.messages) {
+    if (msg.role !== 'assistant' || !msg.toolCalls) continue
+    for (const call of msg.toolCalls) {
+      if (call.status === 'error') ids.push(call.id)
+    }
+  }
+  return ids
+})
+
+// 工具调用失败 → 工作球闭眼摇头（frustrated）
+watch(toolErrorIds, (ids) => {
+  for (const id of ids) {
+    if (reactedToolErrorIds.has(id)) continue
+    reactedToolErrorIds.add(id)
+    workingOrbRef.value?.react('frustrated')
+  }
+})
+
+/** 回答完毕 / 失败后工作球短暂停留，播完表情再隐藏 */
+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'
+  const last = visibleMessages.value[visibleMessages.value.length - 1]
+  if (last?.role === 'assistant' && last.status === 'streaming' && last.content) {
+    return 'speaking'
+  }
+  return 'thinking'
+})
+
+watch(
+  () => props.running,
+  (running, prev) => {
+    if (running) {
+      // 新一轮生成开始：立即结束收尾停留
+      clearFinishing()
+      return
+    }
+    if (!prev) return
+
+    finishing.value = true
+    const last = visibleMessages.value[visibleMessages.value.length - 1]
+    let reaction: AiOrbReaction | undefined
+    if (last?.role === 'assistant') {
+      if (last.status === 'done') reaction = 'happy'
+      else if (last.status === 'error') reaction = 'frustrated'
+    }
+    if (reaction) {
+      nextTick(() => workingOrbRef.value?.react(reaction))
+    }
+    finishTimer = setTimeout(clearFinishing, WORKING_LINGER_MS)
+  }
+)
+
+onBeforeUnmount(clearFinishing)
+
 const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()
 /** 是否吸附底部（用户上翻浏览历史时取消吸附） */
 const stickToBottom = ref(true)
+/** 上一次滚动位置：用于区分用户上翻与自动吸底触发的 scroll 事件 */
+let lastScrollY = 0
+
+/** 上翻阅读时展示「最新消息」悬浮按钮 */
+const showToLatest = computed(() => !stickToBottom.value && visibleMessages.value.length > 0)
 
 const handleScroll = (position: Required<ScrollPosition>) => {
-  stickToBottom.value = position.sh - position.ch - position.y < 60
+  const atBottom = position.sh - position.ch - position.y < 60
+  if (atBottom) {
+    stickToBottom.value = true
+  } else if (position.y < lastScrollY) {
+    // 只有「向上滚」才算用户离开底部的意图：自动吸底的 scroll 事件可能滞后于
+    // 流式内容增长（sh 已变大、y 仍是旧底部），按位置判断会误判成未吸底
+    stickToBottom.value = false
+  }
+  lastScrollY = position.y
+}
+
+/**
+ * 用户向上滚动轮 = 明确的离开底部意图，立即取消吸附。
+ * 不能等 scroll 事件再按方向判断：流式期间每个 chunk 都会排一次吸底滚动，
+ * 滞后的 scrollTo 会把用户拉回底部并触发 atBottom 重新吸附，导致「上滚动不了」
+ */
+const handleWheel = (e: WheelEvent) => {
+  if (e.deltaY < 0) stickToBottom.value = false
+}
+
+/** 点击悬浮按钮：恢复吸附并回到底部 */
+const scrollToLatest = async () => {
+  stickToBottom.value = true
+  await nextTick()
+  scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
 }
 
 // 消息数量或流式内容变化时，若处于吸附状态则滚动到底部
@@ -69,13 +282,40 @@ watch(
       list.length,
       last?.content.length ?? 0,
       last?.reasoning?.length ?? 0,
-      last?.toolCalls?.length ?? 0
+      last?.toolCalls?.length ?? 0,
+      props.running
     ].join('|')
   },
   async () => {
+    // 用户刚发出消息时强制回到底部（无论之前是否在上翻）
+    const list = visibleMessages.value
+    if (list[list.length - 1]?.role === 'user') stickToBottom.value = true
+    if (!stickToBottom.value) return
+    await nextTick()
+    // 等待 DOM 更新期间用户可能已上滚，滚动前重新确认吸附状态，避免把用户拉回底部
+    if (!stickToBottom.value) return
+    scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
+  }
+)
+
+let trailingScrollTimer: ReturnType<typeof setTimeout> | undefined
+
+// 生成收尾时动作区出现 / markdown 终态渲染 / 思考块折叠会再次改变高度，
+// 同帧滚动可能够不到最终底部，追加一次延迟兜底滚动
+watch(
+  () => props.running,
+  async (running) => {
+    if (running) return
+    clearTimeout(trailingScrollTimer)
     if (!stickToBottom.value) return
     await nextTick()
+    if (!stickToBottom.value) return
     scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
+    trailingScrollTimer = setTimeout(() => {
+      if (stickToBottom.value) scrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
+    }, 150)
   }
 )
+
+onBeforeUnmount(() => clearTimeout(trailingScrollTimer))
 </script>

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

@@ -2,8 +2,10 @@
   <UDropdown
     ref="dropdownRef"
     trigger="click"
+    width="auto"
     min-width="220px"
     :content-class="cls.e('model-panel')"
+    @update:visible="handleVisibleChange"
   >
     <template #trigger>
       <button type="button" :class="cls.e('model-trigger')">
@@ -20,60 +22,81 @@
     </template>
 
     <template #content>
-      <div
-        v-for="item in models"
-        :key="item.id"
-        :class="[cls.e('model-option'), bem.is('active', item.id === model)]"
-        @click="handleSelectModel(item.id)"
-      >
-        <div :class="cls.e('model-option-head')">
-          <span>{{ item.label ?? item.id }}</span>
-          <UIcon v-if="item.id === model" :class="cls.e('model-option-check')">
-            <Check />
-          </UIcon>
-        </div>
-        <div v-if="item.description" :class="cls.e('model-option-desc')">
-          {{ item.description }}
-        </div>
-      </div>
-
-      <template v-if="reasoningLevels.length">
-        <div :class="cls.e('model-divider')" />
-
-        <div :class="cls.e('reasoning-row')" @click="toggleReasoning">
-          <span>思考强度</span>
-          <span :class="cls.e('reasoning-row-value')">
-            {{ currentReasoningLabel }}
-            <UIcon>
-              <ArrowDown v-if="reasoningExpanded" />
-              <ArrowRight v-else />
-            </UIcon>
-          </span>
-        </div>
+      <div :class="cls.e('model-panel-list')">
+        <div
+          v-for="item in models"
+          :key="item.id"
+          :class="[cls.e('model-option'), bem.is('active', item.id === model)]"
+        >
+          <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>
+            </div>
+            <div v-if="item.description" :class="cls.e('model-option-desc')">
+              {{ item.description }}
+            </div>
+          </div>
 
-        <template v-if="reasoningExpanded">
           <div
-            v-for="level in reasoningLevels"
-            :key="level.value"
-            :class="[cls.e('reasoning-option'), bem.is('active', level.value === reasoningLevel)]"
-            @click="handleSelectReasoning(level.value)"
+            v-if="item.reasoningLevels?.length"
+            :class="[
+              cls.e('reasoning-levels'),
+              bem.is('expanded', expandedReasoningId === item.id)
+            ]"
           >
-            <span>{{ level.label }}</span>
-            <UIcon v-if="level.value === reasoningLevel" :class="cls.e('model-option-check')">
-              <Check />
-            </UIcon>
+            <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>
-        </template>
-      </template>
+        </div>
+      </div>
     </template>
   </UDropdown>
 </template>
 
 <script lang="ts" setup>
 import { UDropdown, UIcon } from '@veltra/desktop'
-import { ArrowDown, ArrowRight, Check } from '@veltra/icons/normal'
+import { ArrowDown, Check } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, nextTick, ref, useTemplateRef } from 'vue'
+import { computed, inject, nextTick, shallowRef, useTemplateRef } from 'vue'
 
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
@@ -85,41 +108,69 @@ const props = defineProps<{
   models: ChatModelOption[]
 }>()
 
-const model = defineModel<string>('model')
-const reasoningLevel = defineModel<string>('reasoningLevel')
+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')
 
-/** 思考强度子列表是否展开 */
-const reasoningExpanded = ref(false)
+/** 当前内联展开思考强度的模型 id（手风琴，同时只展开一个） */
+const expandedReasoningId = shallowRef<string>()
 
 const currentModel = computed(() => {
   return props.models.find((m) => m.id === model.value)
 })
 
-const reasoningLevels = computed(() => currentModel.value?.reasoningLevels ?? [])
-
 const currentReasoningLabel = computed(() => {
-  return reasoningLevels.value.find((l) => l.value === reasoningLevel.value)?.label
+  return currentModel.value?.reasoningLevels?.find((level) => level.value === reasoningLevel.value)
+    ?.label
 })
 
-/** 展开/收起思考强度子列表，并重置面板位置防止溢出 */
-const toggleReasoning = () => {
-  reasoningExpanded.value = !reasoningExpanded.value
-  nextTick(() => dropdownRef.value?.updateDropdown())
+/** 取模型默认推理等级：显式配置优先，缺省落到首个可选等级 */
+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
+  )
 }
 
-/** 选中模型（推理等级校正在 useChat 中完成） */
-const handleSelectModel = (id: string) => {
-  model.value = id
-  reasoningExpanded.value = false
+/** 胶囊文案：已选中模型展示当前推理等级，其余展示该模型的默认等级 */
+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
+}
+
+/** 点击模型主体：直接选中模型，并同步到该模型默认推理等级 */
+const handleSelectModel = (item: ChatModelOption) => {
+  model.value = item.id
+  reasoningLevel.value = resolveDefaultReasoningLevel(item)
   dropdownRef.value?.close()
 }
 
-const handleSelectReasoning = (value: string) => {
+/** 点击推理等级胶囊：内联展开/收起该模型的思考强度 */
+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()
 }

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

@@ -0,0 +1,63 @@
+<template>
+  <div v-if="queue.length" :class="cls.e('queue')">
+    <div :class="cls.e('queue-head')">待发送队列 · {{ queue.length }}</div>
+    <div v-for="item in queue" :key="item.id" :class="cls.e('queue-item')">
+      <span :class="cls.e('queue-text')" :title="item.content">{{ item.content }}</span>
+      <span :class="cls.e('queue-actions')">
+        <button
+          type="button"
+          :class="[cls.e('queue-action'), cls.em('queue-action', 'primary')]"
+          title="中断当前会话，立即执行该条"
+          @click="emit('start-now', item.id)"
+        >
+          <UIcon><CaretRight /></UIcon>立即开始
+        </button>
+        <button
+          type="button"
+          :class="cls.e('queue-action')"
+          title="取回输入框编辑"
+          @click="emit('edit', item.id)"
+        >
+          <UIcon><EditPen /></UIcon>
+        </button>
+        <button
+          type="button"
+          :class="cls.e('queue-action')"
+          title="移出队列"
+          @click="emit('remove', item.id)"
+        >
+          <UIcon><Close /></UIcon>
+        </button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UIcon } from '@veltra/desktop'
+import { CaretRight, Close, EditPen } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject } from 'vue'
+
+import type { ChatQueuedMessage } from '../../chat/types'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatQueueList' })
+
+defineProps<{
+  /** 待发送队列（按执行顺序排列） */
+  queue: ChatQueuedMessage[]
+}>()
+
+const emit = defineEmits<{
+  /** 立即开始：中断当前会话并插队执行 */
+  (e: 'start-now', id: string): void
+  /** 编辑：取回输入框重新编辑 */
+  (e: 'edit', id: string): void
+  /** 移出队列 */
+  (e: 'remove', id: string): void
+}>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+</script>