foxclaw 0.1.0 → 0.1.3

package/python/frontend_src/src/components/ModelPicker.vue

@@ -0,0 +1,350 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  addCustom, currentLabel, getCustom, loadModels, model, removeCustom, selectModel,
+  testModel, updateCustom,
+} from '../stores/model.js'
+import { say } from '../stores/chat.js'
+
+const open = ref(false)
+const root = ref(null)
+const form = ref(null)
+const busy = ref(false)
+const cur = computed(currentLabel)
+
+onMounted(loadModels)
+
+function toggle() {
+  open.value = !open.value
+  if (open.value) {
+    form.value = null
+    loadModels(true)
+  }
+}
+
+function onDocDown(e) {
+  if (root.value && !root.value.contains(e.target)) open.value = false
+}
+onMounted(() => document.addEventListener('mousedown', onDocDown, true))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocDown, true))
+
+async function pick(payload) {
+  if (busy.value) return
+  busy.value = true
+  try {
+    await selectModel(payload)
+    open.value = false
+    say(`已切换到 ${currentLabel().name}`)
+  } catch (e) {
+    say(`切换失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+function startAdd() {
+  form.value = { edit: false, name: '', base_url: '', api_key: '', model: '', note: '' }
+}
+
+async function startEdit(m) {
+  busy.value = true
+  try {
+    const d = await getCustom(m.name)
+    form.value = {
+      edit: true, original: d.name || m.name, name: d.name || m.name,
+      base_url: d.base_url || '', api_key: '', model: d.model || '', note: d.note || '',
+      has_key: !!d.has_key,
+    }
+  } catch (e) {
+    say(`读取失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function submit() {
+  const f = form.value
+  if (!f.name.trim() || !f.base_url.trim() || !f.model.trim()) {
+    return say('名称 / Base URL / 模型 ID 都必填')
+  }
+  if (!f.edit && !f.api_key.trim()) return say('Key 必填')
+  busy.value = true
+  try {
+    if (f.edit) {
+      const payload = { base_url: f.base_url.trim(), model: f.model.trim(), note: f.note || '' }
+      if (f.api_key.trim()) payload.api_key = f.api_key.trim()
+      await updateCustom(f.original, payload)
+      say('已保存修改')
+    } else {
+      await addCustom({
+        name: f.name.trim(), base_url: f.base_url.trim(),
+        api_key: f.api_key.trim(), model: f.model.trim(), note: f.note || '',
+      })
+      say('已添加自定义模型')
+    }
+    form.value = null
+  } catch (e) {
+    say(`${f.edit ? '保存' : '添加'}失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+const tState = ref('idle')   // idle | busy | ok | err
+const tKey = ref('')
+const tMsg = ref('')
+
+async function test(source, key) {
+  if (tState.value === 'busy') return
+  tState.value = 'busy'
+  tKey.value = `${source}:${key || ''}`
+  tMsg.value = ''
+  try {
+    const d = source === 'custom'
+      ? await testModel({ source: 'custom', name: key })
+      : await testModel({ source: 'preset', provider: key })
+    if (d.ok) {
+      tState.value = 'ok'
+      tMsg.value = `${d.latency_ms ?? '?'}ms · ${d.model || key}${d.reply ? ` · ${String(d.reply).slice(0, 40)}` : ''}`
+    } else {
+      tState.value = 'err'
+      tMsg.value = d.error || '测试失败'
+    }
+  } catch (e) {
+    tState.value = 'err'
+    tMsg.value = String(e.message || e)
+  }
+}
+
+async function del(m) {
+  if (!confirm(`删除自定义模型「${m.name}」?`)) return
+  try {
+    await removeCustom(m.name)
+    say('已删除')
+  } catch (e) {
+    say(`删除失败:${e.message}`)
+  }
+}
+
+function isCur(source, key) {
+  const c = model.current
+  if (!c) return source === 'auto'
+  if (c.source !== source) return false
+  return source === 'preset' ? c.provider === key : c.name === key
+}
+</script>
+
+<template>
+  <div ref="root" class="mp">
+    <button class="pill" :class="{ on: open }" :title="`当前模型:${cur.sub}`" @click="toggle">
+      <span class="dot" :style="{ background: cur.color, boxShadow: `0 0 6px ${cur.color}` }" />
+      <span class="nm">{{ cur.name }}</span>
+      <span class="caret">▾</span>
+    </button>
+
+    <div v-if="open" class="pop">
+      <template v-if="!form">
+        <button class="it" :class="{ on: isCur('auto') }" @click="pick({ source: 'auto' })">
+          <span class="dot" style="background: #7e93b8" />
+          <span class="tx"><b>Auto</b><span>跟随 .env 默认</span></span>
+          <span v-if="isCur('auto')" class="tg">当前</span>
+        </button>
+
+        <div class="sep">预置</div>
+        <div v-if="model.state === 'loading'" class="empty">加载中…</div>
+        <div v-else-if="model.state === 'error'" class="empty">读取失败:{{ model.err }}</div>
+        <div
+          v-for="p in model.providers"
+          v-else
+          :key="p.provider"
+          class="it"
+          :class="{ on: isCur('preset', p.provider), dis: !p.configured }"
+        >
+          <span class="dot" :style="{ background: p.color, boxShadow: `0 0 6px ${p.color}` }" />
+          <button
+            class="tx plain"
+            @click="p.configured ? pick({ source: 'preset', provider: p.provider }) : say(`${p.provider} 未在 .env 配置 Key`)"
+          >
+            <b>{{ p.label }}</b><span>{{ p.provider }}</span>
+          </button>
+          <span v-if="isCur('preset', p.provider)" class="tg">当前</span>
+          <span v-else-if="!p.configured" class="tg warn">未配置</span>
+          <button
+            class="x"
+            :disabled="!p.configured || tState === 'busy'"
+            title="连通性测试"
+            @click.stop="test('preset', p.provider)"
+          >
+            {{ tState === 'busy' && tKey === `preset:${p.provider}` ? '…' : '测' }}
+          </button>
+        </div>
+
+        <template v-if="model.custom.length">
+          <div class="sep">自定义</div>
+          <div v-for="m in model.custom" :key="m.name" class="it" :class="{ on: isCur('custom', m.name) }">
+            <span class="dot" style="background: #a78bfa; box-shadow: 0 0 6px #a78bfa" />
+            <button class="tx plain" @click="pick({ source: 'custom', name: m.name })">
+              <b>{{ m.name }}</b>
+              <span>{{ m.model }}<template v-if="m.note"> · {{ m.note }}</template></span>
+            </button>
+            <span v-if="isCur('custom', m.name)" class="tg">当前</span>
+            <button
+              class="x"
+              :disabled="tState === 'busy'"
+              title="连通性测试"
+              @click.stop="test('custom', m.name)"
+            >
+              {{ tState === 'busy' && tKey === `custom:${m.name}` ? '…' : '测' }}
+            </button>
+            <button class="x" title="编辑" @click.stop="startEdit(m)">编</button>
+            <span class="x" title="删除" @click="del(m)">✕</span>
+          </div>
+        </template>
+
+        <div v-if="tState === 'busy'" class="tres">测试中…</div>
+        <div v-else-if="tMsg" class="tres" :class="tState">
+          {{ tState === 'ok' ? '✓' : '✕' }} {{ tMsg }}
+        </div>
+
+        <div class="foot">
+          <button class="fbtn" @click="startAdd">＋ 添加自定义模型</button>
+          <button class="fbtn" title="重新读取" @click="loadModels(true)">⟳</button>
+        </div>
+      </template>
+
+      <form v-else class="form" @submit.prevent="submit">
+        <div class="fhead">
+          {{ form.edit ? '编辑自定义模型' : '添加自定义模型' }}
+          <span class="x" @click="form = null">✕</span>
+        </div>
+        <label>名称
+          <input v-model="form.name" :disabled="form.edit" placeholder="我的 DeepSeek" />
+        </label>
+        <label>Base URL<input v-model="form.base_url" placeholder="https://api.deepseek.com/v1" /></label>
+        <label>API Key
+          <input
+            v-model="form.api_key"
+            type="password"
+            :placeholder="form.edit ? (form.has_key ? '留空 = 保留原 Key' : '尚未设置,请填写') : 'sk-…'"
+          />
+        </label>
+        <label>模型 ID<input v-model="form.model" placeholder="deepseek-chat" /></label>
+        <label>备注<input v-model="form.note" placeholder="可选:这个模型用在哪 / 限速多少" /></label>
+        <button class="submit" :disabled="busy">
+          {{ busy ? '保存中…' : (form.edit ? '保存修改' : '保存并保持未选中') }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mp { position: relative; flex-shrink: 0; }
+
+.pill {
+  display: flex; align-items: center; gap: 5px;
+  padding: 5px 9px; border-radius: var(--r-pill);
+  font-size: 12px; font-weight: 600; color: var(--ink);
+  background: var(--surface-2);
+  max-width: 150px;
+  transition: background 0.15s, color 0.15s;
+}
+.pill:hover, .pill.on { background: var(--surface-3); color: var(--ink); }
+.pill .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+.pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pill .caret { font-size: 10px; color: var(--dim); }
+
+.pop {
+  position: absolute; left: 0; bottom: calc(100% + 8px);
+  z-index: var(--z-menu);
+  width: 272px; max-height: 54vh;
+  display: flex; flex-direction: column;
+  padding: 6px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.92);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: var(--sh-pop);
+  overflow-y: auto;
+  animation: mp-in 0.15s ease;
+}
+@keyframes mp-in { from { opacity: 0; transform: translateY(5px); } }
+
+.it {
+  width: 100%;
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 7px; border-radius: var(--r-sm);
+  text-align: left;
+  transition: background 0.13s;
+}
+.it:hover { background: var(--surface-2); }
+.it.on { background: var(--accent-soft); }
+.it.dis { opacity: 0.55; }
+.it .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.it .tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+.it .tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.it .tx span { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.it .tx.plain { background: none; padding: 0; }
+.tg {
+  flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-pill);
+  color: var(--accent); background: rgba(26, 157, 95, 0.13);
+}
+.tg.warn { color: var(--amber); background: rgba(200, 140, 40, 0.13); }
+.it .x { flex-shrink: 0; font-size: 11px; color: var(--dim); padding: 2px 4px; }
+.it .x:hover { color: var(--red); }
+button.x { background: none; border: 0; font-family: inherit; cursor: pointer; }
+button.x:hover:not(:disabled) { color: var(--accent); }
+button.x:disabled { opacity: 0.4; cursor: default; }
+
+.tres {
+  margin-top: 5px; padding: 7px 9px; border-radius: var(--r-sm);
+  font-size: 11.5px; line-height: 1.55; color: var(--dim);
+  background: var(--surface-2);
+  overflow-wrap: anywhere;
+}
+.tres.ok { color: var(--green); background: rgba(26, 157, 95, 0.08); }
+.tres.err { color: var(--red); background: rgba(229, 72, 77, 0.07); }
+
+.sep {
+  padding: 9px 7px 4px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+.empty { padding: 10px 7px; font-size: 12px; color: var(--dim); }
+
+.foot {
+  position: sticky; bottom: -6px;
+  display: flex; gap: 5px;
+  padding: 6px 4px 4px; margin-top: 5px;
+  border-top: 1px solid var(--line-soft);
+  background: rgba(255, 255, 255, 0.96);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+.fbtn {
+  flex: 1; padding: 7px; border-radius: var(--r-sm);
+  font-size: 12px; font-weight: 600; color: var(--dim);
+  background: var(--surface-2);
+}
+.fbtn:hover { color: var(--ink); background: var(--surface-3); }
+
+.form { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
+.fhead {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 12.5px; font-weight: 700; padding: 2px 3px 4px;
+}
+.fhead .x { cursor: pointer; color: var(--dim); font-size: 12px; }
+.form label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--dim); }
+.form input {
+  padding: 6px 8px; border-radius: 7px; font-size: 12px;
+  background: #fff; border: 1px solid var(--line);
+}
+.form input:focus { border-color: rgba(26, 157, 95, 0.45); }
+.form input:disabled { color: var(--faint); background: var(--surface-2); }
+.submit {
+  margin-top: 3px; padding: 7px; border-radius: var(--r-sm);
+  font-size: 12px; font-weight: 600; color: #fff; background: var(--green);
+}
+.submit:disabled { opacity: 0.6; }
+</style>

package/python/frontend_src/src/components/QuickIngest.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { computed, ref, onUnmounted } from 'vue'
+import { panels, ingestKnowledge } from '../stores/panels.js'
+
+const kp = panels.knowledge
+const draft = ref('')
+const title = ref('')
+let timer = null
+
+const busy = computed(() => kp.ingest === 'busy')
+const msg = computed(() =>
+  busy.value ? '抽取中,可能要几十秒…' : (kp.ingestErr || kp.ingestMsg)
+)
+const kind = computed(() => (busy.value ? 'busy' : kp.ingestErr ? 'err' : 'ok'))
+
+function clearLater() {
+  clearTimeout(timer)
+  timer = setTimeout(() => { kp.ingest = 'idle'; kp.ingestMsg = ''; kp.ingestErr = '' }, 8000)
+}
+
+async function go() {
+  const text = draft.value.trim()
+  if (busy.value || !text) return
+  draft.value = ''
+  try {
+    await ingestKnowledge({ text, title: title.value })
+    title.value = ''
+  } catch {
+  }
+  clearLater()
+}
+
+onUnmounted(() => clearTimeout(timer))
+</script>
+
+<template>
+  <section class="qi">
+    <div class="qi-h">
+      收录知识 <em>短知识 · 长文档走知识星球</em>
+    </div>
+    <textarea
+      v-model="draft"
+      class="qi-ta"
+      rows="2"
+      placeholder="写一句就算一条,Ctrl+Enter 收录"
+      @keydown.ctrl.enter.prevent="go"
+    />
+    <div class="qi-b">
+      <input v-model="title" class="qi-title" placeholder="标题(可选)" />
+      <button class="qi-go" :disabled="busy || !draft.trim()" @click="go">
+        {{ busy ? '抽取中…' : '收录' }}
+      </button>
+    </div>
+    <div v-if="msg" class="qi-msg" :class="kind">{{ msg }}</div>
+  </section>
+</template>
+
+<style scoped>
+.qi {
+  padding: 0 0 10px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--line-soft);
+}
+.qi-h {
+  display: flex; align-items: baseline; gap: 6px;
+  margin-bottom: 7px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
+  text-transform: uppercase; color: var(--dim);
+}
+.qi-h em {
+  font-style: normal; font-weight: 500; letter-spacing: 0;
+  text-transform: none; font-size: 11px; color: var(--dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.qi-ta {
+  display: block; width: 100%; box-sizing: border-box;
+  resize: vertical; min-height: 46px; max-height: 140px;
+  padding: 7px 9px; border-radius: var(--r-sm);
+  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
+  color: var(--ink); background: #fff;
+  border: 1px solid var(--line);
+  transition: border-color 0.15s;
+}
+.qi-ta::placeholder { color: var(--dim); }
+.qi-ta:focus { outline: none; border-color: rgba(26, 157, 95, 0.42); }
+.qi-b { display: flex; gap: 6px; margin-top: 6px; }
+.qi-title {
+  flex: 1 1 auto; min-width: 0;
+  padding: 5px 8px; border-radius: var(--r-pill);
+  font-size: 11.5px; color: var(--ink);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line);
+}
+.qi-title::placeholder { color: var(--dim); }
+.qi-title:focus { outline: none; border-color: rgba(26, 157, 95, 0.35); }
+.qi-go {
+  flex-shrink: 0;
+  padding: 6px 13px; border-radius: var(--r-pill);
+  font-size: 11.5px; font-weight: 600; color: #fff;
+  background: var(--green);
+  border: 1px solid var(--green);
+  transition: opacity 0.15s;
+}
+.qi-go:disabled {
+  background: rgba(23, 32, 26, 0.07); color: var(--dim);
+  border-color: var(--line);
+}
+.qi-msg { margin-top: 6px; font-size: 11px; line-height: 1.5; }
+.qi-msg.ok { color: var(--green); }
+.qi-msg.busy { color: var(--dim); }
+.qi-msg.err { color: #b4453c; }
+</style>