@veltra/ai 2.0.0 → 2.1.1

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

@@ -1,42 +1,75 @@
 <template>
-  <div :class="cls.b">
-    <MessageList
-      :messages="messages"
-      :welcome="welcome"
-      :renderer-props="rendererProps"
-      @respond="respondToolCall"
-      @regenerate="regenerate"
-    >
-      <template v-if="$slots.welcome" #welcome>
-        <slot name="welcome" />
-      </template>
-    </MessageList>
-
-    <ChatInput
-      v-model:model="model"
-      v-model:reasoning-level="reasoningLevel"
-      :running="running"
-      :models="models"
-      :placeholder="placeholder"
-      :accept="accept"
-      :max-attachment-size="maxAttachmentSize"
-      @send="send"
-      @abort="abort"
+  <ULayout
+    ref="layoutRef"
+    :class="[cls.b, bem.is('resizing', resizing)]"
+    :cols="layoutCols"
+    rows="1fr"
+    :resizable="panelOpen"
+    :col-min-sizes="panelOpen ? [MAIN_MIN_WIDTH, PANEL_MIN_WIDTH] : undefined"
+    @resize-start="resizing = true"
+    @resize-end="resizing = false"
+  >
+    <div :class="[cls.e('main'), bem.is('empty', isEmpty)]">
+      <MessageList
+        :messages="messages"
+        :welcome="welcome"
+        :running="running"
+        :renderer-props="rendererProps"
+        @respond="respondToolCall"
+        @regenerate="regenerate"
+        @welcome-click="(text) => handleSend(text, [])"
+      >
+        <template v-if="$slots.welcome" #welcome>
+          <slot name="welcome" />
+        </template>
+      </MessageList>
+
+      <QueueList
+        :queue="queue"
+        @start-now="startQueued"
+        @edit="handleQueueEdit"
+        @remove="removeQueued"
+      />
+
+      <ChatInput
+        ref="chatInputRef"
+        v-model:model="model"
+        v-model:reasoning-level="reasoningLevel"
+        :running="running"
+        :models="models"
+        :placeholder="placeholder"
+        :accept="accept"
+        :max-attachment-size="maxAttachmentSize"
+        @send="handleSend"
+        @abort="abort"
+      />
+    </div>
+
+    <!-- 侧边面板（renderTo: 'panel' 的工具渲染区），与会话区宽度经 ULayout 拖拽手柄调节 -->
+    <SidePanel
+      v-if="activePanelCall"
+      ref="panelRef"
+      :tool-call="activePanelCall"
+      @close="closePanel"
     />
-  </div>
+  </ULayout>
 </template>
 
 <script lang="ts" setup>
+import { useResizeObserver } from '@veltra/compositions'
+import { ULayout } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
-import { computed, provide, useSlots } from 'vue'
+import { computed, provide, ref, useSlots, useTemplateRef, watch } from 'vue'
 
-import type { ChatToolCall } from '../../chat/types'
+import type { ChatAttachment, ChatToolCall } from '../../chat/types'
 import { useChat } from '../../chat/use-chat'
 import { createBuiltinTools } from '../../tools'
 import type { _AiChatExposed, AiChatEmits, AiChatProps } from '../../types'
 import ChatInput from './chat-input.vue'
 import { AiChatDIKey } from './di'
 import MessageList from './message-list.vue'
+import QueueList from './queue-list.vue'
+import SidePanel from './side-panel.vue'
 
 defineOptions({ name: 'UAiChat' })
 
@@ -55,7 +88,7 @@ const cls = bem('ai-chat')
 
 const slots = useSlots()
 
-/** 内置 + 用户工具（同名内置优先），供工具卡片解析 icon/label/render/autoCollapse */
+/** 内置 + 用户工具（同名内置优先），供工具卡片解析 icon/label/render/renderTo/autoCollapse */
 const toolMap = computed(() => {
   const builtins = createBuiltinTools()
   const names = new Set(builtins.map((t) => t.name))
@@ -63,19 +96,182 @@ const toolMap = computed(() => {
   return Object.fromEntries(tools.map((t) => [t.name, t]))
 })
 
-provide(AiChatDIKey, { cls, slots, tools: toolMap })
-
 const {
   messages,
   model,
   reasoningLevel,
   running,
+  queue,
   send,
   abort,
   regenerate,
   clear,
-  respondToolCall
+  respondToolCall,
+  enqueue,
+  startQueued,
+  removeQueued
 } = useChat({ props, emit })
 
-defineExpose<_AiChatExposed>({ send, abort, regenerate, clear })
+/** 空会话（无可见消息）：输入区垂直居中，欢迎区（orb）贴于输入区上方并与之左对齐 */
+const isEmpty = computed(() => !messages.value.some((msg) => msg.role !== 'tool'))
+
+/** 所有 renderTo: 'panel' 的工具调用（按消息顺序，面板内容的来源） */
+const panelCalls = computed(() => {
+  const calls: ChatToolCall[] = []
+  for (const msg of messages.value) {
+    if (msg.role !== 'assistant' || !msg.toolCalls) continue
+    for (const call of msg.toolCalls) {
+      if (toolMap.value[call.name]?.renderTo === 'panel') calls.push(call)
+    }
+  }
+  return calls
+})
+
+/** 当前展示在右侧面板的工具调用 id；null 表示面板关闭 */
+const activePanelCallId = ref<string | null>(null)
+
+const activePanelCall = computed(() => {
+  if (!activePanelCallId.value) return null
+  return panelCalls.value.find((call) => call.id === activePanelCallId.value) ?? null
+})
+
+const panelOpen = computed(() => activePanelCall.value != null)
+
+// 出现新的面板工具调用时自动打开并聚焦到它
+watch(
+  () => panelCalls.value[panelCalls.value.length - 1]?.id,
+  (id) => {
+    if (id) activePanelCallId.value = id
+  }
+)
+
+// 聚焦的调用消失（清空消息 / 重新生成）时，回落到最近一次面板调用或关闭
+watch(panelCalls, (calls) => {
+  const id = activePanelCallId.value
+  if (id && !calls.some((call) => call.id === id)) {
+    activePanelCallId.value = calls[calls.length - 1]?.id ?? null
+  }
+})
+
+/** 打开面板并聚焦到指定工具调用（工具卡片「查看面板」入口，经 DI 下发） */
+const openPanel = (toolCallId: string) => {
+  if (panelCalls.value.some((call) => call.id === toolCallId)) {
+    activePanelCallId.value = toolCallId
+  }
+}
+
+const closePanel = () => {
+  activePanelCallId.value = null
+}
+
+provide(AiChatDIKey, { cls, slots, tools: toolMap, openPanel })
+
+/**
+ * 面板宽度：经 ULayout 列轨施加（cols = 1fr + 面板宽度），
+ * 拖拽手柄由 ULayout 提供（colMinSizes 约束会话区 / 面板最小宽度）。
+ */
+const PANEL_MIN_WIDTH = 320
+const MAIN_MIN_WIDTH = 360
+/** 面板打开时默认给会话区留的宽度（即面板默认尽可能大） */
+const MAIN_DEFAULT_WIDTH = 860
+
+const layoutRef = useTemplateRef<InstanceType<typeof ULayout>>('layoutRef')
+const panelRef = useTemplateRef<InstanceType<typeof SidePanel>>('panelRef')
+const panelWidth = ref(PANEL_MIN_WIDTH)
+const resizing = ref(false)
+
+const layoutCols = computed(() => {
+  return panelOpen.value ? ['1fr', `${panelWidth.value}px`] : ['1fr']
+})
+
+const containerWidth = () => (layoutRef.value?.$el as HTMLElement | undefined)?.clientWidth ?? 0
+
+/** 面板默认宽度：容器宽减去会话区默认保留宽度（缺省给会话区留 MAIN_DEFAULT_WIDTH） */
+const defaultPanelWidth = () => {
+  const width = containerWidth()
+  return width ? width - MAIN_DEFAULT_WIDTH : 420
+}
+
+/** 钳位面板宽度在 [PANEL_MIN_WIDTH, 容器宽 - MAIN_MIN_WIDTH] 区间 */
+const clampPanelWidth = (width: number) => {
+  const width0 = containerWidth()
+  const maxWidth = width0
+    ? Math.max(PANEL_MIN_WIDTH, width0 - MAIN_MIN_WIDTH)
+    : Number.MAX_SAFE_INTEGER
+  return Math.min(Math.max(width, PANEL_MIN_WIDTH), maxWidth)
+}
+
+// 聚焦到指定了 panelWidth 的工具调用时应用其宽度；面板从关闭到打开且工具未指定宽度时
+// 应用默认宽（会话区留 860px）；面板已打开时切换聚焦保持当前宽度（含用户拖拽结果）
+watch(activePanelCall, (call, prevCall) => {
+  if (!call) return
+  const toolWidth = toolMap.value[call.name]?.panelWidth
+  const width = toolWidth ?? (prevCall ? undefined : defaultPanelWidth())
+  if (typeof width !== 'number') return
+  panelWidth.value = clampPanelWidth(width)
+})
+
+// 跟踪面板实际宽度（含用户拖拽结果）：面板关闭重开、切换到未指定宽度的工具时保持
+useResizeObserver({
+  targets: computed(() => (panelRef.value?.$el as HTMLElement | undefined) ?? undefined),
+  onResize(entries) {
+    // borderBoxSize 随通知携带（含边框、零布局开销），不读 offsetWidth/clientWidth
+    const inlineSize = entries[0]?.borderBoxSize?.[0]?.inlineSize
+    if (!inlineSize) return
+    const width = Math.round(inlineSize)
+    // 滞回：忽略亚像素/边框级的微小偏差（< 2px），阻断任何「观测→回写→再观测」的微缩反馈回路
+    if (Math.abs(width - panelWidth.value) < 2) return
+    panelWidth.value = width
+  }
+})
+
+const chatInputRef = useTemplateRef<InstanceType<typeof ChatInput>>('chatInputRef')
+
+/**
+ * 编辑中的队列项原后继 id（编辑态标记）：
+ * undefined 表示无编辑；null 表示原位置在队尾；否则重新提交时插回该后继之前，
+ * 使前后项顺序不受编辑影响（前项已执行则该项自然成为最前待执行项）。
+ */
+const editingSuccessor = ref<string | null | undefined>(undefined)
+
+/** 编辑队列项：取回输入框重新编辑；已有未完成编辑时先按锚点还原，避免内容丢失 */
+const handleQueueEdit = (id: string) => {
+  restoreEditing()
+
+  const index = queue.value.findIndex((item) => item.id === id)
+  if (index === -1) return
+  editingSuccessor.value = queue.value[index + 1]?.id ?? null
+
+  const item = removeQueued(id)
+  if (item) chatInputRef.value?.setContent(item.content)
+}
+
+/** 将输入框中未提交的编辑内容按原锚点插回队列 */
+const restoreEditing = () => {
+  if (editingSuccessor.value === undefined) return
+  const content = chatInputRef.value?.getContent().trim()
+  if (content) enqueue(content, undefined, editingSuccessor.value ?? undefined)
+  editingSuccessor.value = undefined
+}
+
+const handleSend = (content: string, attachments: ChatAttachment[]) => {
+  // 编辑态提交：插回原锚点位置（会话进行中则留在队列，空闲时由 enqueue 自动消耗队首）
+  if (editingSuccessor.value !== undefined) {
+    enqueue(content, attachments, editingSuccessor.value ?? undefined)
+    editingSuccessor.value = undefined
+    return
+  }
+  send(content, attachments)
+}
+
+defineExpose<_AiChatExposed>({
+  send,
+  abort,
+  regenerate,
+  clear,
+  queue,
+  startQueued,
+  removeQueued,
+  enqueue
+})
 </script>

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

@@ -17,7 +17,7 @@
       ref="textareaRef"
       v-model="text"
       :class="cls.e('input')"
-      :placeholder="placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'"
+      :placeholder="placeholderText"
       rows="1"
       @keydown.enter.exact.prevent="handleSend"
       @input="autoResize"
@@ -32,7 +32,7 @@
         </UFilePicker>
       </div>
 
-      <!-- 右簇：模型/推理选择 → 发送/停止，贴近发送按钮 -->
+      <!-- 右簇：模型/推理选择 → 发送或停止（互斥） -->
       <div :class="cls.e('input-toolbar-right')">
         <ModelPicker
           v-if="models?.length"
@@ -41,19 +41,28 @@
           :models="models"
         />
 
-        <UButton v-if="running" size="small" type="danger" circle @click="emit('abort')">
+        <UButton
+          v-if="showStop"
+          key="stop"
+          size="small"
+          type="danger"
+          circle
+          title="停止生成"
+          @click="emit('abort')"
+        >
           <span :class="cls.e('input-stop')" />
         </UButton>
         <UButton
           v-else
+          key="send"
           size="small"
           type="primary"
           circle
-          :disabled="!canSend"
+          :disabled="!hasContent"
           :icon="Up"
+          :title="running ? '加入待发送队列' : undefined"
           @click="handleSend"
-        >
-        </UButton>
+        />
       </div>
     </div>
   </div>
@@ -63,7 +72,7 @@
 import { UButton, UFilePicker, UIcon } from '@veltra/desktop'
 import { Attach, Close, Up } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, ref, shallowRef } from 'vue'
+import { computed, inject, nextTick, ref, shallowRef } from 'vue'
 
 import type { ChatAttachment } from '../../chat/types'
 import type { ChatModelOption } from '../../providers'
@@ -73,7 +82,7 @@ import ModelPicker from './model-picker.vue'
 defineOptions({ name: 'UAiChatInput' })
 
 const props = defineProps<{
-  /** 是否生成中（显示停止按钮） */
+  /** 是否生成中（空输入显示停止，有内容则发送入队） */
   running: boolean
   /** 可选模型列表；有值则显示选择器 */
   models?: ChatModelOption[]
@@ -100,8 +109,15 @@ const text = ref('')
 const attachments = ref<ChatAttachment[]>([])
 const textareaRef = shallowRef<HTMLTextAreaElement>()
 
-const canSend = computed(() => {
-  return !props.running && (!!text.value.trim() || attachments.value.length > 0)
+const hasContent = computed(() => !!text.value.trim() || attachments.value.length > 0)
+
+/** 生成中且输入为空时显示停止；有内容则显示发送（入队） */
+const showStop = computed(() => props.running && !hasContent.value)
+
+/** 生成中提示用户消息将进入队列 */
+const placeholderText = computed(() => {
+  if (props.running) return '会话进行中，发送的消息将进入待发送队列'
+  return props.placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'
 })
 
 /** 多行自适应高度，上限 160px */
@@ -113,13 +129,27 @@ const autoResize = () => {
 }
 
 const handleSend = () => {
-  if (!canSend.value) return
+  if (!hasContent.value) return
   emit('send', text.value.trim(), attachments.value)
   text.value = ''
   attachments.value = []
   autoResize()
 }
 
+/** 取回内容到输入框（队列编辑场景），并聚焦 */
+const setContent = (content: string) => {
+  text.value = content
+  void nextTick(() => {
+    autoResize()
+    textareaRef.value?.focus()
+  })
+}
+
+/** 读取当前输入框内容 */
+const getContent = () => text.value
+
+defineExpose({ setContent, getContent })
+
 /** 将拾取的文件转为 dataUrl 附件（超限忽略） */
 const handlePick = (files: File[]) => {
   const maxSize = props.maxAttachmentSize ?? 10 * 1024 * 1024

package/src/components/ai-chat/di.ts

@@ -10,6 +10,8 @@ export interface AiChatContext {
   slots: Slots
   /** 按 name 索引的工具定义（解析 icon/label/render/autoCollapse） */
   tools: ComputedRef<Record<string, ChatTool | undefined>>
+  /** 打开右侧面板并聚焦到指定工具调用（renderTo: 'panel' 工具的「查看面板」入口） */
+  openPanel: (toolCallId: string) => void
 }
 
 export const AiChatDIKey: InjectionKey<AiChatContext> = Symbol('AiChatDIKey')

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

@@ -24,16 +24,26 @@
         v-if="message.reasoning"
         :class="[cls.e('reasoning'), bem.is('expanded', reasoningExpanded)]"
       >
-        <div :class="cls.e('reasoning-header')" @click="reasoningExpanded = !reasoningExpanded">
-          <UIcon :class="[cls.e('reasoning-icon'), isThinking && cls.is('loading')]">
+        <div :class="cls.e('reasoning-header')" @click="toggleReasoning">
+          <UIcon :class="[cls.e('reasoning-icon'), bem.is('loading', isThinking)]">
             <Loading v-if="isThinking" />
             <InfoCircle v-else />
           </UIcon>
-          <span>{{ isThinking ? '思考中…' : '思考过程' }}</span>
-          <UIcon :class="cls.e('reasoning-chevron')"><ArrowDown /></UIcon>
+          <span :class="[cls.e('reasoning-title'), isThinking && 'u-shine']">
+            {{ isThinking ? '思考中…' : '思考过程' }}
+          </span>
+          <UIcon :class="cls.e('reasoning-chevron')"><ArrowRight /></UIcon>
         </div>
-        <div v-show="reasoningExpanded" :class="cls.e('reasoning-content')">
-          {{ message.reasoning }}
+        <!-- 折叠时完全卸载内容 DOM：思考文本可能很长，常驻挂载浪费内存与渲染成本 -->
+        <div v-if="reasoningExpanded" :class="cls.e('reasoning-content')">
+          <UScroll
+            ref="reasoningScrollRef"
+            container-style="max-height: 220px"
+            @scroll="handleReasoningScroll"
+            @wheel.passive="handleReasoningWheel"
+          >
+            <div :class="cls.e('reasoning-text')">{{ message.reasoning }}</div>
+          </UScroll>
         </div>
       </div>
 
@@ -59,19 +69,38 @@
         已停止生成
       </div>
 
-      <div v-if="showActions" :class="cls.e('message-actions')" @click="emit('regenerate')">
-        <UIcon title="重新生成"><Refresh /></UIcon>
+      <div v-if="showActions" :class="cls.e('message-actions')">
+        <UButton
+          size="small"
+          plain
+          circle
+          :type="copied ? 'success' : 'primary'"
+          :icon="copied ? CircleCheck : Copy"
+          :disabled="!canCopy"
+          :title="copied ? '已复制' : '复制'"
+          @click="handleCopy"
+        />
+        <UButton
+          size="small"
+          plain
+          circle
+          type="primary"
+          :icon="Refresh"
+          title="重新生成"
+          @click="emit('regenerate')"
+        />
       </div>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { UIcon } from '@veltra/desktop'
-import { ArrowDown, InfoCircle, Loading, Refresh } from '@veltra/icons/normal'
+import { message as toast, UButton, UIcon, UScroll } from '@veltra/desktop'
+import type { ScrollPosition } from '@veltra/desktop'
+import { ArrowRight, CircleCheck, Copy, InfoCircle, Loading, Refresh } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import MarkdownRender from 'markstream-vue'
-import { computed, inject, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 
 import type { ChatMessage } from '../../chat/types'
 import { AiChatDIKey } from './di'
@@ -101,20 +130,78 @@ const isThinking = computed(() => isStreaming.value && !props.message.content)
 
 const reasoningExpanded = ref(true)
 
+/** 思考区吸附底部：用户在思考区内上滚时取消吸附，回到底部后恢复 */
+const reasoningStick = ref(true)
+
+/** 思考内容滚动区：流式输出时吸附底部，始终展示最新思考 */
+const reasoningScrollRef = useTemplateRef<InstanceType<typeof UScroll>>('reasoningScrollRef')
+
+const toggleReasoning = async () => {
+  reasoningExpanded.value = !reasoningExpanded.value
+  if (!reasoningExpanded.value) return
+  // 重新展开时恢复吸附并定位到最新思考
+  reasoningStick.value = true
+  await nextTick()
+  reasoningScrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
+}
+
+const handleReasoningWheel = (e: WheelEvent) => {
+  if (e.deltaY < 0) reasoningStick.value = false
+}
+
+const handleReasoningScroll = (position: Required<ScrollPosition>) => {
+  if (position.sh - position.ch - position.y < 8) reasoningStick.value = true
+}
+
 // 流式结束后自动折叠思考过程
 watch(
   () => props.message.status,
   (status) => {
     if (status === 'streaming') {
       reasoningExpanded.value = true
+      reasoningStick.value = true
     } else if (status) {
       reasoningExpanded.value = false
     }
   }
 )
 
+watch(
+  () => props.message.reasoning,
+  async () => {
+    if (!isThinking.value || !reasoningExpanded.value || !reasoningStick.value) return
+    await nextTick()
+    // 等待 DOM 更新期间用户可能已上滚，滚动前重新确认吸附状态
+    if (!reasoningStick.value) return
+    reasoningScrollRef.value?.scrollTo({ y: Number.MAX_SAFE_INTEGER })
+  }
+)
+
 const showActions = computed(() => {
   if (props.message.role !== 'assistant' || !props.isLast) return false
   return ['done', 'error', 'aborted'].includes(props.message.status ?? '')
 })
+
+const canCopy = computed(() => !!props.message.content?.trim())
+
+const copied = ref(false)
+let copyTimer: ReturnType<typeof setTimeout> | undefined
+
+const handleCopy = async () => {
+  const text = props.message.content?.trim()
+  if (!text) return
+  try {
+    await navigator.clipboard.writeText(text)
+    copied.value = true
+    toast.success('已复制到剪贴板')
+    clearTimeout(copyTimer)
+    copyTimer = setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch {
+    toast.error('复制失败，请检查浏览器权限')
+  }
+}
+
+onBeforeUnmount(() => clearTimeout(copyTimer))
 </script>