@veltra/ai 1.4.0

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

@@ -0,0 +1,127 @@
+<template>
+  <div :class="cls.e('input-area')">
+    <div v-if="attachments.length" :class="cls.e('input-attachments')">
+      <div
+        v-for="(att, index) in attachments"
+        :key="att.dataUrl"
+        :class="cls.e('input-attachment')"
+      >
+        <img :src="att.dataUrl" :alt="att.name" />
+        <UIcon :class="cls.e('input-attachment-remove')" @click="attachments.splice(index, 1)">
+          <Close />
+        </UIcon>
+      </div>
+    </div>
+
+    <textarea
+      ref="textareaRef"
+      v-model="text"
+      :class="cls.e('input')"
+      :placeholder="placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'"
+      rows="1"
+      @keydown.enter.exact.prevent="handleSend"
+      @input="autoResize"
+    />
+
+    <div :class="cls.e('input-toolbar')">
+      <UIcon :class="cls.e('input-attach')" title="添加图片" @click="fileRef?.click()">
+        <Attach />
+      </UIcon>
+      <input
+        ref="fileRef"
+        type="file"
+        hidden
+        multiple
+        :accept="accept ?? 'image/*'"
+        @change="handleFiles"
+      />
+
+      <UButton v-if="running" type="danger" circle @click="emit('abort')">
+        <span :class="cls.e('input-stop')" />
+      </UButton>
+      <UButton v-else type="primary" circle :disabled="!canSend" @click="handleSend">
+        <UIcon><Send /></UIcon>
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UIcon } from '@veltra/desktop'
+import { Attach, Close, Send } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, ref, shallowRef } from 'vue'
+
+import type { ChatAttachment } from '../../chat/types'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatInput' })
+
+const props = defineProps<{
+  /** 是否生成中（显示停止按钮） */
+  running: boolean
+  /** 输入框占位文本 */
+  placeholder?: string
+  /** 附件 accept 类型 */
+  accept?: string
+  /** 单个附件最大字节数 */
+  maxAttachmentSize?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'send', content: string, attachments: ChatAttachment[]): void
+  (e: 'abort'): void
+}>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const text = ref('')
+const attachments = ref<ChatAttachment[]>([])
+const textareaRef = shallowRef<HTMLTextAreaElement>()
+const fileRef = shallowRef<HTMLInputElement>()
+
+const canSend = computed(() => {
+  return !props.running && (!!text.value.trim() || attachments.value.length > 0)
+})
+
+const autoResize = () => {
+  const el = textareaRef.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = `${Math.min(el.scrollHeight, 160)}px`
+}
+
+const handleSend = () => {
+  if (!canSend.value) return
+  emit('send', text.value.trim(), attachments.value)
+  text.value = ''
+  attachments.value = []
+  autoResize()
+}
+
+const handleFiles = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  input.value = ''
+
+  const maxSize = props.maxAttachmentSize ?? 10 * 1024 * 1024
+
+  for (const file of files) {
+    if (file.size > maxSize) {
+      console.warn(`[UAiChat] 附件 ${file.name} 超过大小限制，已忽略`)
+      continue
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      attachments.value.push({
+        name: file.name,
+        mimeType: file.type,
+        size: file.size,
+        dataUrl: String(reader.result)
+      })
+    }
+    reader.readAsDataURL(file)
+  }
+}
+</script>

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

@@ -0,0 +1,15 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey, Slots } from 'vue'
+
+import type { ChatTool } from '../../chat/types'
+
+export interface AiChatContext {
+  /** ai-chat 组件的 BEM 类生成器 */
+  cls: BEM<'ai-chat'>
+  /** ai-chat 使用方提供的插槽（用于 tool-<name> 动态插槽） */
+  slots: Slots
+  /** 按 name 索引的工具定义（解析 icon/label/render/autoCollapse） */
+  tools: ComputedRef<Record<string, ChatTool | undefined>>
+}
+
+export const AiChatDIKey: InjectionKey<AiChatContext> = Symbol('AiChatDIKey')

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

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

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

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

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

@@ -0,0 +1,81 @@
+<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>
+</template>
+
+<script lang="ts" setup>
+import { UScroll } from '@veltra/desktop'
+import type { ScrollPosition } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'
+
+import type { ChatMessage } from '../../chat/types'
+import { AiChatDIKey } from './di'
+import MessageItem from './message-item.vue'
+
+defineOptions({ name: 'UAiChatMessageList' })
+
+const props = defineProps<{
+  messages: ChatMessage[]
+  /** 空状态欢迎语 */
+  welcome?: string
+  /** 透传给 MarkdownRender 的属性 */
+  rendererProps?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'respond', toolCallId: string, approved: boolean): void
+  (e: 'regenerate'): void
+}>()
+
+defineSlots<{
+  /** 空状态欢迎区插槽 */
+  welcome(): any
+}>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+/** tool 消息不单独渲染，其内容体现在工具卡片的结果区 */
+const visibleMessages = computed(() => props.messages.filter((msg) => msg.role !== 'tool'))
+
+const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()
+/** 是否吸附底部（用户上翻浏览历史时取消吸附） */
+const stickToBottom = ref(true)
+
+const handleScroll = (position: Required<ScrollPosition>) => {
+  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 })
+  }
+)
+</script>