3 Commits
6 changed files with 223 additions and 33 deletions
+11 -2
View File
@@ -191,7 +191,15 @@ def list_rows(table):
page = max(1, int(request.args.get("page", 1))) page = max(1, int(request.args.get("page", 1)))
size = min(100, max(1, int(request.args.get("size", 20)))) size = min(100, max(1, int(request.args.get("size", 20))))
q = (request.args.get("q") or "").strip() q = (request.args.get("q") or "").strip()
# 排序:字段白名单校验(防注入),默认 id 降序
cols = _columns(table) cols = _columns(table)
valid_fields = {c["name"] for c in cols}
sort = request.args.get("sort", "") or "id"
if sort not in valid_fields:
sort = "id"
order = (request.args.get("order", "") or "desc").lower()
if order not in ("asc", "desc"):
order = "desc"
where, args = "", [] where, args = "", []
if q: if q:
fields = SEARCHABLE.get(table) or () fields = SEARCHABLE.get(table) or ()
@@ -200,10 +208,11 @@ def list_rows(table):
where = "WHERE " + " OR ".join(f"{f} LIKE ? ESCAPE '\\'" for f in fields) where = "WHERE " + " OR ".join(f"{f} LIKE ? ESCAPE '\\'" for f in fields)
args = [like] * len(fields) args = [like] * len(fields)
total = query_one(f"SELECT COUNT(*) AS c FROM {table} {where}", args)["c"] total = query_one(f"SELECT COUNT(*) AS c FROM {table} {where}", args)["c"]
rows = query(f"SELECT * FROM {table} {where} ORDER BY id DESC LIMIT ? OFFSET ?", rows = query(f"SELECT * FROM {table} {where} ORDER BY {sort} {order.upper()}, id {order.upper()} LIMIT ? OFFSET ?",
args + [size, (page - 1) * size]) args + [size, (page - 1) * size])
return jsonify({"table": table, "cn": TABLES[table], "columns": cols, return jsonify({"table": table, "cn": TABLES[table], "columns": cols,
"total": total, "page": page, "size": size, "rows": rows}) "total": total, "page": page, "size": size, "rows": rows,
"sort": sort, "order": order})
def get_row(table, rid): def get_row(table, rid):
+3
View File
@@ -46,6 +46,9 @@ body { background:var(--bg); color:var(--txt); font-family:"PingFang SC","Micros
table { width:100%; border-collapse:collapse; } table { width:100%; border-collapse:collapse; }
th, td { padding:9px 11px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; } th, td { padding:9px 11px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
th { background:var(--bg2); color:var(--sub); font-weight:600; font-size:12px; position:sticky; top:0; } th { background:var(--bg2); color:var(--sub); font-weight:600; font-size:12px; position:sticky; top:0; }
th.sortable { cursor:pointer; user-select:none; transition:.15s; }
th.sortable:hover { color:var(--orange2); }
th.sort-active { color:var(--orange2); }
tr:hover td { background:rgba(249,115,22,.05); } tr:hover td { background:rgba(249,115,22,.05); }
td.num { text-align:center; } td.num { text-align:center; }
.row-ops { display:flex; gap:6px; } .row-ops { display:flex; gap:6px; }
+19 -4
View File
@@ -4,7 +4,7 @@ const $$ = (s) => [...document.querySelectorAll(s)];
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c])); const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
let TOKEN = localStorage.getItem("nba_admin_token") || ""; let TOKEN = localStorage.getItem("nba_admin_token") || "";
let CUR = { table: "", page: 1, q: "" }; let CUR = { table: "", page: 1, q: "", sort: "id", order: "desc" };
let LOOKUPS = {}; // teams/players/leagues/sports → {id: name} let LOOKUPS = {}; // teams/players/leagues/sports → {id: name}
/* 字段中文名 */ /* 字段中文名 */
@@ -79,7 +79,7 @@ function switchPage(p) {
$("#page-config").classList.toggle("hidden", p !== "config"); $("#page-config").classList.toggle("hidden", p !== "config");
if (p === "stats") loadStats(); if (p === "stats") loadStats();
else if (p === "config") loadConfig(); else if (p === "config") loadConfig();
else { CUR = { table: p, page: 1, q: "" }; $("#tbl-search").value = ""; loadTable(); } else { CUR = { table: p, page: 1, q: "", sort: "id", order: "desc" }; $("#tbl-search").value = ""; loadTable(); }
} }
/* ================= 仪表盘 ================= */ /* ================= 仪表盘 ================= */
@@ -108,11 +108,15 @@ async function loadLookups() {
async function loadTable() { async function loadTable() {
$("#table-title").textContent = TITLE_CN[CUR.table] || CUR.table; $("#table-title").textContent = TITLE_CN[CUR.table] || CUR.table;
const d = await api(`/api/admin/${CUR.table}?page=${CUR.page}&size=20&q=${encodeURIComponent(CUR.q)}`); const d = await api(`/api/admin/${CUR.table}?page=${CUR.page}&size=20&q=${encodeURIComponent(CUR.q)}&sort=${encodeURIComponent(CUR.sort)}&order=${CUR.order}`);
const cols = d.columns.filter((c) => c.name !== "created_at"); const cols = d.columns.filter((c) => c.name !== "created_at");
const rows = d.rows; const rows = d.rows;
if (!Object.keys(LOOKUPS).length) await loadLookups().catch(() => {}); if (!Object.keys(LOOKUPS).length) await loadLookups().catch(() => {});
const thead = `<tr>${cols.map((c) => `<th>${esc(FIELD_CN[CUR.table]?.[c.name] || c.name)}</th>`).join("")}<th>操作</th></tr>`; const thead = `<tr>${cols.map((c) => {
const active = CUR.sort === c.name;
const arrow = active ? (CUR.order === "asc" ? " ▲" : " ▼") : "";
return `<th class="sortable ${active ? "sort-active" : ""}" data-sort="${c.name}" title="点击排序">${esc(FIELD_CN[CUR.table]?.[c.name] || c.name)}${arrow}</th>`;
}).join("")}<th>操作</th></tr>`;
const tbody = rows.map((r) => { const tbody = rows.map((r) => {
const tds = cols.map((c) => { const tds = cols.map((c) => {
let v = r[c.name]; let v = r[c.name];
@@ -141,6 +145,17 @@ $("#tbl-search-btn").addEventListener("click", () => { CUR.q = $("#tbl-search").
$("#tbl-search").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#tbl-search-btn").click(); }); $("#tbl-search").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#tbl-search-btn").click(); });
$("#tbl-add").addEventListener("click", () => openEdit(CUR.table, null)); $("#tbl-add").addEventListener("click", () => openEdit(CUR.table, null));
/* 表头点击排序:首次点击升序,再点切降序,循环 */
$("#tbl-wrap").addEventListener("click", (e) => {
const th = e.target.closest("th[data-sort]");
if (!th) return;
const f = th.dataset.sort;
if (CUR.sort === f) CUR.order = CUR.order === "asc" ? "desc" : "asc";
else { CUR.sort = f; CUR.order = "asc"; }
CUR.page = 1;
loadTable();
});
/* ================= 编辑弹窗 ================= */ /* ================= 编辑弹窗 ================= */
let EDIT = { table: "", id: null }; let EDIT = { table: "", id: null };
+167 -25
View File
@@ -6,6 +6,36 @@ const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "
const chatHistory = []; const chatHistory = [];
let chatBusy = false; 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 ================= */ /* ================= Markdown 渲染(marked 本地库,先转义防 XSS ================= */
function md(text) { function md(text) {
if (window.marked) { if (window.marked) {
@@ -61,10 +91,14 @@ function loadView(v) {
} }
/* ================= 对话 ================= */ /* ================= 对话 ================= */
function addMsg(role, html) { function addMsg(role, html, opts = {}) {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = `msg ${role}`; 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").appendChild(div);
$("#chat-list").scrollTop = $("#chat-list").scrollHeight; $("#chat-list").scrollTop = $("#chat-list").scrollHeight;
return div; return div;
@@ -72,7 +106,7 @@ function addMsg(role, html) {
function showTyping() { function showTyping() {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = "msg bot"; 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").appendChild(div);
$("#chat-list").scrollTop = $("#chat-list").scrollHeight; $("#chat-list").scrollTop = $("#chat-list").scrollHeight;
return div; return div;
@@ -90,6 +124,28 @@ function cardHtml(c) {
return ""; 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>`;
}
// 需求3markdown 渲染 + 需求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) { async function sendChat(text) {
if (chatBusy) return; if (chatBusy) return;
chatBusy = true; chatBusy = true;
@@ -102,26 +158,18 @@ async function sendChat(text) {
const d = await r.json(); const d = await r.json();
typing.remove(); typing.remove();
if (d.error) { addMsg("bot", `⚠️ ${esc(d.error)}`); return; } 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>`;
}
// 需求3markdown 渲染 + 需求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 }); 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) // 大模型预测下一轮快捷问题(异步刷新底部 chips)
const mark = chatHistory.length; const mark = chatHistory.length;
refreshChips(mark); refreshChips(mark);
@@ -133,12 +181,100 @@ async function sendChat(text) {
$("#send-btn").disabled = false; $("#send-btn").disabled = false;
} }
} }
$("#send-btn").addEventListener("click", () => { const v = $("#chat-input").value.trim(); if (v) { $("#chat-input").value = ""; sendChat(v); } }); $("#send-btn").addEventListener("click", () => { const v = $("#chat-input").value.trim(); if (v) { $("#chat-input").value = ""; autoResizeInput(); sendChat(v); } });
$("#chat-input").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#send-btn").click(); });
/* 输入框多行自适应:超一行自动增高,最多 4 行(约90px);Enter 发送,Shift+Enter 换行 */
const chatInput = $("#chat-input");
const INPUT_MAX_H = 90;
function autoResizeInput() {
chatInput.style.height = "auto";
chatInput.style.height = Math.min(chatInput.scrollHeight, INPUT_MAX_H) + "px";
}
chatInput.addEventListener("input", autoResizeInput);
chatInput.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
$("#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) */ /* 快捷问题:点击 → 自动填入输入框并自动提交(需求2) */
function askQuick(q) { function askQuick(q) {
$("#chat-input").value = q; $("#chat-input").value = q;
autoResizeInput();
sendChat(q); sendChat(q);
} }
@@ -155,8 +291,14 @@ async function refreshChips(mark) {
} catch (e) {} } catch (e) {}
} }
/* 聊天区事件委托:快捷语句 / 实体标记 / 新闻链接 / 卡片 */ /* 聊天区事件委托:快捷语句 / 操作按钮(复制·重新生成) / 实体标记 / 新闻链接 / 卡片 */
$("#chat-list").addEventListener("click", (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"); const q = e.target.closest(".quick-q");
if (q) { e.preventDefault(); askQuick(q.textContent); return; } if (q) { e.preventDefault(); askQuick(q.textContent); return; }
const ent = e.target.closest(".entity, .ecard"); const ent = e.target.closest(".entity, .ecard");
+8 -1
View File
@@ -31,6 +31,13 @@
<!-- ================= 对话 ================= --> <!-- ================= 对话 ================= -->
<section id="view-chat" class="view active"> <section id="view-chat" class="view active">
<div class="chat-wrap"> <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 id="chat-list" class="chat-list">
<div class="msg bot" id="welcome-msg"> <div class="msg bot" id="welcome-msg">
<div class="avatar">🤖</div> <div class="avatar">🤖</div>
@@ -42,7 +49,7 @@
</div> </div>
<div class="chips" id="chips"></div> <div class="chips" id="chips"></div>
<div class="input-bar"> <div class="input-bar">
<input id="chat-input" type="text" placeholder="输入问题,如:湖人最近比赛怎么样?" autocomplete="off"> <textarea id="chat-input" rows="1" placeholder="输入问题,如:湖人最近比赛怎么样?Enter 发送,Shift+Enter 换行)" autocomplete="off"></textarea>
<button id="send-btn">发送</button> <button id="send-btn">发送</button>
</div> </div>
</div> </div>
+15 -1
View File
@@ -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-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; } .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 { display: flex; gap: 10px; max-width: 88%; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; } .msg.user { align-self: flex-end; flex-direction: row-reverse; }
@@ -97,7 +109,9 @@ main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16
.chips button:hover { border-color: var(--orange2); color: var(--orange2); } .chips button:hover { border-color: var(--orange2); color: var(--orange2); }
.input-bar { display: flex; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 18px; } .input-bar { display: flex; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 18px; }
#chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-size: 15px; } #chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-size: 15px; line-height: 1.5; resize: none; overflow-y: auto; max-height: 90px; padding: 5px 0; font-family: inherit; }
#chat-input::-webkit-scrollbar { width: 5px; }
#chat-input::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#send-btn { background: linear-gradient(135deg, #f97316, #ea580c); border: none; color: #fff; padding: 10px 24px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; } #send-btn { background: linear-gradient(135deg, #f97316, #ea580c); border: none; color: #fff; padding: 10px 24px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
#send-btn:disabled { opacity: .5; cursor: wait; } #send-btn:disabled { opacity: .5; cursor: wait; }