diff --git a/static/app.js b/static/app.js index 9765a1b..a469bd2 100644 --- a/static/app.js +++ b/static/app.js @@ -6,6 +6,36 @@ const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", " const chatHistory = []; let chatBusy = false; +/* 简洁版当前时间 HH:MM */ +function nowTime() { + const d = new Date(); + return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`; +} + +/* 轻提示 */ +function toast(msg) { + let t = document.getElementById("toast"); + if (!t) { t = document.createElement("div"); t.id = "toast"; document.body.appendChild(t); } + t.textContent = msg; + t.classList.add("show"); + clearTimeout(t._timer); + t._timer = setTimeout(() => t.classList.remove("show"), 1800); +} + +/* 复制文本(Clipboard API + 降级) */ +async function copyText(text) { + try { + await navigator.clipboard.writeText(text); + } catch (e) { + const ta = document.createElement("textarea"); + ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; + document.body.appendChild(ta); ta.select(); + document.execCommand("copy"); + ta.remove(); + } + toast("✅ 已复制"); +} + /* ================= Markdown 渲染(marked 本地库,先转义防 XSS) ================= */ function md(text) { if (window.marked) { @@ -61,10 +91,14 @@ function loadView(v) { } /* ================= 对话 ================= */ -function addMsg(role, html) { +function addMsg(role, html, opts = {}) { const div = document.createElement("div"); div.className = `msg ${role}`; - div.innerHTML = `
${role === "user" ? "🧑" : "🤖"}
${html}
`; + if (opts.idx !== undefined) div.dataset.idx = opts.idx; + const actions = role === "bot" + ? `
${nowTime()}
` + : `
${nowTime()}
`; + div.innerHTML = `
${role === "user" ? "🧑" : "🤖"}
${html}
${actions}
`; $("#chat-list").appendChild(div); $("#chat-list").scrollTop = $("#chat-list").scrollHeight; return div; @@ -72,7 +106,7 @@ function addMsg(role, html) { function showTyping() { const div = document.createElement("div"); div.className = "msg bot"; - div.innerHTML = `
🤖
`; + div.innerHTML = `
🤖
`; $("#chat-list").appendChild(div); $("#chat-list").scrollTop = $("#chat-list").scrollHeight; return div; @@ -90,6 +124,28 @@ function cardHtml(c) { return ""; } +/* 组装回答气泡 HTML(参考资讯 + markdown实体 + 卡片 + 来源) */ +function buildBotHtml(d) { + let html = ""; + // 需求4:参考资讯(新闻/百科链接),默认折叠,位于回答块上方 + if (d.news_refs && d.news_refs.length) { + html += `
📰 参考资讯(${d.news_refs.length})
`; + } + // 需求3:markdown 渲染 + 需求5:实体特殊标记 + html += `
${renderMdWithEntities(d.reply, d.entities)}
`; + // 需求5:快速查看入口卡片 + if (d.cards && d.cards.length) { + html += `
${d.cards.map(cardHtml).join("")}
`; + } + if (d.sources && d.sources.length) { + html += "
" + d.sources.map((s) => `来源:${esc(s.tool)}`).join("") + "
"; + } + return html; +} + async function sendChat(text) { if (chatBusy) return; chatBusy = true; @@ -102,26 +158,18 @@ async function sendChat(text) { const d = await r.json(); typing.remove(); if (d.error) { addMsg("bot", `⚠️ ${esc(d.error)}`); return; } - let html = ""; - // 需求4:参考资讯(新闻/百科链接),默认折叠,位于回答块上方 - if (d.news_refs && d.news_refs.length) { - html += `
📰 参考资讯(${d.news_refs.length})
`; - } - // 需求3:markdown 渲染 + 需求5:实体特殊标记 - html += `
${renderMdWithEntities(d.reply, d.entities)}
`; - // 需求5:快速查看入口卡片 - if (d.cards && d.cards.length) { - html += `
${d.cards.map(cardHtml).join("")}
`; - } - if (d.sources && d.sources.length) { - html += "
" + d.sources.map((s) => `来源:${esc(s.tool)}`).join("") + "
"; - } - addMsg("bot", html); chatHistory.push({ user: text, assistant: d.reply }); - if (chatHistory.length > 20) chatHistory.splice(0, chatHistory.length - 20); + const idx = chatHistory.length - 1; + addMsg("bot", buildBotHtml(d), { idx }); + if (chatHistory.length > 20) { + const removed = chatHistory.length - 20; + chatHistory.splice(0, removed); + document.querySelectorAll("#chat-list .msg[data-idx]").forEach((m) => { + const i = parseInt(m.dataset.idx); + if (i < removed) m.remove(); + else m.dataset.idx = i - removed; + }); + } // 大模型预测下一轮快捷问题(异步刷新底部 chips) const mark = chatHistory.length; refreshChips(mark); @@ -136,6 +184,79 @@ async function sendChat(text) { $("#send-btn").addEventListener("click", () => { const v = $("#chat-input").value.trim(); if (v) { $("#chat-input").value = ""; sendChat(v); } }); $("#chat-input").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#send-btn").click(); }); +/* 复制当前回答(纯文本) */ +function copyMsg(btn) { + const bubble = btn.closest(".msg").querySelector(".bubble"); + copyText(bubble.innerText.trim()); +} + +/* 重新生成:以该轮之前的上下文重新提问,替换本条回答,截断后续对话 */ +async function regenerate(btn) { + const msgEl = btn.closest(".msg"); + const idx = parseInt(msgEl.dataset.idx); + if (isNaN(idx) || chatBusy) return; + if (idx >= chatHistory.length) return; + // 截断:删除该条之后的对话(上下文已变) + chatHistory.splice(idx + 1); + document.querySelectorAll("#chat-list .msg[data-idx]").forEach((m) => { + if (parseInt(m.dataset.idx) > idx) m.remove(); + }); + const userText = chatHistory[idx].user; + const body = msgEl.querySelector(".msg-body"); + const bubble = msgEl.querySelector(".bubble"); + bubble.innerHTML = ``; + msgEl.querySelector(".msg-actions")?.remove(); + chatBusy = true; + try { + const r = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ message: userText, history: chatHistory.slice(0, idx).map((h) => ({ user: h.user, assistant: h.assistant })) }) }); + const d = await r.json(); + if (d.error) { bubble.innerHTML = `⚠️ ${esc(d.error)}`; return; } + bubble.innerHTML = buildBotHtml(d); + const actions = document.createElement("div"); + actions.className = "msg-actions"; + actions.innerHTML = `${nowTime()}`; + body.appendChild(actions); + chatHistory[idx] = { user: userText, assistant: d.reply }; + refreshChips(chatHistory.length); + } catch (e) { + bubble.innerHTML = "⚠️ 网络异常,请稍后再试。"; + } finally { + chatBusy = false; + } +} + +/* 分享:弹窗展示对话全文 + 一键复制 */ +function shareChat() { + if (!chatHistory.length) { toast("还没有对话内容"); return; } + const text = chatHistory.map((h) => `🧑 ${h.user}\n🤖 ${h.assistant}`).join("\n\n"); + openModal(` +

🔗 分享对话

+
共 ${chatHistory.length} 轮 · 复制后粘贴到任意聊天或文档
+ +
+ `); +} +function copyShare() { + const ta = document.querySelector(".share-box"); + if (ta) copyText(ta.value); +} + +/* 清空对话从头开始 */ +function clearChat() { + if (!chatHistory.length) { toast("对话已经是空的"); return; } + if (!confirm("确定清空当前对话吗?将从头开始。")) return; + chatHistory.length = 0; + const list = $("#chat-list"); + const welcome = document.getElementById("welcome-msg"); + const w = welcome ? welcome.outerHTML : ""; + list.innerHTML = w; + loadBoot(); + toast("🗑️ 对话已清空"); +} +$("#share-btn").addEventListener("click", shareChat); +$("#clear-btn").addEventListener("click", clearChat); + /* 快捷问题:点击 → 自动填入输入框并自动提交(需求2) */ function askQuick(q) { $("#chat-input").value = q; @@ -155,8 +276,14 @@ async function refreshChips(mark) { } catch (e) {} } -/* 聊天区事件委托:快捷语句 / 实体标记 / 新闻链接 / 卡片 */ +/* 聊天区事件委托:快捷语句 / 操作按钮(复制·重新生成) / 实体标记 / 新闻链接 / 卡片 */ $("#chat-list").addEventListener("click", (e) => { + const act = e.target.closest(".act-btn"); + if (act) { + if (act.title.includes("复制")) copyMsg(act); + else if (act.title.includes("重新生成")) regenerate(act); + return; + } const q = e.target.closest(".quick-q"); if (q) { e.preventDefault(); askQuick(q.textContent); return; } const ent = e.target.closest(".entity, .ecard"); diff --git a/static/index.html b/static/index.html index 5de3b98..822604a 100644 --- a/static/index.html +++ b/static/index.html @@ -31,6 +31,13 @@
+
+ 💬 对话 +
+ + +
+
🤖
diff --git a/static/style.css b/static/style.css index 02e5635..39fb612 100644 --- a/static/style.css +++ b/static/style.css @@ -25,6 +25,18 @@ main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16 /* ---------- 对话 ---------- */ .chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 480px; } +.chat-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 0 4px; } +.ct-title { color: var(--sub); font-size: 13px; font-weight: 600; letter-spacing: 1px; } +.tool-btn { background: var(--bg2); border: 1px solid var(--line); color: var(--sub); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; margin-left: 6px; transition: .15s; } +.tool-btn:hover { color: var(--orange2); border-color: var(--orange2); } +.msg-body { flex: 1; min-width: 0; } +.msg-actions { display: flex; align-items: center; gap: 2px; margin-top: 5px; padding-left: 4px; opacity: .8; } +.msg.user .msg-actions { justify-content: flex-end; padding-left: 0; padding-right: 4px; } +.act-btn { background: transparent; border: none; color: var(--sub); font-size: 13px; cursor: pointer; padding: 3px 6px; border-radius: 6px; line-height: 1; transition: .15s; } +.act-btn:hover { color: var(--orange2); background: rgba(249,115,22,.12); } +.msg-time { font-size: 11px; color: var(--sub); margin-left: 6px; } +#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(12px); background: var(--bg2); border: 1px solid var(--line); color: var(--txt); padding: 9px 20px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; z-index: 300; box-shadow: 0 6px 24px rgba(0,0,0,.5); } +#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .chat-list { flex: 1; overflow-y: auto; padding: 8px 4px 16px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .msg { display: flex; gap: 10px; max-width: 88%; } .msg.user { align-self: flex-end; flex-direction: row-reverse; }