cardbuddy 0.10.0 → 0.11.0

package/dist/vendored/components/ChatMessage.vue

@@ -0,0 +1,383 @@
+<template>
+  <article class="aimsg" :class="[`aimsg--${msg.role}`, { 'aimsg--live': streaming }]">
+    <!-- ===== 用户消息：附件芯片 + 文本气泡 ===== -->
+    <template v-if="msg.role === 'user'">
+      <div v-if="attachments.length" class="aimsg__files">
+        <div
+          v-for="att in attachments"
+          :key="att.path"
+          class="aifile"
+          :class="{ 'aifile--dir': att.isDir, 'aifile--missing': att.exists === false }"
+          :title="att.path"
+        >
+          <img
+            v-if="att.isImage"
+            class="aifile__thumb"
+            :src="fileUrl(att.path)"
+            :alt="att.name"
+            loading="lazy"
+          />
+          <svg v-else class="aifile__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <use :href="att.isDir ? '#icon-folder-plus' : '#icon-file-text'" />
+          </svg>
+          <span class="aifile__meta">
+            <span class="aifile__name">{{ att.name }}</span>
+            <span class="aifile__sub">{{ attSub(att) }}</span>
+          </span>
+        </div>
+      </div>
+      <div v-if="msg.content" class="aimsg__bubble">{{ msg.content }}</div>
+    </template>
+
+    <!-- ===== 助手消息：思考 → 工具 → 正文（与 Codex 同序） ===== -->
+    <template v-else>
+      <!-- 思考过程：默认折叠成一行，进行中给「计时 + 最新一行」预览，结束收成「已思考 N 秒」 -->
+      <div v-if="msg.reasoning" class="aithink" :class="{ 'is-open': thinkOpen, 'is-live': thinking }">
+        <button
+          type="button"
+          class="aithink__head"
+          :aria-expanded="thinkOpen ? 'true' : 'false'"
+          @click="thinkOpen = !thinkOpen"
+        >
+          <svg class="aithink__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-chevron-right" /></svg>
+          <svg v-if="thinking" class="aithink__spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-loading" /></svg>
+          <svg v-else class="aithink__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-sparkles" /></svg>
+          <span class="aithink__label">{{ thinkLabel }}</span>
+          <span v-if="thinking && !thinkOpen" class="aithink__peek">{{ peek }}</span>
+        </button>
+        <div v-show="thinkOpen" class="aithink__body">
+          <pre ref="thinkPre">{{ msg.reasoning }}</pre>
+        </div>
+      </div>
+
+      <!-- 首个 token 之前的等待态 -->
+      <div v-if="waiting" class="aiwait">
+        <span class="aiwait__dot"></span><span class="aiwait__dot"></span><span class="aiwait__dot"></span>
+        <span class="aiwait__text">正在思考</span>
+      </div>
+
+      <!-- 工具调用：一行摘要，可展开看参数 / 结果 / 截图 -->
+      <div
+        v-for="tc in toolCalls"
+        :key="tc.toolCallId"
+        class="aitool"
+        :class="[`aitool--${toolState(tc)}`, { 'is-open': isOpen(tc) }]"
+      >
+        <button type="button" class="aitool__head" :aria-expanded="isOpen(tc) ? 'true' : 'false'" @click="toggleTool(tc)">
+          <svg class="aitool__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-chevron-right" /></svg>
+          <svg v-if="toolState(tc) === 'running' || toolState(tc) === 'pending'" class="aitool__spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-loading" /></svg>
+          <svg v-else-if="toolState(tc) === 'error'" class="aitool__status" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+          <svg v-else class="aitool__status" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-check" /></svg>
+          <span class="aitool__name">{{ toolLabel(tc.toolName) }}</span>
+          <code class="aitool__args">{{ tc.pending ? '参数生成中…' : argSummary(tc) }}</code>
+          <span v-if="toolMs(tc)" class="aitool__ms">{{ toolMs(tc) }}</span>
+        </button>
+        <!-- 高危执行逐次确认：命令原文 + 允许一次 / 本回合不再询问 / 拒绝（Codex 审批的同款交互） -->
+        <div v-if="tc.needsApproval" class="aitool__approve">
+          <svg class="aitool__approve-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+          <code class="aitool__approve-cmd" :title="approvalCommand(tc)">{{ approvalCommand(tc) }}</code>
+          <span class="aitool__approve-hint">{{ tc.toolName === 'skill_exec' ? '技能脚本，需要你确认' : '本地命令，需要你确认' }}</span>
+          <button type="button" class="aitool__approve-btn" @click.stop="$emit('approval', { tc, ok: true, scope: 'once' })">允许一次</button>
+          <button type="button" class="aitool__approve-btn aitool__approve-btn--ghost" @click.stop="$emit('approval', { tc, ok: true, scope: 'turn' })">本回合不再询问</button>
+          <button type="button" class="aitool__approve-btn aitool__approve-btn--deny" @click.stop="$emit('approval', { tc, ok: false })">拒绝</button>
+        </div>
+        <!-- 免确认策略命中：没有审批条，但照样把「跑了什么命令」摆出来，免确认不等于无痕迹 -->
+        <div v-else-if="tc.approvalNote" class="aitool__approve-note" :class="{ 'is-auto': tc.autoApproved }">
+          <span class="aitool__approve-hint">{{ tc.approvalNote }}</span>
+          <code v-if="tc.autoApproved && tc.command" class="aitool__approve-cmd" :title="tc.command">{{ tc.command }}</code>
+        </div>
+        <div v-show="isOpen(tc)" class="aitool__body">
+          <MarkdownBody v-if="argsSource(tc)" :source="argsSource(tc)" />
+          <img
+            v-if="tc.image"
+            class="aitool__shot"
+            :src="`data:${tc.image.mime || 'image/png'};base64,${tc.image.base64}`"
+            alt="卡片截图"
+          />
+          <div v-if="tc.error" class="aitool__error">{{ tc.error }}</div>
+          <MarkdownBody v-else-if="resultSource(tc)" :source="resultSource(tc)" />
+        </div>
+      </div>
+
+      <!-- 正文：Markdown（流式重渲染 + 代码块高亮 / 复制） -->
+      <MarkdownBody
+        v-if="msg.content"
+        class="aimsg__md"
+        :class="{ 'is-streaming': streamingText }"
+        :source="msg.content"
+        :streaming="streamingText"
+      />
+
+      <div v-if="msg.error" class="aimsg__error">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+        <span>{{ msg.error }}</span>
+      </div>
+      <div v-if="msg.status === 'aborted'" class="aimsg__aborted">已终止生成</div>
+      <div v-else-if="msg.budget?.message" class="aimsg__budget" :title="budgetHint">
+        <svg class="aimsg__budget-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+        <span class="aimsg__budget-text"><strong>{{ budgetLabel }}</strong>：{{ msg.budget.message }}（上下文已保留）</span>
+        <button v-if="canRegenerate && !streaming" type="button" class="aimsg__budget-go" @click="$emit('continue')">继续这轮</button>
+      </div>
+
+      <!-- 悬停操作：复制 / 重新生成（仅最后一条助手消息可重发） -->
+      <footer v-if="msg.content || msg.error" class="aimsg__acts">
+        <button type="button" class="aimsg__act" :title="copied ? '已复制' : '复制回答'" @click="copyText">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use :href="copied ? '#icon-check' : '#icon-copy-sm'" /></svg>
+          <span>{{ copied ? '已复制' : '复制' }}</span>
+        </button>
+        <button v-if="canRegenerate && !streaming" type="button" class="aimsg__act" title="丢弃这次回答并重新生成" @click="$emit('regenerate', msg)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-reset" /></svg>
+          <span>重新生成</span>
+        </button>
+      </footer>
+    </template>
+  </article>
+</template>
+
+<script>
+import MarkdownBody from './MarkdownBody.vue'
+import { aiFileUrl } from '../runtime/ai-api.js'
+import { copyText as writeClipboard } from '../runtime/clipboard.js'
+
+/** 工具名 → 中文动作标签（与 mcp/tools.mjs 的工具集对齐） */
+const TOOL_LABELS = {
+  card_list: '列出卡片',
+  card_read: '读取卡片',
+  card_write: '写入卡片',
+  card_validate: '校验卡片',
+  card_render_status: '渲染状态',
+  card_node_models: '组件模型',
+  card_screenshot: '截图预览',
+  card_sync: '同步远端卡片',
+  card_save: '推送到远端',
+  card_slice_upload: '上传切图',
+  card_import_meta: '来源侧车',
+  card_route_input: '输入路由',
+  card_scaffold: '生成骨架',
+  card_add_component: '添加组件',
+  card_history: '编辑历史',
+  card_rollback: '回滚版本',
+  skill_read: '读技能文档',
+  skill_exec: '跑技能脚本',
+  card_grep: '定位卡片字段',
+  card_patch: '最小改写卡片',
+  fs_read: '读文件',
+  fs_list: '列目录',
+  shell_exec: '本地命令',
+}
+
+export default {
+  name: 'ChatMessage',
+  components: { MarkdownBody },
+  props: {
+    /** 消息对象：{ id, role, content, reasoning, reasoningMs, toolCalls, attachments, error, status, budget, ts } */
+    msg: { type: Object, required: true },
+    /** 本条消息是否仍在流式输出 */
+    streaming: { type: Boolean, default: false },
+    /** 是否允许「重新生成」（仅最后一条助手消息） */
+    canRegenerate: { type: Boolean, default: false },
+  },
+  emits: ['regenerate', 'approval', 'continue'],
+  data() {
+    return {
+      thinkOpen: false,
+      copied: false,
+      elapsed: 0,
+      openTools: Object.create(null),
+      _tick: 0,
+    }
+  },
+  computed: {
+    /** 收尾原因的短标签（消息里已带完整人话说明，这里只给分类） */
+    budgetLabel() {
+      const map = { loop: '死循环熔断', timeout: '墙钟熔断', steps: '步数硬顶' }
+      return map[this.msg.budget?.reason] || '本轮收尾'
+    },
+    /** 悬停给出「怎么办」：三种收尾的下一步动作不同 */
+    budgetHint() {
+      const map = {
+        loop: '连续多轮同工具同参数 = 拿不到新信息。回复「继续」前最好补一句新思路（换证据链 / 指定要改的字段），否则大概率原地再转一次。',
+        timeout: '本轮跑到墙钟上限（AI_TURN_TIMEOUT_MS 可调）。回复「继续」会带着完整上下文从中断处接着做。',
+        steps: '你在设置里配了「单轮步数上限」。留空即不限步数，失控由死循环 / 墙钟熔断兜住。',
+      }
+      return map[this.msg.budget?.reason] || '上下文已保留，回复「继续」可接着做。'
+    },
+    attachments() {
+      return Array.isArray(this.msg.attachments) ? this.msg.attachments : []
+    },
+    toolCalls() {
+      return Array.isArray(this.msg.toolCalls) ? this.msg.toolCalls : []
+    },
+    /** 思考中：还在流式、且尚未产出正文 / 工具调用 */
+    thinking() {
+      return Boolean(this.streaming && !this.msg.content && !this.toolCalls.length)
+    },
+    /** 正文流式中（思考已结束） */
+    streamingText() {
+      return Boolean(this.streaming && this.msg.content)
+    },
+    /** 首 token 之前 */
+    waiting() {
+      return Boolean(this.streaming && !this.msg.reasoning && !this.msg.content && !this.toolCalls.length && !this.msg.error)
+    },
+    thinkLabel() {
+      if (this.thinking) return `思考中… ${this.fmtSeconds(this.elapsedMs)}`
+      return `已思考 ${this.fmtSeconds(this.msg.reasoningMs || this.elapsedMs)}`
+    },
+    elapsedMs() {
+      return this.thinking ? this.elapsed : this.msg.reasoningMs || this.elapsed
+    },
+    /** 折叠态下滚动展示「最新一行」思考内容，形成 Codex 式的过程感 */
+    peek() {
+      const lines = String(this.msg.reasoning || '').split('\n').map((l) => l.trim()).filter(Boolean)
+      const last = lines[lines.length - 1] || ''
+      return last.length > 72 ? `${last.slice(0, 72)}…` : last
+    },
+  },
+  watch: {
+    streaming: {
+      immediate: true,
+      handler(val) {
+        if (val) this.startTick()
+        else this.stopTick()
+      },
+    },
+    // 思考一结束（出正文或工具行）计时器就没用了，停掉以免整轮都在 250ms 空转重渲染
+    thinking(val) {
+      if (!val) this.stopTick()
+    },
+    // 工具报错时自动展开，便于立刻看到失败原因
+    'msg.toolCalls': {
+      deep: true,
+      handler(list) {
+        for (const tc of list || []) {
+          if (tc.error && this.openTools[tc.toolCallId] === undefined) {
+            this.openTools = { ...this.openTools, [tc.toolCallId]: true }
+          }
+        }
+      },
+    },
+  },
+  beforeUnmount() {
+    this.stopTick()
+  },
+  updated() {
+    // 展开且仍在思考时，思考正文自动跟随滚动到底
+    const pre = this.$refs.thinkPre
+    if (pre && this.thinkOpen && this.thinking) pre.scrollTop = pre.scrollHeight
+  },
+  methods: {
+    startTick() {
+      this.stopTick()
+      this.elapsed = 0
+      this._tick = setInterval(() => {
+        this.elapsed += 250
+      }, 250)
+    },
+    stopTick() {
+      if (this._tick) clearInterval(this._tick)
+      this._tick = 0
+    },
+    fmtSeconds(ms) {
+      const sec = Math.max(0, Math.round(Number(ms || 0) / 1000))
+      if (sec < 60) return `${sec} 秒`
+      return `${Math.floor(sec / 60)} 分 ${sec % 60} 秒`
+    },
+    fileUrl(p) {
+      return aiFileUrl(p)
+    },
+    attSub(att) {
+      if (att.exists === false) return '路径不可读'
+      if (att.isDir) return `${att.entryCount ?? att.entries?.length ?? 0} 项`
+      return this.formatSize(att.size)
+    },
+    formatSize(bytes) {
+      const n = Number(bytes || 0)
+      if (!n) return '0 B'
+      if (n < 1024) return `${n} B`
+      if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+      return `${(n / 1024 / 1024).toFixed(1)} MB`
+    },
+    toolLabel(name) {
+      return TOOL_LABELS[name] || name || '工具'
+    },
+    toolState(tc) {
+      if (tc.error) return 'error'
+      if (tc.result !== undefined && tc.result !== null) return 'done'
+      // 工具名已到、参数仍在流式拼装（后端 tool-call-start）
+      if (tc.pending) return 'pending'
+      return 'running'
+    },
+    toolMs(tc) {
+      if (!tc.ms) return ''
+      return tc.ms < 1000 ? `${tc.ms}ms` : `${(tc.ms / 1000).toFixed(1)}s`
+    },
+    isOpen(tc) {
+      const v = this.openTools[tc.toolCallId]
+      return v === undefined ? Boolean(tc.error) : v
+    },
+    toggleTool(tc) {
+      this.openTools = { ...this.openTools, [tc.toolCallId]: !this.isOpen(tc) }
+    },
+    /** 审批条上的命令原文：后端给 command 就用它，否则按工具参数还原一行 */
+    approvalCommand(tc) {
+      if (tc.command) return String(tc.command)
+      const args = tc.args || {}
+      if (typeof args.command === 'string' && args.command) return args.command
+      if (tc.toolName === 'skill_exec') return [args.script, Array.isArray(args.args) ? args.args.join(' ') : ''].filter(Boolean).join(' ')
+      return JSON.stringify(args)
+    },
+    /** 参数摘要：挑关键字段拼一行，长文本截断 */
+    argSummary(tc) {
+      // 技能脚本按「命令行」展示：script + args 数组拼起来才是人能读懂的一行
+      if (tc.toolName === 'skill_exec' && tc.args?.script) {
+        const argv = Array.isArray(tc.args.args) ? tc.args.args.join(' ') : ''
+        const cmd = [String(tc.args.script).replace(/^skills\//, ''), argv].filter(Boolean).join(' ')
+        return cmd.length > 96 ? `${cmd.slice(0, 96)}…` : cmd
+      }
+      const args = tc.args || {}
+      const parts = []
+      for (const [k, v] of Object.entries(args)) {
+        if (v === undefined || v === null || v === '') continue
+        const text = typeof v === 'object' ? JSON.stringify(v) : String(v)
+        parts.push(`${k}=${text.length > 28 ? `${text.slice(0, 28)}…` : text}`)
+        if (parts.join(' ').length > 56) break
+      }
+      const out = parts.join(' ')
+      return out.length > 72 ? `${out.slice(0, 72)}…` : out
+    },
+    argsSource(tc) {
+      const args = tc.args || {}
+      if (!Object.keys(args).length) return ''
+      let text = ''
+      try {
+        text = JSON.stringify(args, null, 2)
+      } catch {
+        text = String(args)
+      }
+      return `\`\`\`json\n${text}\n\`\`\``
+    },
+    resultSource(tc) {
+      const raw = tc.result
+      if (raw === undefined || raw === null || raw === '') return ''
+      let text = typeof raw === 'string' ? raw : JSON.stringify(raw)
+      try {
+        text = JSON.stringify(JSON.parse(text), null, 2)
+      } catch {
+        /* 非 JSON 结果按纯文本展示 */
+      }
+      if (text.length > 4000) text = `${text.slice(0, 4000)}\n…（已截断）`
+      return `\`\`\`json\n${text}\n\`\`\``
+    },
+    async copyText() {
+      // 与代码块复制钮同源：clipboard.js 带 execCommand 降级，非安全上下文也能复制
+      const ok = await writeClipboard(String(this.msg.content || ''))
+      if (!ok) return
+      this.copied = true
+      setTimeout(() => {
+        this.copied = false
+      }, 1600)
+    },
+  },
+}
+</script>