cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/ChatMessage.vue

@@ -1,383 +0,0 @@
-<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>