@veltra/ai 1.4.0

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

@@ -0,0 +1,439 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: ai-chat;
+
+@include m.b($root-name) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-size: fn.use-var(font-size-main, default);
+  color: fn.use-var(text-color, main);
+
+  @include m.e(list) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  @include m.e(welcome) {
+    height: 100%;
+    @include m.flex(flex, center, center);
+    color: fn.use-var(text-color, assist);
+    padding: fn.use-var(gap, default);
+    text-align: center;
+  }
+
+  @include m.e(message) {
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
+
+    @include m.m(user) {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  @include m.e(message-bubble) {
+    max-width: 80%;
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
+    border-radius: fn.use-var(radius, large);
+    background-color: fn.use-var(color, primary, 'light-9');
+    color: fn.use-var(text-color, main);
+    overflow: hidden;
+  }
+
+  @include m.e(message-text) {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  @include m.e(message-attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.use-var(gap, small);
+    margin-bottom: fn.use-var(gap, small);
+  }
+
+  @include m.e(message-attachment) {
+    max-width: 160px;
+    max-height: 160px;
+    border-radius: fn.use-var(radius, default);
+    display: block;
+  }
+
+  @include m.e(message-content) {
+    line-height: 1.7;
+  }
+
+  @include m.e(message-status) {
+    margin-top: fn.use-var(gap, small);
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(message-actions) {
+    margin-top: fn.use-var(gap, small);
+    color: fn.use-var(text-color, assist);
+    cursor: pointer;
+    display: inline-flex;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  // 思考过程
+  @include m.e(reasoning) {
+    margin-bottom: fn.use-var(gap, small);
+    color: fn.use-var(text-color, assist);
+
+    @include m.is(expanded) {
+      @include m.bem($root-name, 'reasoning-chevron') {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  @include m.e(reasoning-header) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    cursor: pointer;
+    user-select: none;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(reasoning-chevron) {
+    transition: transform 0.2s;
+  }
+
+  @include m.e(reasoning-content) {
+    margin-top: fn.use-var(gap, small);
+    padding-left: fn.use-var(gap, default);
+    border-left: fn.use-var(border-muted);
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1.6;
+  }
+
+  // 工具调用卡片
+  @include m.e(tool-call) {
+    margin: fn.use-var(gap, small) 0;
+  }
+
+  @include m.e(tool-call-status) {
+    flex-shrink: 0;
+
+    @include m.is(loading) {
+      color: fn.use-var(color, primary);
+      animation: u-ai-chat-rotate 1s linear infinite;
+    }
+
+    @include m.is(warning) {
+      color: fn.use-var(color, warning);
+    }
+
+    @include m.is(success) {
+      color: fn.use-var(color, success);
+    }
+
+    @include m.is(danger) {
+      color: fn.use-var(color, danger);
+    }
+  }
+
+  @include m.e(tool-call-name) {
+    font-family: fn.use-var(font-family, code);
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, title);
+    flex-shrink: 0;
+  }
+
+  @include m.e(tool-call-summary) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(tool-call-confirm) {
+    flex-shrink: 0;
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+  }
+
+  @include m.e(tool-call-section) {
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+    margin: fn.use-var(gap, small) 0;
+  }
+
+  @include m.e(tool-call-code) {
+    margin: 0;
+    padding: fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, bottom);
+    font-family: fn.use-var(font-family, code);
+    font-size: fn.use-var(font-size-main, small);
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 240px;
+    overflow: auto;
+  }
+
+  // 提问工具（分页向导）
+  @include m.e(ask-question) {
+    display: flex;
+    flex-direction: column;
+    gap: fn.use-var(gap, small);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(ask-question-progress) {
+    @include m.flex(flex, space-between, center);
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(ask-question-dots) {
+    @include m.flex(flex, flex-start, center);
+    gap: 6px;
+  }
+
+  @include m.e(ask-question-dot) {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: fn.use-var(text-color, placeholder);
+    cursor: pointer;
+    transition:
+      background-color 0.2s,
+      box-shadow 0.2s;
+
+    @include m.is(answered) {
+      background-color: fn.use-var(color, primary);
+    }
+
+    @include m.is(current) {
+      box-shadow: 0 0 0 3px fn.use-var(color, primary, 'light-7');
+    }
+  }
+
+  @include m.e(ask-question-q) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    color: fn.use-var(text-color, title);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  @include m.e(ask-question-no) {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    @include m.flex(flex, center, center);
+    background-color: fn.use-var(color, primary, 'light-9');
+    color: fn.use-var(color, primary);
+    font-size: 11px;
+  }
+
+  @include m.e(ask-question-options) {
+    display: flex;
+    flex-direction: column;
+    gap: fn.use-var(gap, small);
+  }
+
+  @include m.e(ask-question-opt) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small) fn.use-var(gap, default);
+    border: fn.use-var(border-muted);
+    border-radius: fn.use-var(radius, default);
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    color: fn.use-var(text-color, main);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: 1.5;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s;
+
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
+
+    @include m.is(selected) {
+      border-color: fn.use-var(color, primary);
+      background-color: fn.use-var(color, primary, 'light-9');
+    }
+  }
+
+  @include m.e(ask-question-glyph) {
+    flex-shrink: 0;
+    position: relative;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: fn.use-var(border-muted);
+    transition: border-color 0.2s;
+
+    @include m.is(selected) {
+      border-color: fn.use-var(color, primary);
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 3px;
+        border-radius: 50%;
+        background-color: fn.use-var(color, primary);
+      }
+    }
+  }
+
+  @include m.e(ask-question-actions) {
+    @include m.flex(flex, flex-end, center);
+    gap: fn.use-var(gap, small);
+  }
+
+  @include m.e(ask-question-result) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  @include m.e(ask-question-result-q) {
+    @include m.flex(flex, flex-start, center);
+    gap: 6px;
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(ask-question-result-no) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    @include m.flex(flex, center, center);
+    background-color: fn.use-var(color, primary, 'light-9');
+    color: fn.use-var(color, primary);
+    font-size: 11px;
+  }
+
+  @include m.e(ask-question-result-a) {
+    color: fn.use-var(text-color, main);
+    line-height: 1.5;
+  }
+
+  @include m.e(ask-question-chip) {
+    display: inline-block;
+    padding: 2px fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(color, primary, 'light-9');
+    color: fn.use-var(color, primary);
+  }
+
+  @include m.e(ask-question-status) {
+    color: fn.use-var(text-color, assist);
+  }
+
+  // 输入区
+  @include m.e(input-area) {
+    flex-shrink: 0;
+    margin: fn.use-var(gap, default);
+    margin-top: fn.use-var(gap, small);
+    border: fn.use-var(border-muted);
+    border-radius: fn.use-var(radius, large);
+    background-color: fn.use-var(bg-color, top);
+    padding: fn.use-var(gap, small);
+
+    &:focus-within {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(input) {
+    width: 100%;
+    border: none;
+    outline: none;
+    resize: none;
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, default);
+    font-family: inherit;
+    line-height: 1.6;
+    padding: fn.use-var(gap, small);
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(input-toolbar) {
+    @include m.flex(flex, space-between, center);
+    padding: 0 fn.use-var(gap, small);
+  }
+
+  @include m.e(input-attach) {
+    color: fn.use-var(text-color, assist);
+    cursor: pointer;
+    font-size: 18px;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(input-stop) {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background-color: currentColor;
+  }
+
+  @include m.e(input-attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small);
+  }
+
+  @include m.e(input-attachment) {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    border-radius: fn.use-var(radius, default);
+    overflow: hidden;
+    border: fn.use-var(border-muted);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  @include m.e(input-attachment-remove) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: fn.color-a(shadow, 52, color);
+    color: fn.use-var(text-color, white);
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
+
+@keyframes u-ai-chat-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,6 @@
+import '@veltra/desktop/components/button/style'
+import '@veltra/desktop/components/icon/style'
+import '@veltra/desktop/components/input/style'
+import '@veltra/desktop/components/scroll/style'
+import 'markstream-vue/index.css'
+import './style.scss'

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

@@ -0,0 +1,147 @@
+<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>
+      </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>
+    </UCollapseItem>
+  </div>
+</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 { bem } from '@veltra/utils'
+import { computed, inject, ref, watch, type Component } from 'vue'
+
+import type { ChatToolCall } from '../../chat/types'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatToolCall' })
+
+const props = defineProps<{ toolCall: ChatToolCall }>()
+
+const emit = defineEmits<{ (e: 'respond', approved: boolean): void }>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse） */
+const tool = computed(() => di?.tools.value[props.toolCall.name])
+
+const isExpanded = ref(false)
+/** 用户手动切换过后，不再随 status 自动展开/折叠 */
+let userToggled: boolean = false
+
+function markUserToggled() {
+  userToggled = true
+}
+
+/** 完成后是否自动折叠：缺省有 render 时不折叠，否则折叠 */
+const autoCollapse = computed(() => tool.value?.autoCollapse ?? !tool.value?.render)
+
+watch(
+  () => props.toolCall.status,
+  (status) => {
+    if (userToggled) return
+    if (status === 'running' || status === 'awaiting-confirm') {
+      isExpanded.value = true
+    } else {
+      isExpanded.value = !autoCollapse.value
+    }
+  },
+  { immediate: true }
+)
+
+const STATUS_META: Record<string, { icon: Component; class: string }> = {
+  pending: { icon: Loading, class: 'is-loading' },
+  running: { icon: Loading, class: 'is-loading' },
+  'awaiting-confirm': { icon: WarningFilled, class: 'is-warning' },
+  success: { icon: CircleCheckFilled, class: 'is-success' },
+  error: { icon: CircleClose, class: 'is-danger' },
+  rejected: { icon: Close, class: 'is-danger' }
+}
+
+const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading)
+const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? '')
+
+/** 头部图标：工具自定义图标优先，缺省用状态图标 */
+const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value)
+
+const parsedArguments = computed<Record<string, unknown> | null>(() => {
+  if (!props.toolCall.arguments) return null
+  try {
+    return JSON.parse(props.toolCall.arguments)
+  } catch {
+    return null
+  }
+})
+
+/** 折叠态参数摘要：取第一个字符串参数值 */
+const summary = computed(() => {
+  const args = parsedArguments.value
+  if (!args) return ''
+  for (const value of Object.values(args)) {
+    if (typeof value === 'string' && value) {
+      return value.length > 40 ? `${value.slice(0, 40)}…` : value
+    }
+  }
+  return ''
+})
+
+const prettyArguments = computed(() => {
+  const args = parsedArguments.value
+  if (args) return JSON.stringify(args, null, 2)
+  return props.toolCall.arguments || ''
+})
+
+const hasResult = computed(() => {
+  return props.toolCall.result != null || props.toolCall.error != null
+})
+
+const displayResult = computed(() => {
+  const raw = props.toolCall.error ?? props.toolCall.result ?? ''
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+})
+
+/** 使用方通过 tool-<name> 插槽自定义该工具的展示（有结果时替换整个 body） */
+const slotBody = computed(() => {
+  const slot = di?.slots[`tool-${props.toolCall.name}`]
+  return slot ? () => slot({ toolCall: props.toolCall }) : undefined
+})
+</script>

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './ai-chat'

package/src/env.d.ts

@@ -0,0 +1,12 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, any>
+  export default component
+}
+
+declare module '*.scss' {}
+
+declare module '*.css' {}
+
+// 跨包样式副作用子路径（veltra-dev → src/* 无扩展名，TS 不做扩展探测）
+declare module '@veltra/desktop/components/*/style' {}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './chat'
+export * from './components'
+export * from './tools'
+export type * from './types'

package/src/style.ts

@@ -0,0 +1 @@
+import './components/ai-chat/style'