v1.2.6 对话操作增强：回答块下方复制/重新生成图标按钮+完成时间(HH:MM)；对话工具栏分享(弹窗预览一键复制全文)与清空从头对话
This commit is contained in:
+150
-23
@@ -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 = `<div class="avatar">${role === "user" ? "🧑" : "🤖"}</div><div class="bubble">${html}</div>`;
|
||||
if (opts.idx !== undefined) div.dataset.idx = opts.idx;
|
||||
const actions = role === "bot"
|
||||
? `<div class="msg-actions"><button class="act-btn" title="复制回答">📋</button><button class="act-btn" title="重新生成">🔄</button><span class="msg-time">${nowTime()}</span></div>`
|
||||
: `<div class="msg-actions user-time"><span class="msg-time">${nowTime()}</span></div>`;
|
||||
div.innerHTML = `<div class="avatar">${role === "user" ? "🧑" : "🤖"}</div><div class="msg-body"><div class="bubble">${html}</div>${actions}</div>`;
|
||||
$("#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 class="avatar">🤖</div><div class="bubble"><span class="typing"><i></i><i></i><i></i></span></div>`;
|
||||
div.innerHTML = `<div class="avatar">🤖</div><div class="msg-body"><div class="bubble"><span class="typing"><i></i><i></i><i></i></span></div></div>`;
|
||||
$("#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 += `<details class="refs"><summary>📰 参考资讯（${d.news_refs.length}）</summary><ul>` +
|
||||
d.news_refs.map((n) => `<li><a href="#" data-news="${n.id}">${esc(n.title)}</a>` +
|
||||
(n.source ? `<span class="ref-src">${esc(n.source)}${n.publish_time ? " · " + esc(n.publish_time.slice(0, 10)) : ""}</span>` : "") + `</li>`).join("") +
|
||||
`</ul></details>`;
|
||||
}
|
||||
// 需求3：markdown 渲染 + 需求5：实体特殊标记
|
||||
html += `<div class="md">${renderMdWithEntities(d.reply, d.entities)}</div>`;
|
||||
// 需求5：快速查看入口卡片
|
||||
if (d.cards && d.cards.length) {
|
||||
html += `<div class="entity-cards">${d.cards.map(cardHtml).join("")}</div>`;
|
||||
}
|
||||
if (d.sources && d.sources.length) {
|
||||
html += "<div class='src-line'>" + d.sources.map((s) => `<span class="src-tag">来源：${esc(s.tool)}</span>`).join("") + "</div>";
|
||||
}
|
||||
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 += `<details class="refs"><summary>📰 参考资讯（${d.news_refs.length}）</summary><ul>` +
|
||||
d.news_refs.map((n) => `<li><a href="#" data-news="${n.id}">${esc(n.title)}</a>` +
|
||||
(n.source ? `<span class="ref-src">${esc(n.source)}${n.publish_time ? " · " + esc(n.publish_time.slice(0, 10)) : ""}</span>` : "") + `</li>`).join("") +
|
||||
`</ul></details>`;
|
||||
}
|
||||
// 需求3：markdown 渲染 + 需求5：实体特殊标记
|
||||
html += `<div class="md">${renderMdWithEntities(d.reply, d.entities)}</div>`;
|
||||
// 需求5：快速查看入口卡片
|
||||
if (d.cards && d.cards.length) {
|
||||
html += `<div class="entity-cards">${d.cards.map(cardHtml).join("")}</div>`;
|
||||
}
|
||||
if (d.sources && d.sources.length) {
|
||||
html += "<div class='src-line'>" + d.sources.map((s) => `<span class="src-tag">来源：${esc(s.tool)}</span>`).join("") + "</div>";
|
||||
}
|
||||
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 = `<span class="typing"><i></i><i></i><i></i></span>`;
|
||||
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 = `<button class="act-btn" title="复制回答">📋</button><button class="act-btn" title="重新生成">🔄</button><span class="msg-time">${nowTime()}</span>`;
|
||||
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(`
|
||||
<h2>🔗 分享对话</h2>
|
||||
<div class="en">共 ${chatHistory.length} 轮 · 复制后粘贴到任意聊天或文档</div>
|
||||
<textarea readonly class="share-box" style="width:100%;height:280px;margin-top:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--txt);font-size:13px;line-height:1.7;resize:vertical">${esc(text)}</textarea>
|
||||
<div style="margin-top:12px;text-align:right"><button class="btn" onclick="copyShare()">📋 复制全文</button></div>
|
||||
`);
|
||||
}
|
||||
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");
|
||||
|
||||
@@ -31,6 +31,13 @@
|
||||
<!-- ================= 对话 ================= -->
|
||||
<section id="view-chat" class="view active">
|
||||
<div class="chat-wrap">
|
||||
<div class="chat-toolbar">
|
||||
<span class="ct-title">💬 对话</span>
|
||||
<div>
|
||||
<button class="tool-btn" id="share-btn" title="分享对话">🔗 分享</button>
|
||||
<button class="tool-btn" id="clear-btn" title="清空对话从头开始">🗑️ 清空</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-list" class="chat-list">
|
||||
<div class="msg bot" id="welcome-msg">
|
||||
<div class="avatar">🤖</div>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user