feat: 用 Ragflow 搭建鲜境方案客服

咨询台接 Ragflow 检索与示例知识库，支持追问、判定、引用和留资。

Co-authored-by: haijd <haijd@163.com>

engine/app/static/app.js

@@ -6,7 +6,7 @@ const schemeEl = document.getElementById("scheme");
 const metaEl = document.getElementById("meta");
 const form = document.getElementById("form");
 const input = document.getElementById("input");
-const resetBtn = document.getElementById("reset");
+const statusEl = document.getElementById("status");
 
 function addBubble(role, text) {
   const div = document.createElement("div");
@@ -21,7 +21,7 @@ async function ensureSession() {
   const res = await fetch("/api/sessions", { method: "POST" });
   const data = await res.json();
   sessionId = data.session_id;
-  metaEl.textContent = `session: ${sessionId.slice(0, 8)}…`;
+  metaEl.textContent = `会话 ${sessionId.slice(0, 8)}`;
   return sessionId;
 }
 
@@ -34,20 +34,18 @@ async function sendMessage(message) {
     body: JSON.stringify({ session_id: sessionId, message }),
   });
   if (!res.ok) {
-    addBubble("sys", `错误：${res.status}`);
+    addBubble("bot", `请求失败：${res.status}`);
     return;
   }
   const data = await res.json();
   addBubble("bot", data.reply);
   slotsEl.textContent = JSON.stringify(data.slots || {}, null, 2);
-  schemeEl.textContent = data.scheme
-    ? JSON.stringify(data.scheme, null, 2)
-    : "尚未生成";
-  metaEl.textContent = `session: ${sessionId.slice(0, 8)}… · phase: ${data.phase}`;
+  schemeEl.textContent = data.scheme ? JSON.stringify(data.scheme, null, 2) : "还没到出方案这一步";
+  metaEl.textContent = `会话 ${sessionId.slice(0, 8)} · ${data.phase}`;
 }
 
-form.addEventListener("submit", async (e) => {
-  e.preventDefault();
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
   const text = input.value.trim();
   if (!text) return;
   input.value = "";
@@ -60,14 +58,87 @@ form.addEventListener("submit", async (e) => {
   }
 });
 
-resetBtn.addEventListener("click", () => {
+document.getElementById("reset").addEventListener("click", () => {
   sessionId = null;
   logEl.innerHTML = "";
   slotsEl.textContent = "{}";
-  schemeEl.textContent = "尚未生成";
+  schemeEl.textContent = "还没到出方案这一步";
   metaEl.textContent = "";
-  addBubble("bot", "新会话已开始。可以直接说场景，例如：「产线检测，偏向 B 类」。");
+  addBubble("bot", "新会话。可以直接说：「产线检测，偏向 B 类」。");
   input.focus();
 });
 
-addBubble("bot", "你好，我是鲜境方案引擎原型。先收集几个关键信息，再给出产品组合草稿。\n试试：「我们在户外做监测，指标还不确定」。");
+document.getElementById("handoff").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const msg = document.getElementById("handoff-msg");
+  if (!sessionId) {
+    msg.textContent = "请先开始一段咨询。";
+    return;
+  }
+  const body = Object.fromEntries(new FormData(event.target).entries());
+  const res = await fetch("/api/handoff", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ session_id: sessionId, ...body }),
+  });
+  const data = await res.json();
+  msg.textContent = res.ok ? `已记录，编号 ${data.lead_id}` : "提交失败";
+  if (res.ok) loadLeads();
+});
+
+document.querySelectorAll(".tab").forEach((button) => {
+  button.addEventListener("click", () => {
+    document.querySelectorAll(".tab").forEach((item) => item.classList.remove("active"));
+    document.querySelectorAll(".pane").forEach((item) => item.classList.remove("active"));
+    button.classList.add("active");
+    document.getElementById(button.dataset.tab).classList.add("active");
+    if (button.dataset.tab === "knowledge") loadKnowledge();
+    if (button.dataset.tab === "leads") loadLeads();
+  });
+});
+
+async function loadHealth() {
+  try {
+    const data = await (await fetch("/api/health")).json();
+    const ragOk = data.ragflow && data.ragflow.ok && data.dataset_ids_configured;
+    statusEl.textContent = ragOk ? "Ragflow 已接入" : "Ragflow 未就绪，出方案时会标明检索失败";
+    statusEl.className = `status ${ragOk ? "ok" : "bad"}`;
+    if (data.ragflow_web) document.getElementById("ragflow-link").href = data.ragflow_web;
+  } catch {
+    statusEl.textContent = "咨询服务未连通";
+    statusEl.className = "status bad";
+  }
+}
+
+async function loadKnowledge() {
+  const box = document.getElementById("ragflow-status");
+  const files = document.getElementById("files");
+  const status = await (await fetch("/api/ragflow/status")).json();
+  box.textContent = JSON.stringify(status, null, 2);
+  const list = await (await fetch("/api/knowledge/files")).json();
+  files.innerHTML = "";
+  (list.files || []).forEach((file) => {
+    const li = document.createElement("li");
+    li.textContent = `${file.name} · ${file.bytes} 字节`;
+    files.appendChild(li);
+  });
+}
+
+async function loadLeads() {
+  const box = document.getElementById("lead-list");
+  const data = await (await fetch("/api/leads")).json();
+  if (!data.leads || !data.leads.length) {
+    box.textContent = "暂无";
+    return;
+  }
+  box.innerHTML = "";
+  data.leads.forEach((lead) => {
+    const div = document.createElement("div");
+    div.className = "lead";
+    div.textContent = `#${lead.id} ${lead.name} ${lead.phone} · ${lead.note || "无备注"} · ${lead.created_at}`;
+    box.appendChild(div);
+  });
+}
+
+addBubble("bot", "你好，我是鲜境方案客服。先问清技术路线和场景，再给出产品组合草稿，并附上知识库依据。\n试试：「户外监测，指标还不确定」。");
+loadHealth();

engine/app/static/index.html

@@ -3,40 +3,76 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>鲜境方案引擎原型</title>
+  <title>鲜境智能客服</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body>
-  <div class="page">
-    <header class="hero">
-      <p class="brand">鲜境物联 · 方案引擎原型</p>
-      <h1>先跑通「追问 → 判定 → 出方案」</h1>
-      <p class="sub">槽位与判定树在 <code>knowledge/*.yaml</code>，需求变了改配置即可。当前检索为 Mock，可后再接 Ragflow。</p>
+  <div class="shell">
+    <header class="top">
+      <div>
+        <p class="brand">鲜境物联</p>
+        <h1>方案型智能客服</h1>
+      </div>
+      <div class="status" id="status">正在检查知识库…</div>
     </header>
 
-    <main class="layout">
-      <section class="chat panel">
-        <div id="log" class="log" aria-live="polite"></div>
-        <form id="form" class="composer">
-          <input id="input" type="text" placeholder="描述需求，或直接回答追问…" autocomplete="off" required />
-          <button type="submit">发送</button>
-        </form>
-        <div class="toolbar">
-          <button type="button" id="reset" class="ghost">新会话</button>
-          <span id="meta" class="meta"></span>
-        </div>
-      </section>
+    <nav class="tabs">
+      <button type="button" class="tab active" data-tab="consult">线上咨询</button>
+      <button type="button" class="tab" data-tab="knowledge">知识库</button>
+      <button type="button" class="tab" data-tab="leads">留资</button>
+    </nav>
 
-      <aside class="side panel">
-        <h2>当前槽位</h2>
-        <pre id="slots">{}</pre>
-        <h2>最近方案</h2>
-        <pre id="scheme">尚未生成</pre>
-      </aside>
-    </main>
+    <section id="consult" class="pane active">
+      <div class="layout">
+        <section class="panel chat">
+          <div id="log" class="log" aria-live="polite"></div>
+          <form id="form" class="composer">
+            <input id="input" type="text" placeholder="描述现场需求，或回答追问" autocomplete="off" required />
+            <button type="submit">发送</button>
+          </form>
+          <div class="toolbar">
+            <button type="button" id="reset" class="ghost">新会话</button>
+            <span id="meta" class="meta"></span>
+          </div>
+        </section>
+        <aside class="panel side">
+          <h2>已收集信息</h2>
+          <pre id="slots">{}</pre>
+          <h2>方案草稿</h2>
+          <pre id="scheme">还没到出方案这一步</pre>
+          <h2>转人工留资</h2>
+          <form id="handoff" class="stack">
+            <input name="name" placeholder="称呼" required />
+            <input name="phone" placeholder="电话" required />
+            <textarea name="note" rows="2" placeholder="补充说明，可选"></textarea>
+            <button type="submit">提交给销售</button>
+            <p id="handoff-msg" class="meta"></p>
+          </form>
+        </aside>
+      </div>
+    </section>
+
+    <section id="knowledge" class="pane">
+      <div class="panel pad">
+        <h2>Ragflow 知识库</h2>
+        <p class="lede">检索走自托管 Ragflow。控制台可改文档、看召回；这里只看接入状态。示例资料待甲方替换。</p>
+        <p><a id="ragflow-link" href="http://127.0.0.1:18080" target="_blank" rel="noreferrer">打开 Ragflow 控制台</a></p>
+        <pre id="ragflow-status">加载中</pre>
+        <h2>本地语料（灌库来源）</h2>
+        <ul id="files"></ul>
+      </div>
+    </section>
+
+    <section id="leads" class="pane">
+      <div class="panel pad">
+        <h2>已留资</h2>
+        <p class="lede">演示库存在本机 SQLite，不是正式 CRM。</p>
+        <div id="lead-list" class="lead-list">暂无</div>
+      </div>
+    </section>
   </div>
   <script src="/static/app.js"></script>
 </body>

engine/app/static/styles.css

@@ -1,144 +1,75 @@
 :root {
-  --bg0: #0f1c17;
-  --bg1: #163528;
-  --panel: rgba(248, 250, 246, 0.94);
+  --bg0: #10211a;
+  --bg1: #1b3b2c;
+  --panel: #f6f8f4;
   --ink: #14231c;
-  --muted: #5c7268;
-  --accent: #1f7a4c;
-  --accent-2: #c4f06a;
+  --muted: #5d7368;
+  --accent: #1d7a4d;
   --line: rgba(20, 35, 28, 0.12);
-  --bot: #e7f2ea;
-  --user: #1f7a4c;
+  --bot: #e7f3eb;
 }
 
 * { box-sizing: border-box; }
 body {
   margin: 0;
   min-height: 100vh;
-  font-family: "Noto Sans SC", "DM Sans", sans-serif;
   color: var(--ink);
+  font-family: "Noto Sans SC", "DM Sans", sans-serif;
   background:
-    radial-gradient(1200px 600px at 10% -10%, #2f6b4f 0%, transparent 55%),
-    radial-gradient(900px 500px at 100% 0%, #8fd36a 0%, transparent 45%),
-    linear-gradient(160deg, var(--bg0), var(--bg1));
+    radial-gradient(900px 480px at 0% 0%, #3d7a58 0%, transparent 55%),
+    linear-gradient(165deg, var(--bg0), var(--bg1));
 }
+.shell { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; }
+.top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; color: #f4faf6; }
+.brand { margin: 0; font-family: "DM Sans", sans-serif; letter-spacing: 0.08em; font-size: 13px; color: #c6ef7a; }
+.top h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); }
+.status { font-size: 13px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.25); }
+.status.ok { background: #1d7a4d; }
+.status.bad { background: #8a3b2d; }
 
-.page { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
-.hero { color: #f4faf6; margin-bottom: 22px; }
-.brand {
-  margin: 0 0 8px;
-  font-family: "DM Sans", sans-serif;
-  letter-spacing: 0.04em;
-  font-weight: 700;
-  font-size: 14px;
-  color: var(--accent-2);
-}
-.hero h1 {
-  margin: 0 0 10px;
-  font-size: clamp(1.6rem, 3vw, 2.2rem);
-  line-height: 1.25;
-  font-weight: 700;
-}
-.sub { margin: 0; max-width: 52rem; color: rgba(244, 250, 246, 0.82); }
-.sub code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.9em;
-  background: rgba(0,0,0,0.25);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
+.tabs { display: flex; gap: 8px; margin: 18px 0; }
+.tab {
+  border: 0; background: rgba(255,255,255,0.12); color: #f4faf6;
+  border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer;
 }
+.tab.active { background: #f6f8f4; color: var(--ink); }
 
-.layout {
-  display: grid;
-  grid-template-columns: 1.4fr 0.9fr;
-  gap: 16px;
-}
-@media (max-width: 860px) {
-  .layout { grid-template-columns: 1fr; }
-}
+.pane { display: none; }
+.pane.active { display: block; }
+.layout { display: grid; grid-template-columns: 1.45fr 0.9fr; gap: 14px; }
+@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }
 
 .panel {
   background: var(--panel);
   border-radius: 18px;
-  border: 1px solid rgba(255,255,255,0.35);
-  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
-}
-
-.chat { display: flex; flex-direction: column; min-height: 560px; overflow: hidden; }
-.log {
-  flex: 1;
-  padding: 18px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.bubble {
-  max-width: 92%;
-  padding: 10px 12px;
-  border-radius: 12px;
-  white-space: pre-wrap;
-  line-height: 1.5;
-  font-size: 14px;
+  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
 }
+.chat { display: flex; flex-direction: column; min-height: 560px; }
+.log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+.bubble { max-width: 92%; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
 .bubble.bot { align-self: flex-start; background: var(--bot); }
-.bubble.user { align-self: flex-end; background: var(--user); color: #fff; }
-.bubble.sys { align-self: center; background: transparent; color: var(--muted); font-size: 12px; }
-
-.composer {
-  display: flex;
-  gap: 8px;
-  padding: 12px 14px;
-  border-top: 1px solid var(--line);
+.bubble.user { align-self: flex-end; background: var(--accent); color: white; }
+.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
+.composer input, .stack input, .stack textarea {
+  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font: inherit;
 }
-.composer input {
-  flex: 1;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 12px 14px;
-  font: inherit;
+.composer button, .stack button, .ghost {
+  border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-weight: 600; cursor: pointer;
 }
-.composer button, .ghost {
-  border: 0;
-  border-radius: 10px;
-  padding: 12px 16px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  background: var(--accent);
-  color: #fff;
+.composer button, .stack button { background: var(--accent); color: white; }
+.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
+.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 12px; }
+.meta, .lede { color: var(--muted); font-size: 13px; }
+.side, .pad { padding: 16px; }
+.side h2, .pad h2 { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
+.side h2:first-child, .pad h2:first-child { margin-top: 0; }
+pre {
+  margin: 0; padding: 10px; background: #eef5f0; border-radius: 10px;
+  font-size: 12px; overflow: auto; max-height: 180px; white-space: pre-wrap;
 }
-.ghost {
-  background: transparent;
-  color: var(--accent);
-  border: 1px solid var(--line);
-  padding: 8px 12px;
-}
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 0 14px 14px;
-}
-.meta { color: var(--muted); font-size: 12px; }
-
-.side { padding: 16px 18px 20px; }
-.side h2 {
-  margin: 12px 0 8px;
-  font-size: 13px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.side h2:first-child { margin-top: 0; }
-.side pre {
-  margin: 0;
-  padding: 12px;
-  background: #eef5f0;
-  border-radius: 10px;
-  font-size: 12px;
-  line-height: 1.45;
-  overflow: auto;
-  max-height: 220px;
+.stack { display: grid; gap: 8px; }
+.lead-list { display: grid; gap: 8px; }
+.lead {
+  padding: 10px 12px; border-radius: 10px; background: #eef5f0; font-size: 14px;
 }
+a { color: var(--accent); }