@veltra/ai 2.0.0 → 2.1.0

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

@@ -1,8 +1,12 @@
 import '@veltra/desktop/components/button/style'
+import '@veltra/desktop/components/collapse/style'
 import '@veltra/desktop/components/file-picker/style'
 import '@veltra/desktop/components/icon/style'
 import '@veltra/desktop/components/input/style'
+import '@veltra/desktop/components/layout/style'
+import '@veltra/desktop/components/message/style'
 import '@veltra/desktop/components/scroll/style'
 import '@veltra/desktop/components/select/style'
+import '@veltra/styles/animations/shine.scss'
 import 'markstream-vue/index.css'
 import './style.scss'

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

@@ -1,47 +1,69 @@
 <template>
-  <div :class="[cls.e('tool-call'), bem.is(toolCall.status), bem.is('expanded', isExpanded)]">
-    <UCollapseItem v-model="isExpanded" @change="markUserToggled">
-      <template #title>
-        <UIcon :class="[cls.e('tool-call-status'), statusClass]">
-          <component :is="headerIcon" />
-        </UIcon>
-        <span :class="cls.e('tool-call-name')">{{ tool?.label ?? toolCall.name }}</span>
-        <span v-if="summary" :class="cls.e('tool-call-summary')">{{ summary }}</span>
-
-        <span
-          v-if="toolCall.status === 'awaiting-confirm'"
-          :class="cls.e('tool-call-confirm')"
-          @click.stop
-        >
-          <UButton size="small" type="primary" @click="emit('respond', true)">允许</UButton>
-          <UButton size="small" text @click="emit('respond', false)">拒绝</UButton>
-        </span>
+  <UCollapseItem
+    v-model="isExpanded"
+    :class="[cls.e('tool-call'), bem.is(toolCall.status)]"
+    :destroy-on-collapse="destroyOnCollapse"
+    @change="markUserToggled"
+  >
+    <template #header>
+      <UIcon :class="[cls.e('tool-call-status'), statusClass]">
+        <component :is="headerIcon" />
+      </UIcon>
+      <span :class="[cls.e('tool-call-name'), isActive && 'u-shine']">
+        {{ tool?.label ?? toolCall.name }}
+      </span>
+      <span v-if="summary" :class="cls.e('tool-call-summary')">{{ summary }}</span>
+
+      <span
+        v-if="toolCall.status === 'awaiting-confirm'"
+        :class="cls.e('tool-call-confirm')"
+        @click.stop
+        @keydown.enter.stop
+        @keydown.space.stop
+      >
+        <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 仅提供查看入口 -->
+    <div v-if="isPanelTool" :class="cls.e('tool-call-panel-entry')">
+      <span :class="cls.e('tool-call-panel-hint')">内容展示在右侧面板</span>
+      <UButton size="small" text type="primary" @click="di?.openPanel(toolCall.id)">
+        查看面板
+      </UButton>
+    </div>
+    <!-- 自定义渲染：工具定义的 render 优先于 tool-<name> 插槽，均替换整个 body -->
+    <component :is="tool.render" v-else-if="tool?.render" :tool-call="toolCall" />
+    <component :is="slotBody" v-else-if="slotBody && hasResult" />
+    <template v-else>
+      <template v-if="prettyArguments">
+        <div :class="cls.e('tool-call-section')">参数</div>
+        <pre :class="cls.e('tool-call-code')">{{ prettyArguments }}</pre>
       </template>
 
-      <!-- 自定义渲染：工具定义的 render 优先于 tool-<name> 插槽，均替换整个 body -->
-      <component :is="tool?.render" v-if="tool?.render" :tool-call="toolCall" />
-      <component :is="slotBody" v-else-if="slotBody && hasResult" />
-      <template v-else>
-        <template v-if="prettyArguments">
-          <div :class="cls.e('tool-call-section')">参数</div>
-          <pre :class="cls.e('tool-call-code')">{{ prettyArguments }}</pre>
-        </template>
-
-        <template v-if="hasResult">
-          <div :class="cls.e('tool-call-section')">
-            {{ toolCall.status === 'error' ? '错误' : '结果' }}
-          </div>
-          <pre :class="cls.e('tool-call-code')">{{ displayResult }}</pre>
-        </template>
+      <template v-if="hasResult">
+        <div :class="cls.e('tool-call-section')">
+          {{ toolCall.status === 'error' ? '错误' : '结果' }}
+        </div>
+        <pre :class="cls.e('tool-call-code')">{{ displayResult }}</pre>
       </template>
-    </UCollapseItem>
-  </div>
+    </template>
+  </UCollapseItem>
 </template>
 
 <script lang="ts" setup>
 import { UButton, UCollapseItem, UIcon } from '@veltra/desktop'
-import '@veltra/desktop/components/collapse/style'
-import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
+import {
+  ArrowDown,
+  CircleCheckFilled,
+  CircleClose,
+  Close,
+  Loading,
+  WarningFilled
+} from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, ref, watch, type Component } from 'vue'
 
@@ -57,19 +79,25 @@ const emit = defineEmits<{ (e: 'respond', approved: boolean): void }>()
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
-/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse） */
+/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse/terminal） */
 const tool = computed(() => di?.tools.value[props.toolCall.name])
 
 const isExpanded = ref(false)
 /** 用户手动切换过后，不再随 status 自动展开/折叠 */
 let userToggled: boolean = false
 
-function markUserToggled() {
+/** UCollapseItem 的 change 仅在用户点击头部时触发（程序化 v-model 变更不触发） */
+const markUserToggled = () => {
   userToggled = true
 }
 
-/** 完成后是否自动折叠：缺省有 render 时不折叠，否则折叠 */
-const autoCollapse = computed(() => tool.value?.autoCollapse ?? !tool.value?.render)
+/** 面板工具：render 展示在右侧侧边面板，卡片 body 仅保留「查看面板」入口 */
+const isPanelTool = computed(() => tool.value?.renderTo === 'panel')
+
+/** 完成后是否自动折叠：缺省面板工具折叠；有 render 时不折叠，否则折叠 */
+const autoCollapse = computed(
+  () => tool.value?.autoCollapse ?? (isPanelTool.value || !tool.value?.render)
+)
 
 watch(
   () => props.toolCall.status,
@@ -85,8 +113,8 @@ watch(
 )
 
 const STATUS_META: Record<string, { icon: Component; class: string }> = {
-  pending: { icon: Loading, class: 'is-loading' },
-  running: { icon: Loading, class: 'is-loading' },
+  pending: { icon: Loading, class: 'is-active' },
+  running: { icon: Loading, class: 'is-active' },
   'awaiting-confirm': { icon: WarningFilled, class: 'is-warning' },
   success: { icon: CircleCheckFilled, class: 'is-success' },
   error: { icon: CircleClose, class: 'is-danger' },
@@ -96,6 +124,22 @@ const STATUS_META: Record<string, { icon: Component; class: string }> = {
 const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading)
 const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? '')
 
+/** 进行中（pending/running）：工具名带扫光效果 */
+const isActive = computed(() => {
+  return props.toolCall.status === 'pending' || props.toolCall.status === 'running'
+})
+
+/** 终态（成功/失败/拒绝） */
+const isSettled = computed(() => {
+  return ['success', 'error', 'rejected'].includes(props.toolCall.status)
+})
+
+/**
+ * 折叠后卸载内容 DOM：仅终态且非面板工具时启用——
+ * 进行中/待确认要保留内容状态（确认按钮、表单），面板工具的 body 是「查看面板」入口必须可达
+ */
+const destroyOnCollapse = computed(() => isSettled.value && !isPanelTool.value)
+
 /** 头部图标：工具自定义图标优先，缺省用状态图标 */
 const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value)
 

package/src/components/ai-orb/__test__/ai-orb.test.ts

@@ -0,0 +1,251 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick } from 'vue'
+
+import UAiOrb from '../ai-orb.vue'
+import { createOrbRenderer } from '../orb-renderer'
+
+/** 记录调用的 2D context 桩（happy-dom 无真实 canvas 实现） */
+function createStubContext() {
+  const calls = { fill: 0, clip: 0, gradient: 0, stroke: 0 }
+  const gradient = { addColorStop: () => {} }
+  const ctx = {
+    calls,
+    fillStyle: null as unknown,
+    strokeStyle: null as unknown,
+    lineWidth: 1,
+    lineCap: 'butt',
+    lineJoin: 'miter',
+    globalAlpha: 1,
+    globalCompositeOperation: 'source-over',
+    save: () => {},
+    restore: () => {},
+    translate: () => {},
+    scale: () => {},
+    rotate: () => {},
+    beginPath: () => {},
+    moveTo: () => {},
+    lineTo: () => {},
+    quadraticCurveTo: () => {},
+    closePath: () => {},
+    arc: () => {},
+    ellipse: () => {},
+    clearRect: () => {},
+    fillRect: () => {},
+    setTransform: () => {},
+    stroke: () => {
+      calls.stroke++
+    },
+    fill: () => {
+      calls.fill++
+    },
+    clip: () => {
+      calls.clip++
+    },
+    createRadialGradient: () => {
+      calls.gradient++
+      return gradient
+    }
+  }
+  return ctx
+}
+
+function createStubCanvas(ctx: ReturnType<typeof createStubContext> | null) {
+  return { width: 0, height: 0, getContext: () => ctx } as unknown as HTMLCanvasElement
+}
+
+/** 桩 Path2D（happy-dom 未实现） */
+function stubPath2D() {
+  class Path2DStub {
+    moveTo() {}
+    lineTo() {}
+    closePath() {}
+  }
+  vi.stubGlobal('Path2D', Path2DStub)
+}
+
+describe('createOrbRenderer', () => {
+  beforeEach(() => {
+    stubPath2D()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('renderOnce 绘制一帧（纯色球体 + 白色大眼睛，常态无嘴）', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+
+    renderer.renderOnce()
+
+    // 球体 + 双眼 = 3 次填充，常态无嘴无描边
+    expect(ctx.calls.fill).toBe(3)
+    expect(ctx.calls.stroke).toBe(0)
+    expect(ctx.calls.gradient).toBe(0)
+  })
+
+  it('start/stop 控制 rAF 循环', () => {
+    const ctx = createStubContext()
+    const frames: ((now: number) => void)[] = []
+    vi.stubGlobal('requestAnimationFrame', (cb: (now: number) => void) => {
+      frames.push(cb)
+      return frames.length
+    })
+    const cancel = vi.fn()
+    vi.stubGlobal('cancelAnimationFrame', cancel)
+
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+    expect(renderer.running).toBe(false)
+
+    renderer.start()
+    expect(renderer.running).toBe(true)
+
+    // 手动驱动两帧
+    frames.shift()?.(16)
+    frames.shift()?.(32)
+    expect(ctx.calls.fill).toBeGreaterThan(0)
+
+    renderer.stop()
+    expect(renderer.running).toBe(false)
+    expect(cancel).toHaveBeenCalled()
+
+    // 已排队的帧回调执行后不再调度新帧
+    const pending = frames.length
+    frames.forEach((cb) => cb(48))
+    expect(frames.length).toBe(pending)
+  })
+
+  it('状态切换平滑过渡且无异常', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48, status: 'idle' })
+
+    renderer.setStatus('thinking')
+    renderer.renderOnce()
+    renderer.setStatus('speaking')
+    renderer.renderOnce()
+
+    expect(ctx.calls.fill).toBeGreaterThan(0)
+  })
+
+  it('resize 更新画布像素尺寸（dpr 上限 2）', () => {
+    const ctx = createStubContext()
+    const canvas = createStubCanvas(ctx)
+    const renderer = createOrbRenderer(canvas, { size: 48 })
+
+    expect(canvas.width).toBe(48)
+
+    renderer.resize(96)
+    expect(canvas.width).toBe(96)
+  })
+
+  it('trigger 瞬时表情改变绘制路径（frustrated 闭眼折线 + 撇嘴）', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+
+    // 常态：眼睛为填充圆眼，无嘴无描边
+    renderer.renderOnce()
+    const baseStrokes = ctx.calls.stroke
+    expect(baseStrokes).toBe(0)
+
+    // frustrated：双眼 >< 折线 2 次描边 + 撇嘴 1 次描边
+    renderer.trigger('frustrated')
+    expect(ctx.calls.stroke).toBeGreaterThan(baseStrokes)
+  })
+
+  it('trigger happy 弯眼弧线 + 张嘴笑', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+
+    renderer.renderOnce()
+    const baseStrokes = ctx.calls.stroke
+
+    // happy：双眼弯月弧线 2 次描边 + 张嘴笑 1 次填充
+    renderer.trigger('happy')
+    expect(ctx.calls.stroke).toBeGreaterThan(baseStrokes)
+  })
+
+  it('trigger shock 睁大眼睛（填充路径增多）', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+
+    renderer.renderOnce()
+    const baseFills = ctx.calls.fill
+
+    // shock：圆眼 + 「o」嘴，填充次数增加（无描边嘴）
+    renderer.trigger('shock')
+    expect(ctx.calls.fill).toBeGreaterThan(baseFills)
+  })
+
+  it('setPointer / poke 交互不抛异常且保持绘制', () => {
+    const ctx = createStubContext()
+    const renderer = createOrbRenderer(createStubCanvas(ctx), { size: 48 })
+
+    renderer.setPointer({ x: 0.8, y: -0.4 })
+    renderer.poke()
+    renderer.renderOnce()
+    expect(ctx.calls.fill).toBeGreaterThan(0)
+
+    renderer.setPointer(null)
+    renderer.renderOnce()
+    expect(ctx.calls.fill).toBeGreaterThan(3)
+  })
+
+  it('getContext 返回 null 时所有操作静默不崩', () => {
+    const renderer = createOrbRenderer(createStubCanvas(null), { size: 48 })
+
+    expect(() => {
+      renderer.renderOnce()
+      renderer.start()
+      renderer.setStatus('thinking')
+      renderer.trigger('happy')
+      renderer.resize(24)
+      renderer.stop()
+    }).not.toThrow()
+    expect(renderer.running).toBe(false)
+  })
+})
+
+describe('UAiOrb', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('挂载渲染 canvas 并应用尺寸样式（无 2D 环境不崩）', async () => {
+    // happy-dom 的 getContext 无真实实现，显式桩为 null
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({ render: () => h(UAiOrb, { size: 64, status: 'thinking' }) })
+    app.mount(host)
+    await nextTick()
+
+    const canvas = host.querySelector('canvas.u-ai-orb')
+    expect(canvas).toBeTruthy()
+    expect(canvas?.style.width).toBe('64px')
+    expect(canvas?.style.height).toBe('64px')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('点击 canvas 触发 click 事件', async () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
+
+    const onClick = vi.fn()
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({ render: () => h(UAiOrb, { onClick }) })
+    app.mount(host)
+    await nextTick()
+
+    host.querySelector('canvas.u-ai-orb')!.dispatchEvent(new Event('click'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+
+    app.unmount()
+    host.remove()
+  })
+})

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

@@ -0,0 +1,107 @@
+<template>
+  <canvas
+    ref="canvasRef"
+    :class="cls.b"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    aria-hidden="true"
+    @pointermove="handlePointerMove"
+    @pointerleave="handlePointerLeave"
+    @pointerdown="handlePointerDown"
+    @click="emit('click')"
+  />
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
+
+import type { AiOrbEmits, AiOrbExposed, AiOrbProps, AiOrbReaction } from '../../types/ai-orb'
+import { createOrbRenderer, type AiOrbRenderer } from './orb-renderer'
+
+defineOptions({ name: 'UAiOrb' })
+
+const props = withDefaults(defineProps<AiOrbProps>(), { size: 48, status: 'idle' })
+const emit = defineEmits<AiOrbEmits>()
+
+const cls = bem('ai-orb')
+
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
+
+let renderer: AiOrbRenderer | null = null
+let observer: IntersectionObserver | null = null
+let motionQuery: MediaQueryList | null = null
+
+/** 指针坐标 → 单位球空间（球心为原点，1 = 球半径），交给渲染器做视线跟随 */
+const handlePointerMove = (e: PointerEvent) => {
+  const el = canvasRef.value
+  if (!el || !renderer) return
+  const rect = el.getBoundingClientRect()
+  const ballRadius = rect.width * 0.36
+  renderer.setPointer({
+    x: (e.clientX - rect.left - rect.width / 2) / ballRadius,
+    y: (e.clientY - rect.top - rect.height / 2) / ballRadius
+  })
+}
+
+const handlePointerLeave = () => renderer?.setPointer(null)
+
+const handlePointerDown = () => renderer?.poke()
+
+const applyVisibility = (visible: boolean) => {
+  if (!renderer) return
+  if (motionQuery?.matches) {
+    // 减少动态偏好：只画一帧静态画面，不启动画循环
+    renderer.stop()
+    renderer.renderOnce()
+    return
+  }
+  if (visible) renderer.start()
+  else renderer.stop()
+}
+
+const handleMotionChange = () => {
+  // 偏好像素级开关变化时重评估（不可见时 start 也会被 IntersectionObserver 纠正）
+  applyVisibility(true)
+}
+
+onMounted(() => {
+  const canvas = canvasRef.value
+  if (!canvas) return
+
+  renderer = createOrbRenderer(canvas, { size: props.size, status: props.status })
+
+  motionQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? null
+  motionQuery?.addEventListener?.('change', handleMotionChange)
+
+  if (typeof IntersectionObserver !== 'undefined') {
+    // 滚出视口的球暂停动画循环，长会话下同屏多个球也不累积开销
+    observer = new IntersectionObserver((entries) => {
+      applyVisibility(entries[0]?.isIntersecting ?? true)
+    })
+    observer.observe(canvas)
+  } else {
+    applyVisibility(true)
+  }
+})
+
+watch(
+  () => props.status,
+  (status) => renderer?.setStatus(status)
+)
+
+watch(
+  () => props.size,
+  (size) => renderer?.resize(size)
+)
+
+const react = (reaction: AiOrbReaction) => renderer?.trigger(reaction)
+
+defineExpose<AiOrbExposed>({ react })
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  motionQuery?.removeEventListener?.('change', handleMotionChange)
+  renderer?.stop()
+  renderer = null
+})
+</script>

package/src/components/ai-orb/index.ts

@@ -0,0 +1 @@
+export { default as UAiOrb } from './ai-orb.vue'