cardbuddy 0.10.0 → 0.11.0

package/dist/vendored/components/ChatComposer.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="aicomp" :class="{ 'is-busy': busy, 'is-drag': dragOver, 'is-manual': heightPx > 0, 'is-resizing': resizing }" :style="compStyle">
+    <!-- 上缘拖拽把手：调输入区高度（106px ~ 面板高度 50%，双击恢复自适应），与面板宽度把手同一套交互 -->
+    <div
+      class="aicomp__grip"
+      :class="{ 'is-dragging': resizing }"
+      title="拖拽调整输入区高度（双击恢复自适应）"
+      @pointerdown.prevent="startResize"
+      @dblclick.prevent="resetHeight"
+    ></div>
+
+    <!-- 已挂载的本地文件：只预览 + 传路径，不上传 -->
+    <div v-if="attachments.length" class="aicomp__files">
+      <div
+        v-for="att in attachments"
+        :key="att.path"
+        class="aichip"
+        :class="{ 'aichip--dir': att.isDir, 'aichip--pending': att.pending, 'aichip--missing': att.exists === false }"
+        :title="att.path"
+      >
+        <img v-if="att.isImage && !att.pending" class="aichip__thumb" :src="fileUrl(att.path)" :alt="att.name" loading="lazy" />
+        <svg v-else class="aichip__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.pending ? '#icon-loading' : att.isDir ? '#icon-folder-plus' : att.isImage ? '#icon-image' : '#icon-file-text'" />
+        </svg>
+        <span class="aichip__name">{{ att.pending ? '解析路径中…' : att.name }}</span>
+        <span v-if="!att.pending" class="aichip__sub">{{ chipSub(att) }}</span>
+        <button type="button" class="aichip__rm" title="移除" @click="$emit('remove-attachment', att.path)">
+          <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-x" /></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 粘贴绝对路径（非 macOS / 拖拽反查失败时的兜底入口） -->
+    <div v-if="pathInputOpen" class="aicomp__path">
+      <input
+        ref="pathEl"
+        v-model="pathText"
+        class="aicomp__path-input"
+        type="text"
+        placeholder="粘贴本地图片或文件夹的绝对路径，回车确认"
+        spellcheck="false"
+        @keydown.enter.prevent="confirmPath"
+        @keydown.esc.stop.prevent="closePathInput"
+      />
+      <button type="button" class="aicomp__path-ok" :disabled="!pathText.trim()" @click="confirmPath">添加</button>
+      <button type="button" class="aicomp__path-no" @click="closePathInput">取消</button>
+    </div>
+
+    <div
+      class="aicomp__box"
+      @dragenter.prevent="onDragEnter"
+      @dragover.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+    >
+      <textarea
+        ref="taEl"
+        v-model="text"
+        class="aicomp__ta"
+        :placeholder="placeholder"
+        rows="1"
+        @input="autoGrow"
+        @keydown="onKeydown"
+        @paste="onPaste"
+      ></textarea>
+      <div class="aicomp__bar">
+        <div class="aicomp__tools">
+          <div class="aicomp__attach" ref="attachEl">
+            <button type="button" class="aicomp__iconbtn" :class="{ 'is-open': attachOpen }" title="挂载本地图片 / 文件 / 文件夹" @click="toggleAttach">
+              <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-paperclip" /></svg>
+            </button>
+            <div v-if="attachOpen" class="aicomp__menu" role="menu">
+              <button type="button" role="menuitem" @click="pick('image')">
+                <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-image" /></svg>
+                本地图片…
+              </button>
+              <button type="button" role="menuitem" @click="pick('file')">
+                <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-file-text" /></svg>
+                本地文件…
+              </button>
+              <button type="button" role="menuitem" @click="pick('folder')">
+                <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-folder-plus" /></svg>
+                本地文件夹…
+              </button>
+              <div class="aicomp__menu-sep"></div>
+              <button type="button" role="menuitem" @click="openPathInput">
+                <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-link" /></svg>
+                粘贴路径…
+              </button>
+            </div>
+          </div>
+          <span class="aicomp__hint">拖拽文件 / 文件夹到此，或直接 ⌘V 粘贴截图</span>
+        </div>
+        <div class="aicomp__right">
+          <span v-if="ctx" class="aicomp__ctx" :class="`is-${ctx.level}`" :title="ctxTitle">
+            <svg class="aicomp__ctx-ring" viewBox="0 0 20 20" aria-hidden="true">
+              <circle class="aicomp__ctx-track" cx="10" cy="10" r="8" />
+              <circle
+                class="aicomp__ctx-arc"
+                cx="10"
+                cy="10"
+                r="8"
+                :stroke-dasharray="`${ctx.arc} ${ctx.circ}`"
+                transform="rotate(-90 10 10)"
+              />
+            </svg>
+            <span class="aicomp__ctx-pct">{{ ctx.pctLabel }}</span>
+          </span>
+          <span v-if="model" class="aicomp__model" :title="`当前模型：${model}`">{{ model }}</span>
+          <button
+            v-if="busy"
+            type="button"
+            class="aicomp__send aicomp__send--stop"
+            title="终止生成（Esc）"
+            @click="$emit('stop')"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><use href="#icon-stop" /></svg>
+          </button>
+          <button
+            v-else
+            type="button"
+            class="aicomp__send"
+            :disabled="!canSend"
+            :title="canSend ? '发送（Enter）' : '输入内容后发送'"
+            @click="submit"
+          >
+            <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-send" /></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { aiFileUrl } from '../runtime/ai-api.js'
+
+/** 输入区手动高度下限（px）：两行正文 + 工具条的最小可用高度 */
+const MIN_HEIGHT = 106
+/** 输入区手动高度上限 = 对话面板高度的比例 */
+const MAX_RATIO = 0.5
+const HEIGHT_KEY = 'cardbuddy:ai-composer-height'
+
+export default {
+  name: 'ChatComposer',
+  props: {
+    /** 生成中：发送键切成终止键，Enter 不再触发发送 */
+    busy: { type: Boolean, default: false },
+    /** 当前模型名（状态展示） */
+    model: { type: String, default: '' },
+    /** 已挂载的本地文件 / 文件夹 */
+    attachments: { type: Array, default: () => [] },
+    /** 未配置模型时的占位提示 */
+    placeholder: { type: String, default: '描述你要改的卡片，Enter 发送 / Shift+Enter 换行' },
+    /** 上下文占用（后端每轮 SSE context-usage 回传）：{ used, total, window }，null = 尚未跑过 */
+    context: { type: Object, default: null },
+  },
+  emits: ['send', 'stop', 'pick', 'add-path', 'remove-attachment', 'drop-files', 'paste-image', 'escape'],
+  data() {
+    return {
+      text: '',
+      attachOpen: false,
+      pathInputOpen: false,
+      pathText: '',
+      dragOver: false,
+      /** 输入区手动高度（px，0 = 自适应）：拖拽把手设定，localStorage 持久化 */
+      heightPx: 0,
+      resizing: false,
+      _outside: null,
+      _onWinResize: null,
+    }
+  },
+  computed: {
+    canSend() {
+      return Boolean(this.text.trim() || this.attachments.some((a) => !a.pending && a.exists !== false))
+    },
+    /** 手动高度生效时才写内联高度：自适应态完全交给内容撑开 */
+    compStyle() {
+      return this.heightPx > 0 ? { height: `${this.heightPx}px` } : null
+    },
+    /** 上下文占比圆环的几何量：环周长固定，弧长 = 周长 × 占比 */
+    ctx() {
+      const c = this.context
+      if (!c) return null
+      const total = Number(c.window) > 0 ? Number(c.window) : Number(c.total) > 0 ? Number(c.total) : 0
+      const used = Math.max(0, Number(c.used) || 0)
+      if (!(total > 0)) return null
+      const pct = Math.min(1, used / total)
+      const circ = 2 * Math.PI * 8
+      return {
+        pct,
+        arc: (circ * pct).toFixed(2),
+        circ: circ.toFixed(2),
+        pctLabel: `${Math.round(pct * 100)}%`,
+        level: pct >= 0.85 ? 'danger' : pct >= 0.6 ? 'warn' : 'ok',
+        used,
+        total,
+      }
+    },
+    ctxTitle() {
+      const c = this.ctx
+      if (!c) return ''
+      const fmt = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(Math.round(n)))
+      const win = Number(this.context?.window) > 0 ? ` · 网关窗口 ${fmt(Number(this.context.window))}` : ''
+      return `上下文占用 ${fmt(c.used)} / ${fmt(c.total)} token（${c.pctLabel}）${win}；接近上限时后端会自动折叠早期工具结果`
+    },
+  },
+  mounted() {
+    this._outside = (ev) => {
+      const host = this.$refs.attachEl
+      if (host && !host.contains(ev.target)) this.attachOpen = false
+    }
+    document.addEventListener('mousedown', this._outside)
+    this.loadHeight()
+    // 面板 / 窗口变矮时手动高度可能超过 50% 上限：实时夹回，避免输入区吃掉半个对话面板
+    this._onWinResize = () => this.clampHeight()
+    window.addEventListener('resize', this._onWinResize)
+    this.autoGrow()
+  },
+  beforeUnmount() {
+    if (this._outside) document.removeEventListener('mousedown', this._outside)
+    if (this._onWinResize) window.removeEventListener('resize', this._onWinResize)
+  },
+  methods: {
+    focus() {
+      this.$nextTick(() => this.$refs.taEl?.focus())
+    },
+    /** 供面板「建议问法」等外部填充输入框 */
+    setText(value) {
+      this.text = value
+      this.focus()
+      this.autoGrow()
+    },
+    fileUrl(p) {
+      return aiFileUrl(p)
+    },
+    chipSub(att) {
+      if (att.exists === false) return '不可读'
+      if (att.isDir) return `${att.entryCount ?? att.entries?.length ?? 0} 项`
+      const n = Number(att.size || 0)
+      if (!n) return ''
+      if (n < 1024) return `${n} B`
+      if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`
+      return `${(n / 1024 / 1024).toFixed(1)} MB`
+    },
+    autoGrow() {
+      const el = this.$refs.taEl
+      if (!el) return
+      // 手动高度态：高度由容器决定（textarea 撑满剩余空间），内容超出自己滚动
+      if (this.heightPx > 0) {
+        el.style.height = ''
+        return
+      }
+      el.style.height = 'auto'
+      el.style.height = `${Math.min(el.scrollHeight, 168)}px`
+    },
+    // ---------- 输入区高度（与面板宽度把手同一套：pointer 捕获 + body 光标 + localStorage）----------
+    /** 上限 = 对话面板高度的 50%；下限 106px（够放两行正文 + 工具条） */
+    heightLimits() {
+      const panel = this.$el?.closest('.aichat')
+      const panelH = panel?.clientHeight || window.innerHeight
+      return { min: MIN_HEIGHT, max: Math.max(MIN_HEIGHT, Math.floor(panelH * MAX_RATIO)) }
+    },
+    clampHeight() {
+      if (!this.heightPx) return
+      const { min, max } = this.heightLimits()
+      this.heightPx = Math.max(min, Math.min(max, this.heightPx))
+    },
+    loadHeight() {
+      try {
+        const v = localStorage.getItem(HEIGHT_KEY)
+        const px = v == null ? 0 : parseInt(v, 10)
+        if (!Number.isNaN(px) && px >= MIN_HEIGHT) this.heightPx = px
+      } catch {
+        /* localStorage 不可用时保持自适应 */
+      }
+      this.clampHeight()
+    },
+    saveHeight() {
+      try {
+        if (this.heightPx) localStorage.setItem(HEIGHT_KEY, String(Math.round(this.heightPx)))
+        else localStorage.removeItem(HEIGHT_KEY)
+      } catch {
+        /* 忽略 */
+      }
+    },
+    startResize(ev) {
+      const el = ev && ev.currentTarget
+      if (!el) return
+      this.resizing = true
+      document.body.style.cursor = 'row-resize'
+      document.body.style.userSelect = 'none'
+      const pointerId = ev.pointerId
+      try {
+        el.setPointerCapture(pointerId)
+      } catch {
+        /* 不支持捕获时退化为元素级监听 */
+      }
+      // 输入区贴面板底边：新高度 = 底边 - 指针 y（往上拖变高）
+      const bottom = this.$el.getBoundingClientRect().bottom
+      const move = (e) => {
+        const { min, max } = this.heightLimits()
+        this.heightPx = Math.max(min, Math.min(max, Math.round(bottom - e.clientY)))
+      }
+      const finish = () => {
+        el.removeEventListener('pointermove', move)
+        el.removeEventListener('pointerup', finish)
+        el.removeEventListener('pointercancel', finish)
+        window.removeEventListener('blur', finish)
+        try {
+          if (el.hasPointerCapture?.(pointerId)) el.releasePointerCapture(pointerId)
+        } catch {
+          /* 已释放 */
+        }
+        this.resizing = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        this.saveHeight()
+      }
+      el.addEventListener('pointermove', move)
+      el.addEventListener('pointerup', finish)
+      el.addEventListener('pointercancel', finish)
+      window.addEventListener('blur', finish) // 失焦兜底，避免拖拽态卡死
+    },
+    /** 双击把手：回到内容自适应（清持久化） */
+    resetHeight() {
+      this.heightPx = 0
+      this.saveHeight()
+      this.$nextTick(this.autoGrow)
+    },
+    onKeydown(ev) {
+      // Esc：生成中 → 交给面板终止；否则关面板（与 Codex 一致的中断手感）
+      if (ev.key === 'Escape') {
+        ev.preventDefault()
+        this.$emit('escape')
+        return
+      }
+      if (ev.key !== 'Enter') return
+      // 输入法组词中的 Enter 是「选词」，不能当发送
+      if (ev.isComposing || ev.keyCode === 229) return
+      if (ev.shiftKey) return // Shift+Enter 换行
+      ev.preventDefault()
+      if (!this.busy) this.submit()
+    },
+    submit() {
+      if (this.busy || !this.canSend) return
+      const payload = { text: this.text.trim(), attachments: this.attachments.filter((a) => !a.pending && a.exists !== false) }
+      this.text = ''
+      this.attachOpen = false
+      this.$nextTick(this.autoGrow)
+      this.$emit('send', payload)
+    },
+    toggleAttach() {
+      this.attachOpen = !this.attachOpen
+    },
+    pick(kind) {
+      this.attachOpen = false
+      this.$emit('pick', kind)
+    },
+    openPathInput() {
+      this.attachOpen = false
+      this.pathInputOpen = true
+      this.pathText = ''
+      this.$nextTick(() => this.$refs.pathEl?.focus())
+    },
+    closePathInput() {
+      this.pathInputOpen = false
+      this.pathText = ''
+    },
+    confirmPath() {
+      const value = this.pathText.trim()
+      if (!value) return
+      this.$emit('add-path', value)
+      this.closePathInput()
+    },
+    onDragEnter() {
+      this.dragOver = true
+    },
+    onDragOver() {
+      this.dragOver = true
+    },
+    onDragLeave() {
+      this.dragOver = false
+    },
+    onDrop(ev) {
+      this.dragOver = false
+      const dt = ev.dataTransfer
+      if (!dt) return
+      this.$emit('drop-files', dt)
+    },
+    /** ⌘V 粘贴截图：交给面板落盘成本机文件（不上传远端） */
+    async onPaste(ev) {
+      const items = ev.clipboardData?.items
+      if (!items) return
+      for (const item of items) {
+        if (item.type && item.type.indexOf('image/') === 0) {
+          const file = item.getAsFile()
+          if (!file) continue
+          ev.preventDefault()
+          const dataUrl = await new Promise((resolve) => {
+            const fr = new FileReader()
+            fr.onload = () => resolve(String(fr.result || ''))
+            fr.onerror = () => resolve('')
+            fr.readAsDataURL(file)
+          })
+          if (dataUrl) this.$emit('paste-image', dataUrl)
+          return
+        }
+      }
+    },
+  },
+}
+</script>