chenmoranzhi/writing-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预设兼容：按真实抓包对齐装配与包装层，补上声明式工具与预设正则。

Browse Source 
- 装配只认 prompt_order.enabled；squash_system_messages 只合并相邻 system（新增 system 档，连接符按酒馆用单换行）
- 包装层：new_chat_prompt、示例对话（new_example_chat_prompt + <START> 切段 + name）、角色卡三块与 personality_format/scenario_format、{{user}}/{{char}} 取值、任务契约并进预设条目
- 工具协议：按 ToolBindings / 伪工具协议数据声明真 tools（presetToolPolicy=preset），工具描述用到的条目不再重复作为消息发出
- 正则：promptOnly 作用于对话历史（含 depth 过滤）、写入时脚本改写回复；{{//}} 注释按配平扫描
- tools/st-request-diff：真假上游抓包对比工具、三份预设的机制结论与实测报告
This commit is contained in:
chenmoranzhi
2026-10-23 00:13:08 +08:00
parent ed09e5c831
commit 9dc927282f
94 changed files with 11558 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/chat-keep-stats.js
+141
View File
@@ -0,0 +1,141 @@
/**
* 直聊「保留」计数器：
* 按会话记下每个模型被保留（点「保留此回复」）了多少次，存在浏览器缓存里。
* 只算数，不碰 DOM。
*/
const STORAGE_KEY = "wa-direct-chat-keep-stats-v1";
function storage() {
try {
return globalThis.localStorage || null;
} catch {
return null;
}
}
function readAll() {
const ls = storage();
if (!ls) return {};
try {
const parsed = JSON.parse(ls.getItem(STORAGE_KEY) || "{}");
return parsed && typeof parsed === "object" && !Array.isArray(parsed)
? parsed
: {};
} catch {
return {};
}
}
function writeAll(all) {
const ls = storage();
if (!ls) return;
try {
ls.setItem(STORAGE_KEY, JSON.stringify(all));
} catch {
/* 存不进缓存也不影响当前会话 */
}
}
function isBucket(value) {
return Boolean(value) && typeof value === "object" && !Array.isArray(value);
}
/**
* 模型身份：同一配置同一型号算同一个模型，
* 窗口被删掉再加回来（窗口 id 变了）也还认作它。
*/
export function keepStatId(w) {
const model = String(w?.model || "");
const key = String(w?.profileId || w?.profileName || model || "unknown");
return model && model !== key ? `${key}::${model}` : key;
}
/** 展示名与型号：配置名 · 型号，重复时只留一个 */
export function keepStatText(w) {
const model = String(w?.model || "");
const label = String(
w?.profileName || w?.profileId || model || "未知模型",
);
return { id: keepStatId(w), label, model: model === label ? "" : model };
}
/** 按次数降序，同次数再按名字排 */
export function sortKeepStats(entries) {
return [...entries].sort(
(a, b) =>
Number(b.count) - Number(a.count) ||
String(a.label).localeCompare(String(b.label), "zh-CN"),
);
}
/** 条状图宽度百分比：独占一行时满格，次数少的也至少留一点可见宽度 */
export function keepStatPercent(count, max) {
const top = Number(max) || 0;
const value = Number(count) || 0;
if (top <= 0 || value <= 0) return 0;
return Math.max(6, Math.min(100, Math.round((value / top) * 100)));
}
export function readKeepStats(conversationId) {
if (!conversationId) return [];
const bucket = readAll()[conversationId];
if (!isBucket(bucket)) return [];
const entries = Object.entries(bucket).map(([id, value]) => ({
id,
label: String(value?.label || id),
model: String(value?.model || ""),
count: Math.max(1, Number(value?.count) || 0),
}));
return sortKeepStats(entries);
}
export function keepStatTotal(entries) {
return entries.reduce((sum, entry) => sum + (Number(entry.count) || 0), 0);
}
/**
* 加减一次保留次数；减到 0 就把这个模型从记录里删掉。
* @param {string} conversationId
* @param {{profileId?: string, profileName?: string, model?: string}} window
* @param {number} [delta] 保留 +1、取消保留 -1
*/
export function bumpKeepStats(conversationId, window, delta = 1) {
if (!conversationId || !window) return readKeepStats(conversationId);
const step = Number(delta) || 0;
if (!step) return readKeepStats(conversationId);
const all = readAll();
const bucket = isBucket(all[conversationId])
? { ...all[conversationId] }
: {};
const { id, label, model } = keepStatText(window);
const before = isBucket(bucket[id]) ? Number(bucket[id].count) || 0 : 0;
const count = Math.max(0, before + step);
if (count > 0) bucket[id] = { label, model, count };
else delete bucket[id];
if (Object.keys(bucket).length) all[conversationId] = bucket;
else delete all[conversationId];
writeAll(all);
return readKeepStats(conversationId);
}
/** 清掉一个会话的计数（会话被删时用） */
export function clearKeepStats(conversationId) {
if (!conversationId) return;
const all = readAll();
if (!(conversationId in all)) return;
delete all[conversationId];
writeAll(all);
}
/** 临时会话存成持久会话时，把计数跟着搬到新会话上 */
export function copyKeepStats(fromId, toId) {
if (!fromId || !toId || fromId === toId) return readKeepStats(toId);
const all = readAll();
const bucket = all[fromId];
if (!isBucket(bucket)) return readKeepStats(toId);
all[toId] = { ...(isBucket(all[toId]) ? all[toId] : {}), ...bucket };
delete all[fromId];
writeAll(all);
return readKeepStats(toId);
}
web/chat-scroll.js
+52
View File
@@ -0,0 +1,52 @@
/**
* 直聊的滚轮分配：指针在哪张卡片上，就先滚那张卡片的正文；
* 卡片到顶 / 到底后，这一格滚轮剩下的距离交给外面的大滚动条。
* 只算数，不碰 DOM，方便单测。
*/
function clamp(value, min, max) {
return Math.min(max, Math.max(min, value));
}
/**
* @param {object} input
* @param {number} [input.cardScrollTop] 卡片正文当前滚动位置
* @param {number} [input.cardScrollMax] 卡片正文最多还能滚多少（0 = 不可滚）
* @param {number} [input.deltaY] 这一格滚轮的距离，向下为正
* @param {number} [input.streamScrollTop] 大滚动条当前位置
* @param {number} [input.streamScrollMax] 大滚动条最多还能滚多少
* @returns {{ cardDelta: number, streamDelta: number, rest: number }}
* `cardDelta` / `streamDelta` 是各自实际该滚的距离，`rest` 是两边都到头后没用掉的距离。
*/
export function planWheelScroll({
cardScrollTop = 0,
cardScrollMax = 0,
deltaY = 0,
streamScrollTop = 0,
streamScrollMax = 0,
} = {}) {
const plan = { cardDelta: 0, streamDelta: 0, rest: 0 };
let rest = Number(deltaY) || 0;
if (!rest) return plan;
if (cardScrollMax > 0) {
const next = clamp(cardScrollTop + rest, 0, cardScrollMax);
const applied = next - cardScrollTop;
if (applied) {
plan.cardDelta = applied;
rest -= applied;
}
}
if (rest && streamScrollMax > 0) {
const next = clamp(streamScrollTop + rest, 0, streamScrollMax);
const applied = next - streamScrollTop;
if (applied) {
plan.streamDelta = applied;
rest -= applied;
}
}
plan.rest = rest;
return plan;
}
web/chat.css
+570 -18
View File
@@ -1,11 +1,85 @@
.chat-shell {
--rail-left: minmax(200px, 240px);
--rail-right: minmax(260px, 320px);
display: grid;
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(260px, 320px);
grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
min-height: 0;
flex: 1;
}
/* 侧栏收起：宽度归零，主区仍固定在第 2 列，卡片直接变宽 */
.chat-shell.is-left-hidden {
--rail-left: 0px;
}
.chat-shell.is-left-hidden .chat-rail {
display: none;
}
.chat-shell.is-right-hidden {
--rail-right: 0px;
}
.chat-shell.is-right-hidden .chat-context {
display: none;
}
/* 侧栏边缘的收起/展开小把手 */
.chat-rail-toggle,
.chat-rail-reopen {
position: absolute;
top: 10px;
z-index: 4;
width: 18px;
height: 42px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--st-border-strong);
border-radius: 8px;
background: var(--st-surface);
color: var(--st-muted);
font: inherit;
font-size: 13px;
line-height: 1;
cursor: pointer;
opacity: 0.75;
}
.chat-rail-toggle:hover,
.chat-rail-toggle:focus-visible,
.chat-rail-reopen:hover,
.chat-rail-reopen:focus-visible {
opacity: 1;
color: var(--st-accent);
border-color: var(--st-accent);
background: var(--st-accent-soft);
outline: none;
}
.chat-rail-reopen[hidden] {
display: none;
}
.chat-rail-toggle-left {
right: -9px;
}
.chat-rail-toggle-right {
left: -9px;
}
.chat-rail-reopen-left {
left: 2px;
}
.chat-rail-reopen-right {
right: 2px;
}
.chat-rail {
grid-column: 1;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
@@ -123,6 +197,14 @@
color: var(--st-muted);
}
.chat-rail-item-actions {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 2px;
}
.chat-rail-item-copy,
.chat-rail-item-del {
flex-shrink: 0;
border: 0;
@@ -130,13 +212,28 @@
color: var(--st-faint);
cursor: pointer;
padding: 2px 4px;
font: inherit;
font-size: 12px;
}
.chat-rail-item-del:hover {
.chat-rail-item-copy:hover,
.chat-rail-item-copy:focus-visible {
color: var(--st-text);
}
.chat-rail-item-del:hover,
.chat-rail-item-del:focus-visible {
color: var(--st-danger);
}
.chat-rail-item-main:focus-visible,
.chat-rail-item-copy:focus-visible,
.chat-rail-item-del:focus-visible,
.st-btn:focus-visible {
outline: 2px solid var(--st-accent);
outline-offset: 2px;
}
.chat-rail-note {
margin: 0;
font-size: 11px;
@@ -145,6 +242,8 @@
}
.chat-main {
grid-column: 2;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
@@ -202,6 +301,8 @@
}
.chat-context {
grid-column: 3;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
@@ -212,18 +313,12 @@
.chat-context-head {
flex-shrink: 0;
padding: 12px 14px 8px;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--st-border);
}
.chat-context-head h2 {
margin: 0;
font-size: 14px;
font-weight: 650;
}
.chat-context-sub {
margin: 4px 0 0;
margin: 0;
font-size: 11px;
color: var(--st-muted);
line-height: 1.35;
@@ -266,9 +361,139 @@
.chat-shell-editor-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 4px;
}
/* 右侧面板的两个页签：上下文 / 保留统计 */
.chat-context-tabs {
flex-shrink: 0;
display: flex;
gap: 2px;
padding: 8px 14px 0;
border-bottom: 1px solid var(--st-border);
}
.chat-context-tab {
border: 1px solid transparent;
border-bottom: 0;
border-radius: 6px 6px 0 0;
background: transparent;
color: var(--st-muted);
font: inherit;
font-size: 12px;
line-height: 1;
padding: 7px 10px;
cursor: pointer;
}
.chat-context-tab:hover,
.chat-context-tab:focus-visible {
color: var(--st-text);
background: color-mix(in srgb, var(--st-muted) 10%, transparent);
outline: none;
}
.chat-context-tab.is-active {
border-color: var(--st-border);
background: var(--st-surface);
color: var(--st-text);
font-weight: 600;
margin-bottom: -1px;
}
.chat-shell-editor[hidden],
.chat-keep-stats[hidden] {
display: none !important;
}
/* 保留统计：条状图，按次数降序 */
.chat-keep-stats {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 14px 16px;
overflow: auto;
}
.chat-keep-stats-hint {
margin: 0;
font-size: 11px;
line-height: 1.4;
color: var(--st-muted);
}
.chat-keep-stats-list {
display: grid;
gap: 10px;
align-content: start;
}
.chat-keep-bar {
display: grid;
gap: 4px;
}
.chat-keep-bar-head {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.chat-keep-bar-name {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 600;
color: var(--st-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-keep-bar-count {
flex-shrink: 0;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--st-muted);
}
.chat-keep-bar-track {
height: 8px;
border-radius: 99px;
background: color-mix(in srgb, var(--st-muted) 14%, transparent);
overflow: hidden;
}
.chat-keep-bar-fill {
height: 100%;
border-radius: 99px;
background: color-mix(in srgb, var(--st-accent) 72%, var(--st-muted));
}
.chat-keep-bar-model {
margin: 0;
font-size: 11px;
color: var(--st-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-keep-stats-foot {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.chat-keep-stats-foot .st-btn {
font-size: 11px;
padding: 4px 8px;
}
/* —— 模型竞技场：用户气泡 + 横向回复卡片 —— */
.chat-arena {
position: relative;
@@ -487,6 +712,100 @@
font-size: 14px;
}
.chat-user-bubble.is-editing {
width: min(92%, 42rem);
}
.chat-user-foot,
.chat-user-edit-bar {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 2px;
width: 100%;
}
.chat-turn-variants {
display: inline-flex;
align-items: center;
gap: 0;
margin-right: auto;
}
.chat-turn-variant-count {
min-width: 2.2rem;
text-align: center;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: #64748b;
}
.chat-user-foot .chat-nav-btn {
width: 22px;
height: 22px;
border-radius: 6px;
color: #64748b;
}
.chat-user-act {
border: 0;
background: transparent;
color: #475569;
font: inherit;
font-size: 12px;
line-height: 1;
padding: 3px 6px;
border-radius: 6px;
cursor: pointer;
}
.chat-user-act:hover,
.chat-user-act:focus-visible {
color: #1d4ed8;
background: rgba(255, 255, 255, 0.72);
outline: none;
}
.chat-user-act.is-primary {
color: #1d4ed8;
font-weight: 600;
}
.chat-user-act:disabled {
opacity: 0.4;
cursor: default;
}
.chat-user-edit {
width: 100%;
min-height: 4.5rem;
max-height: 320px;
box-sizing: border-box;
resize: vertical;
border: 1px solid #93c5fd;
border-radius: 8px;
background: #fff;
color: #1e293b;
font: inherit;
font-size: 14px;
line-height: 1.55;
padding: 8px;
}
.chat-user-edit:focus {
outline: 2px solid #bfdbfe;
outline-offset: 1px;
}
.chat-user-edit-hint {
margin: 0;
width: 100%;
font-size: 11px;
line-height: 1.3;
color: #64748b;
}
.chat-bubble-time {
font-size: 10px;
line-height: 1.2;
@@ -506,6 +825,32 @@
color: var(--st-faint);
}
/* 本轮有多个失败时，一键重跑全部失败窗口；已成功的卡片不动 */
.chat-retry-all {
margin-left: auto;
border: 1px solid var(--st-border-strong);
border-radius: 6px;
background: var(--st-surface);
color: var(--st-text);
font: inherit;
font-size: 11px;
font-weight: 500;
padding: 3px 8px;
cursor: pointer;
}
.chat-retry-all:hover,
.chat-retry-all:focus-visible {
border-color: var(--st-accent);
background: var(--st-accent-soft);
outline: none;
}
.chat-retry-all:disabled {
opacity: 0.5;
cursor: default;
}
.chat-strip-nav {
display: flex;
align-items: center;
@@ -590,17 +935,18 @@
width: 100%;
}
.chat-reply-card.is-collapsed {
.chat-reply-card.is-collapsed,
.chat-reply-card.is-capped {
overflow: hidden;
}
.chat-reply-card.is-collapsed .chat-reply-card-body {
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.chat-reply-card.is-collapsed .chat-reply-card-text {
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text {
flex: 1 1 auto;
min-height: 0;
height: 100%;
@@ -609,7 +955,7 @@
scrollbar-width: none;
}
.chat-reply-card.is-collapsed .chat-reply-card-text::-webkit-scrollbar {
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text::-webkit-scrollbar {
width: 0;
}
@@ -630,6 +976,24 @@
border-radius: 99px;
}
/* 分卡片：正文没在顶端就一直露着滚动条，滚回顶端才收 */
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-scrolled,
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-vscroll {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--st-muted) 42%, transparent) transparent;
}
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-scrolled::-webkit-scrollbar,
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-vscroll::-webkit-scrollbar {
width: 6px;
}
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-scrolled::-webkit-scrollbar-thumb,
.chat-reply-card:is(.is-collapsed, .is-capped) .chat-reply-card-text.is-vscroll::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--st-muted) 45%, transparent);
border-radius: 99px;
}
.chat-reply-card.is-selected {
border-color: var(--st-accent);
background: color-mix(in srgb, var(--st-accent-soft) 55%, var(--st-surface));
@@ -653,6 +1017,13 @@
min-width: 0;
}
.chat-reply-card-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.chat-reply-card-name {
display: block;
font-size: 13px;
@@ -673,6 +1044,44 @@
white-space: nowrap;
}
/* 盲测：编号当按钮用，点一下只揭示这一张卡 */
.chat-reply-card-name.is-blind {
display: block;
max-width: 100%;
padding: 1px 8px;
border: 1px solid var(--st-border);
border-radius: 999px;
background: color-mix(in srgb, var(--st-muted) 8%, transparent);
font-size: 12px;
font-weight: 600;
color: var(--st-muted);
text-align: left;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.chat-reply-card-name.is-blind:hover {
color: var(--st-text);
border-color: color-mix(in srgb, var(--st-accent) 50%, var(--st-border));
}
.chat-reply-card-name.is-blind.is-revealed {
color: var(--st-text);
border-color: color-mix(in srgb, var(--st-accent) 50%, var(--st-border));
background: var(--st-accent-soft);
}
.chat-reply-card-name.is-blind:focus-visible {
outline: 2px solid var(--st-accent);
outline-offset: 1px;
}
.chat-reply-card-model.is-revealed {
font-size: 12px;
font-weight: 600;
color: var(--st-text);
}
.chat-reply-card-body {
flex: 1 1 auto;
min-height: 0;
@@ -694,6 +1103,25 @@
.chat-reply-card-text {
min-width: 0;
cursor: text;
user-select: text;
-webkit-user-select: text;
touch-action: auto;
}
/* 关闭复制：卡片任意处都能拖动滚动，正文不再选中 */
.chat-arena.is-copy-off .chat-reply-card-text,
.chat-arena.is-copy-off .chat-reply-card-text *,
.chat-arena.is-copy-off .chat-reply-card-body {
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.chat-reply-track.is-dragging .chat-reply-card-text,
.chat-reply-track.is-dragging .chat-reply-card-text * {
cursor: grabbing;
}
.chat-reply-card-text .md-p {
@@ -824,7 +1252,10 @@
outline: none;
}
.chat-copy-btn,
.chat-remove-btn,
.chat-retry-btn,
.chat-regen-btn,
.chat-select-btn {
border: 1px solid var(--st-border-strong);
border-radius: 6px;
@@ -837,15 +1268,38 @@
cursor: pointer;
}
.chat-copy-btn:hover,
.chat-remove-btn:hover,
.chat-retry-btn:hover,
.chat-regen-btn:hover,
.chat-select-btn:hover,
.chat-copy-btn:focus-visible,
.chat-remove-btn:focus-visible,
.chat-retry-btn:focus-visible,
.chat-regen-btn:focus-visible,
.chat-select-btn:focus-visible {
border-color: var(--st-accent);
background: var(--st-accent-soft);
outline: none;
}
.chat-regen-btn:disabled {
opacity: 0.5;
cursor: default;
}
.chat-regen-btn:disabled:hover {
border-color: var(--st-border-strong);
background: var(--st-surface);
}
/* 失败卡片上的重试按钮：用强调色标出来 */
.chat-retry-btn {
border-color: var(--st-accent);
color: var(--st-text);
font-weight: 600;
}
.chat-select-btn.is-on {
border-color: var(--st-accent);
background: var(--st-accent-soft);
@@ -853,15 +1307,44 @@
font-weight: 650;
}
.chat-bubble-thinking {
/* 思维链：默认折叠成一行，点开才铺开正文 */
.chat-think {
margin: 0 0 8px;
padding: 8px;
border: 1px dashed var(--st-border-strong);
border-radius: 6px;
background: color-mix(in srgb, var(--st-bg) 80%, transparent);
color: var(--st-muted);
font-size: 12px;
}
.chat-think-summary {
cursor: pointer;
padding: 5px 8px;
color: var(--st-muted);
user-select: none;
-webkit-user-select: none;
font-size: 12px;
}
.chat-think-summary:hover,
.chat-think-summary:focus-visible {
color: var(--st-text);
outline: none;
}
.chat-think[open] .chat-think-summary {
border-bottom: 1px dashed var(--st-border);
}
.chat-think-body {
padding: 8px;
color: var(--st-muted);
}
/* 关闭复制时整张卡都能拖，但折叠条仍要能点 */
.chat-arena.is-copy-off .chat-think-summary {
cursor: pointer;
}
.chat-composer {
position: relative;
z-index: 1;
@@ -1062,6 +1545,33 @@
font: inherit;
}
.chat-dialog input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
padding: 0;
border: 0;
border-radius: 3px;
background: transparent;
accent-color: var(--st-accent);
flex: 0 0 auto;
}
.chat-model-pick {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
display: grid;
gap: 4px;
}
.chat-model-pick legend {
padding: 0;
font-size: 12px;
color: var(--st-muted);
}
.chat-dialog-actions {
display: flex;
justify-content: flex-end;
@@ -1079,8 +1589,30 @@
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--st-text);
font-size: 13px;
padding: 4px 2px;
border-radius: 6px;
}
.chat-compare-list label:hover {
background: var(--st-accent-soft);
}
.chat-compare-list label:has(input:disabled) {
opacity: 0.55;
}
.chat-compare-list label:has(input:disabled):hover {
background: transparent;
}
.chat-compare-list label span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-compare-result-head {
@@ -1122,7 +1654,8 @@
@media (max-width: 1100px) {
.chat-shell {
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(220px, 280px);
--rail-left: minmax(180px, 220px);
--rail-right: minmax(220px, 280px);
}
}
@@ -1133,6 +1666,25 @@
overflow: auto;
}
.chat-rail,
.chat-main,
.chat-context {
grid-column: auto;
}
/* 单列时按可见的块重排行高 */
.chat-shell.is-left-hidden {
grid-template-rows: minmax(0, 1fr) auto;
}
.chat-shell.is-right-hidden {
grid-template-rows: auto minmax(0, 1fr);
}
.chat-shell.is-left-hidden.is-right-hidden {
grid-template-rows: minmax(0, 1fr);
}
.chat-rail {
border-right: 0;
border-bottom: 1px solid var(--st-border);
web/chat.html
+131 -7
View File
@@ -45,9 +45,32 @@
<p class="chat-rail-note">
未选存档即为快速对话（浏览器缓存，最多 2 条），可保存为持久会话。
</p>
<button
type="button"
class="chat-rail-toggle chat-rail-toggle-left"
id="btn-hide-left"
title="收起对话列表"
aria-label="收起对话列表"
>‹</button>
</aside>
<main class="chat-main" id="chat-main">
<button
type="button"
class="chat-rail-reopen chat-rail-reopen-left"
id="btn-show-left"
title="展开对话列表"
aria-label="展开对话列表"
hidden
>›</button>
<button
type="button"
class="chat-rail-reopen chat-rail-reopen-right"
id="btn-show-right"
title="展开上下文"
aria-label="展开上下文"
hidden
>‹</button>
<section class="chat-room" id="chat-room">
<p class="chat-temp-mark" id="chat-temp-mark" hidden>临时会话</p>
<div class="chat-arena" id="chat-arena" aria-live="polite" aria-label="模型竞技场"></div>
@@ -87,10 +110,40 @@
</main>
<aside class="chat-context" id="chat-context" aria-label="上下文配置">
<button
type="button"
class="chat-rail-toggle chat-rail-toggle-right"
id="btn-hide-right"
title="收起上下文"
aria-label="收起上下文"
>›</button>
<header class="chat-context-head">
<h2>上下文</h2>
<p class="chat-context-sub" id="context-sub">选择或新建后编辑</p>
</header>
<div class="chat-context-tabs" role="tablist" aria-label="上下文面板">
<button
type="button"
class="chat-context-tab is-active"
id="tab-shell"
data-context-tab="shell"
role="tab"
aria-selected="true"
aria-controls="shell-editor"
>
上下文
</button>
<button
type="button"
class="chat-context-tab"
id="tab-keep"
data-context-tab="keep"
role="tab"
aria-selected="false"
aria-controls="keep-stats"
>
保留统计
</button>
</div>
<div class="chat-shell-editor" id="shell-editor">
<label>
名称
@@ -126,12 +179,58 @@
尾注
<textarea id="shell-post-turn" rows="2" disabled></textarea>
</label>
<label>
角色名（对应预设里的 {{char}}）
<input type="text" id="shell-char-name" placeholder="空则用「作品」" disabled />
</label>
<label>
角色描述（酒馆 Char Description 洞）
<textarea
id="shell-char-desc"
rows="3"
placeholder="空则这一条不发"
disabled
></textarea>
</label>
<label>
角色性格（酒馆 Char Personality 洞，会套预设的性格模板）
<textarea id="shell-char-pers" rows="2" disabled></textarea>
</label>
<label>
场景（酒馆 Scenario 洞，会套预设的场景模板）
<textarea id="shell-scenario" rows="2" disabled></textarea>
</label>
<label>
示例对话（酒馆 mes_example 格式，用 &lt;START&gt; 分块）
<textarea
id="shell-examples"
rows="3"
placeholder="例：&lt;START&gt;&#10;{{user}}: 你好&#10;{{char}}: 你也好"
disabled
></textarea>
</label>
<div class="chat-shell-editor-actions">
<button
type="button"
class="st-btn"
id="btn-clear-shell"
disabled
title="清空提示和设定，保留名称与已选模型"
>
清空
</button>
<button type="button" class="st-btn st-btn-primary" id="btn-save-shell" disabled>
应用
</button>
</div>
</div>
<div class="chat-keep-stats" id="keep-stats" role="tabpanel" aria-labelledby="tab-keep" hidden>
<p class="chat-keep-stats-hint" id="keep-stats-hint"></p>
<div class="chat-keep-stats-list" id="keep-stats-list"></div>
<div class="chat-keep-stats-foot">
<button type="button" class="st-btn" id="btn-clear-keep" hidden>清空统计</button>
</div>
</div>
</aside>
</div>
@@ -153,17 +252,42 @@
</form>
</dialog>
<dialog class="chat-dialog" id="dialog-new-conv">
<form method="dialog" id="form-new-conv">
<h3>新建会话</h3>
<p class="chat-dialog-hint">勾选要同时回复的模型，可以多选。未勾选也能创建，之后再加。</p>
<label>
会话名称
<input type="text" id="new-conv-name" value="新会话" required />
</label>
<fieldset class="chat-model-pick">
<legend>模型</legend>
<div class="chat-compare-list" id="new-conv-models"></div>
<p class="chat-dialog-hint" id="new-conv-models-empty" hidden>
没有带 Key 的 API 配置。请先到设置里添加。
</p>
</fieldset>
<div class="chat-dialog-actions">
<button type="submit" class="st-btn st-btn-primary" value="ok">创建</button>
<button type="submit" class="st-btn" value="cancel" formnovalidate>取消</button>
</div>
</form>
</dialog>
<dialog class="chat-dialog" id="dialog-add-window">
<form method="dialog" id="form-add-window">
<h3>新增窗口</h3>
<p class="chat-dialog-hint">选一个 API 配置，新增对照模型；发送时各模型同时回复。</p>
<label>
模型配置
<select id="add-window-profile"></select>
</label>
<p class="chat-dialog-hint">勾选要加入的模型，可以多选。已经在会话里的不能再选。</p>
<fieldset class="chat-model-pick">
<legend>模型</legend>
<div class="chat-compare-list" id="add-window-models"></div>
<p class="chat-dialog-hint" id="add-window-models-empty" hidden>
请至少再勾选一个模型。
</p>
</fieldset>
<div class="chat-dialog-actions">
<button type="submit" class="st-btn st-btn-primary" value="ok">添加</button>
<button type="submit" class="st-btn" value="cancel">取消</button>
<button type="submit" class="st-btn" value="cancel" formnovalidate>取消</button>
</div>
</form>
</dialog>
web/chat.js
+1611 -77
View File
File diff suppressed because it is too large Load Diff
web/preview-arena-cards.html
+649
View File
@@ -0,0 +1,649 @@
<!DOCTYPE html>
<html lang="zh-CN" data-color-theme="green">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>预览 · 气泡下的模型卡片</title>
<style>
:root {
--st-bg: #dce5d9;
--st-surface: #f4f9f2;
--st-border: #c0cfbb;
--st-border-strong: #a8bca2;
--st-text: #2b3330;
--st-muted: #65716c;
--st-faint: #7a8580;
--st-accent: #6f8e6c;
--st-accent-soft: rgba(125, 155, 122, 0.15);
--st-danger: #9a4038;
--st-font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
background: var(--st-bg);
color: var(--st-text);
font-family: var(--st-font-ui);
font-size: 14px;
line-height: 1.45;
}
.room {
height: 100%;
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
background: color-mix(in srgb, var(--st-bg) 72%, var(--st-surface));
border-left: 1px solid var(--st-border);
border-right: 1px solid var(--st-border);
}
.preview-bar {
flex-shrink: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 16px;
border-bottom: 1px solid var(--st-border);
background: var(--st-surface);
font-size: 12px;
color: var(--st-muted);
}
.preview-bar strong {
font-weight: 650;
color: var(--st-text);
}
.transcript {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 20px 16px 12px;
display: flex;
flex-direction: column;
gap: 22px;
}
.turn {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.user-row {
display: flex;
}
.bubble {
width: 100%;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--st-accent) 28%, var(--st-border));
background: color-mix(in srgb, var(--st-accent-soft) 70%, var(--st-surface));
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
font-size: 13px;
}
.bubble-time {
margin-top: 4px;
font-size: 11px;
color: var(--st-faint);
text-align: right;
}
.strip-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 28px;
}
.strip-hint {
font-size: 11px;
color: var(--st-faint);
}
.strip-nav {
display: flex;
align-items: center;
gap: 4px;
}
.idx {
min-width: 3.2rem;
text-align: center;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--st-muted);
}
.nav-btn {
width: 28px;
height: 28px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--st-muted);
font: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.nav-btn:hover,
.nav-btn:focus-visible {
color: var(--st-accent);
background: var(--st-accent-soft);
outline: none;
}
.nav-btn:disabled {
opacity: 0.35;
cursor: default;
background: transparent;
color: var(--st-faint);
}
.track {
--card-gap: 10px;
--card-peek: 36px;
--card-min-h: 120px;
display: flex;
align-items: flex-start;
gap: var(--card-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
padding-bottom: 2px;
cursor: grab;
scrollbar-width: none;
}
.track::-webkit-scrollbar {
display: none;
}
.track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.card {
flex: 0 0 calc((100% - var(--card-gap) - var(--card-peek)) / 2);
width: calc((100% - var(--card-gap) - var(--card-peek)) / 2);
scroll-snap-align: start;
display: flex;
flex-direction: column;
min-width: 0;
min-height: var(--card-min-h);
border: 1px solid var(--st-border);
border-radius: 8px;
background: var(--st-surface);
}
.track[data-count="1"] .card {
flex-basis: 100%;
width: 100%;
}
.card.is-collapsed .card-text {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.card.is-selected {
border-color: var(--st-accent);
background: color-mix(in srgb, var(--st-accent-soft) 55%, var(--st-surface));
}
.card.is-error {
border-color: color-mix(in srgb, var(--st-danger) 45%, var(--st-border));
}
.card-head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-bottom: 1px solid var(--st-border);
}
.card-titles { min-width: 0; }
.card-name {
display: block;
font-size: 13px;
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-model {
display: block;
margin-top: 1px;
font-size: 11px;
color: var(--st-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
padding: 10px;
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.card-body.is-error { color: var(--st-danger); }
.card-body.is-pending { color: var(--st-faint); }
.card-foot {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 0 10px 8px;
}
.card-foot:not(:has(button:not([hidden]))) {
display: none;
}
.expand-btn {
margin-right: auto;
border: 0;
background: transparent;
color: var(--st-muted);
font: inherit;
font-size: 12px;
padding: 4px 0;
cursor: pointer;
}
.expand-btn:hover,
.expand-btn:focus-visible {
color: var(--st-accent);
outline: none;
}
.select-btn,
.remove-btn {
border: 1px solid var(--st-border-strong);
border-radius: 6px;
background: var(--st-surface);
color: var(--st-text);
font: inherit;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
cursor: pointer;
}
.select-btn:hover,
.remove-btn:hover,
.select-btn:focus-visible,
.remove-btn:focus-visible {
border-color: var(--st-accent);
background: var(--st-accent-soft);
outline: none;
}
.select-btn.is-on {
border-color: var(--st-accent);
background: var(--st-accent-soft);
font-weight: 650;
}
.composer {
flex-shrink: 0;
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px 16px 14px;
border-top: 1px solid var(--st-border);
background: var(--st-surface);
}
.composer textarea {
flex: 1;
min-height: 38px;
max-height: 120px;
resize: none;
border: 1px solid var(--st-border-strong);
border-radius: 8px;
background: var(--st-bg);
color: var(--st-faint);
padding: 8px 10px;
font: inherit;
font-size: 13px;
}
.send {
width: 32px;
height: 32px;
border: 0;
border-radius: 8px;
background: var(--st-accent);
color: #f4f9f2;
font: inherit;
cursor: default;
opacity: 0.45;
}
</style>
</head>
<body>
<div class="room">
<div class="preview-bar">
<span><strong>临时会话</strong> · 预览，回复都是字符串</span>
<span>同一条消息只出现一次，卡片可左右拖</span>
</div>
<div class="transcript" id="transcript"></div>
<footer class="composer">
<textarea rows="1" readonly placeholder="预览不发送。正式页仍是底部这一条输入。"></textarea>
<button type="button" class="send" disabled aria-label="发送">↑</button>
</footer>
</div>
<script>
const windows = [
{ id: "w1", name: "claude-haiku-5.5", model: "anthropic/claude-haiku-5.5" },
{ id: "w2", name: "gemini-3.8-flash", model: "google/gemini-3.8-flash" },
{ id: "w3", name: "gpt-5.4-mini", model: "openai/gpt-5.4-mini" },
{ id: "w4", name: "deepseek-v4", model: "deepseek/deepseek-v4" },
{ id: "w5", name: "claude-sonnet-5", model: "anthropic/claude-sonnet-5" },
];
const turns = [
{
id: "t1",
time: "21:06",
user: "开篇别写天气。林晚推门进来，屋里已经有人。收短，留下一句她没问出口的话。",
selected: "w2",
replies: {
w1: "门轴响了一下。林晚进门，外套还挂在臂上，肩上的水珠顺着袖口往下掉。桌边坐着的人抬了抬眼，又低下去，手指停在杯沿上。她把钥匙放进碟子，金属碰了一声。那句「你怎么在这」到了舌尖，她用舌头顶回去，只伸手去摘围巾。围巾结打得紧，她解了两次才松开，穗子扫过桌面，拂开一张折过的纸。纸角朝上，她看见自己的名字，没有去拿。",
w2: "林晚推门时灯已经亮着。那人坐在桌边，面前一只空杯子，杯底还沾着一圈茶渍。她把门带上，声音比想的轻，锁舌却还是响了。钥匙落进碟子里。她站在门边，鞋跟没有再往前。话到了嘴边，她侧过身去烧水，壶盖磕在灶沿上，那句话就停在水壶的响声里。水开之前谁都没说话。她背对着那人，手指扣着灶台的边，扣得指节发白。",
w3: "林晚推开门。屋里的灯亮着，桌边已经坐了一个人，面前是一只空杯子。她把钥匙放进门口的碟子，金属碰了一声，手指在碟沿上停了一停。那句问话到了嘴边，没有出口。她解下围巾，搭到椅背上，手还按着木茬，人站在椅子侧面，没有往桌边走。那人把杯子转了半圈。林晚看着杯底画出的水印，终于把另一只手也放上椅背，围巾的穗子从指缝里滑下去。",
w4: "门开着一条缝，光从里面漏出来。林晚侧身进去，看见那人的背影对着窗。她张了张嘴，喉咙里那句话转了一圈，最后只变成解围巾的动作。围巾搭上椅背，她的手还按着，没有拿开。椅背是凉的。那人没有回头，只把空杯子转了半圈。林晚看着那只杯子，又看着自己按在椅背上的手，终于把另一只手也放上去，像是要说什么，到底只把围巾的穗子理齐。",
w5: { error: "上游超时，这条没有回复。" },
},
},
{
id: "t2",
time: "21:11",
user: "她没问出口的那句，换成一个动作。别解释她在想什么。",
selected: null,
replies: {
w1: { pending: true },
w2: "她把那只空杯子转了半圈，又转回去，杯底在桌面上刮出一声很轻的响。林晚的手还按在椅背上，围巾的穗子从指缝里漏下去。她没有坐。那人这才抬眼，目光停在她的手上，又移开。林晚抽回手，把围巾从椅背上拿起来，重新搭好，动作慢得像在把一句已经到了嘴边的话按回去。",
w3: "林晚拉开椅子，椅腿在地板上拖出短短一声。她没有坐下去。手离开椅背，转到水槽边，拧开水龙头。水声起来以后，那人把空杯子往她这边推了推，杯底刮过桌面。她接过杯子，冲了一下，倒扣在沥水架上。水还在流。她伸手去关，指节在龙头上停住，又拧紧，全程没有回头看他。围巾还搭在椅背上，穗子垂到座位上。",
w4: "她把围巾搭上椅背，手还按着，没有拿开。指腹压住一块被磨毛的木茬。那人的杯子停在手边，她用空着的那只手把杯子转了半圈，又转回去，水渍在桌上画出一个不完整的圆。圆没有合上，她的手也没有离开椅背。",
w5: { error: "上游超时，这条没有回复。" },
},
},
];
const alive = new Set(windows.map((w) => w.id));
const expanded = new Set();
const transcript = document.getElementById("transcript");
const MIN_CARD_H = 120;
/** 至少两张都能撑到的最大高度：两张即最短，更多即次短。 */
function sharedReachHeight(heights) {
if (!heights.length) return MIN_CARD_H;
const sorted = [...heights].sort((a, b) => a - b);
const index = Math.min(1, Math.max(0, sorted.length - 2));
return Math.max(MIN_CARD_H, sorted[index]);
}
function esc(s) {
return String(s)
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;");
}
function bodyOf(reply) {
if (!reply) return { cls: "is-pending", text: "本轮无回复" };
if (reply.error) return { cls: "is-error", text: reply.error };
if (reply.pending) return { cls: "is-pending", text: "正在回复…" };
return { cls: "", text: reply };
}
function render() {
const list = windows.filter((w) => alive.has(w.id));
transcript.innerHTML = turns
.map((turn) => {
const kept = turn.selected && list.some((w) => w.id === turn.selected && !bodyOf(turn.replies[w.id]).cls) ? turn.selected : null;
const shown = kept ? list.filter((w) => w.id === kept) : list;
const cards = shown
.map((w) => {
const body = bodyOf(turn.replies[w.id]);
const selected = turn.selected === w.id && !body.cls;
const keep =
list.length > 1 && body.cls !== "is-error" && body.cls !== "is-pending"
? `<button type="button" class="select-btn ${selected ? "is-on" : ""}" data-action="keep" data-turn="${turn.id}" data-window="${w.id}">${selected ? "已保留 · 取消" : "保留此回复"}</button>`
: "";
const remove =
list.length > 1
? `<button type="button" class="remove-btn" data-action="remove" data-window="${w.id}">移除</button>`
: "";
return `<article class="card ${selected ? "is-selected" : ""} ${body.cls === "is-error" ? "is-error" : ""}" data-window="${w.id}">
<header class="card-head">
<div class="card-titles">
<span class="card-name">${esc(w.name)}</span>
<span class="card-model">${esc(w.model)}</span>
</div>
${remove}
</header>
<div class="card-body ${body.cls}" data-empty="${body.cls ? "1" : "0"}"><div class="card-text">${esc(body.text)}</div></div>
<div class="card-foot">
<button type="button" class="expand-btn" data-action="expand" data-turn="${turn.id}" data-window="${w.id}" hidden>展开</button>
${keep}
</div>
</article>`;
})
.join("");
const stripBar = kept
? ""
: `<div class="strip-bar">
<span class="strip-hint">左右拖动</span>
<div class="strip-nav">
<button type="button" class="nav-btn" data-action="prev" data-turn="${turn.id}" aria-label="上一张">‹</button>
<span class="idx" data-idx="${turn.id}">1 / ${list.length}</span>
<button type="button" class="nav-btn" data-action="next" data-turn="${turn.id}" aria-label="下一张">›</button>
</div>
</div>`;
return `<section class="turn" data-turn="${turn.id}">
<div class="user-row">
<article class="bubble">
<div>${esc(turn.user)}</div>
<div class="bubble-time">${esc(turn.time)}</div>
</article>
</div>
${stripBar}
<div class="track" data-turn="${turn.id}" data-count="${shown.length}" tabindex="0">${cards}</div>
</section>`;
})
.join("");
for (const track of transcript.querySelectorAll(".track")) bindTrack(track);
collapseTracks();
}
function collapseTracks() {
for (const track of transcript.querySelectorAll(".track")) {
const cards = [...track.querySelectorAll(".card")];
if (cards.length < 2) {
for (const card of cards) card.style.height = "auto";
continue;
}
const measured = cards.map((card) => {
card.style.height = "auto";
const empty = card.querySelector(".card-body")?.dataset.empty === "1";
return { card, h: card.offsetHeight, empty };
});
const substantive = measured.filter((item) => !item.empty).map((item) => item.h);
const target = sharedReachHeight(substantive);
for (const { card, h } of measured) {
const key = `${track.dataset.turn}:${card.dataset.window}`;
const btn = card.querySelector("[data-action='expand']");
const open = expanded.has(key);
if (open) {
card.style.height = "auto";
card.classList.remove("is-collapsed");
if (btn) {
btn.hidden = false;
btn.textContent = "收起";
}
continue;
}
card.style.height = `${target}px`;
card.classList.add("is-collapsed");
if (btn) {
const overflow = h > target + 1;
btn.hidden = !overflow;
btn.textContent = "展开";
}
}
}
}
function cardStep(track) {
const card = track.querySelector(".card");
if (!card) return track.clientWidth;
const gap = 10;
return card.getBoundingClientRect().width + gap;
}
function updateIdx(track) {
const cards = [...track.querySelectorAll(".card")];
const turnId = track.dataset.turn;
const idx = transcript.querySelector(`[data-idx="${turnId}"]`);
if (!idx || !cards.length) return;
const step = cardStep(track);
const start = Math.min(cards.length - 1, Math.max(0, Math.round(track.scrollLeft / step)));
const end = Math.min(cards.length, start + 2);
idx.textContent = end > start + 1 ? `${start + 1}–${end} / ${cards.length}` : `${start + 1} / ${cards.length}`;
const prev = transcript.querySelector(`[data-action="prev"][data-turn="${turnId}"]`);
const next = transcript.querySelector(`[data-action="next"][data-turn="${turnId}"]`);
const lastPage = Math.max(0, cards.length - 2);
if (prev) prev.disabled = start <= 0;
if (next) next.disabled = start >= lastPage;
}
function scrollToIndex(track, index) {
const cards = [...track.querySelectorAll(".card")];
const card = cards[index];
if (!card) return;
track.scrollTo({ left: card.offsetLeft - track.offsetLeft, behavior: "smooth" });
}
function bindTrack(track) {
let dragging = false;
let axis = null;
let startX = 0;
let startY = 0;
let startScroll = 0;
track.addEventListener("pointerdown", (e) => {
if (e.button !== 0 || e.target.closest("button")) return;
dragging = true;
axis = null;
startX = e.clientX;
startY = e.clientY;
startScroll = track.scrollLeft;
});
track.addEventListener("pointermove", (e) => {
if (!dragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
if (!axis) {
if (Math.abs(dx) < 5 && Math.abs(dy) < 5) return;
axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
if (axis === "x") {
track.classList.add("is-dragging");
track.setPointerCapture(e.pointerId);
}
}
if (axis === "x") {
track.scrollLeft = startScroll - dx;
}
});
const end = () => {
dragging = false;
axis = null;
track.classList.remove("is-dragging");
};
track.addEventListener("pointerup", end);
track.addEventListener("pointercancel", end);
track.addEventListener("scroll", () => updateIdx(track), { passive: true });
updateIdx(track);
}
transcript.addEventListener("click", (e) => {
const btn = e.target.closest("button");
if (!btn) return;
const action = btn.dataset.action;
if (action === "expand") {
const key = `${btn.dataset.turn}:${btn.dataset.window}`;
if (expanded.has(key)) expanded.delete(key);
else expanded.add(key);
collapseTracks();
return;
}
if (action === "remove") {
alive.delete(btn.dataset.window);
for (const turn of turns) {
if (turn.selected === btn.dataset.window) turn.selected = null;
}
for (const key of [...expanded]) {
if (key.endsWith(`:${btn.dataset.window}`)) expanded.delete(key);
}
render();
return;
}
if (action === "keep") {
const turn = turns.find((t) => t.id === btn.dataset.turn);
if (!turn) return;
turn.selected = turn.selected === btn.dataset.window ? null : btn.dataset.window;
render();
return;
}
if (action === "prev" || action === "next") {
const track = transcript.querySelector(`.track[data-turn="${btn.dataset.turn}"]`);
if (!track) return;
const step = cardStep(track);
const i = Math.round(track.scrollLeft / step);
const lastPage = Math.max(0, track.querySelectorAll(".card").length - 2);
const nextIndex = action === "next" ? Math.min(lastPage, i + 1) : Math.max(0, i - 1);
scrollToIndex(track, nextIndex);
}
});
render();
</script>
</body>
</html>
web/settings.css
+125
View File
@@ -503,6 +503,20 @@ code {
display: none;
}
/* 宽屏下不要把表单和卡片拉到整屏宽 */
.st-main-head {
max-width: calc(1080px + 28px);
}
.st-body > .settings-section {
max-width: 1080px;
}
.active-settings-bar,
.st-status {
max-width: 1080px;
}
/* —— Buttons —— */
.btn-primary,
.btn-secondary,
@@ -1073,6 +1087,22 @@ code {
gap: 8px;
}
.import-report-warnings {
margin: 8px 0 0;
padding-left: 18px;
list-style: disc;
}
.import-report-warnings li {
margin: 2px 0;
}
.import-report-warnings li + li {
border-top: 1px solid var(--st-border);
padding-top: 4px;
margin-top: 4px;
}
.preset-entries-panel {
margin-top: 4px;
padding-left: 48px;
@@ -1427,6 +1457,101 @@ code {
color: var(--st-faint);
}
/* 左标签、右控件的表单行：比竖排 label 更短、也不拉满整卡 */
.settings-form .form-row {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: start;
gap: 4px 16px;
padding: 14px 0;
border-top: 1px solid var(--st-border);
}
.settings-form .form-row:first-child {
border-top: none;
padding-top: 2px;
}
.settings-form .form-label {
padding-top: 7px;
font-size: 13px;
font-weight: 500;
color: var(--st-text);
}
.settings-form .form-label code {
padding: 1px 4px;
border-radius: 4px;
background: #f4f4f5;
font-size: 12px;
}
.settings-form .form-control {
min-width: 0;
}
.settings-form select {
width: 100%;
max-width: 420px;
padding: 7px 10px;
border: 1px solid var(--st-border-strong);
border-radius: 6px;
background: var(--st-surface);
color: inherit;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.settings-form select:focus {
outline: none;
border-color: #93c5fd;
box-shadow: 0 0 0 3px var(--st-accent-soft);
}
.settings-form .form-hint {
margin: 6px 0 0;
max-width: 560px;
font-size: 12px;
line-height: 1.55;
color: var(--st-faint);
}
.settings-form .form-static {
margin: 0;
max-width: 560px;
padding-top: 7px;
font-size: 13px;
line-height: 1.6;
color: var(--st-muted);
}
.settings-form .form-static strong {
font-weight: 600;
color: var(--st-text);
}
.settings-form .no-break {
white-space: nowrap;
}
@media (max-width: 720px) {
.settings-form .form-row {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 12px 0;
}
.settings-form .form-label,
.settings-form .form-static {
padding-top: 0;
}
.settings-form select {
max-width: none;
}
}
.storage-card .field {
display: flex;
flex-direction: column;
web/settings.html
+74
View File
@@ -34,6 +34,7 @@
<button type="button" class="st-rail-item" data-section="preference">用户偏好</button>
<button type="button" class="st-rail-item" data-section="preset">预设</button>
<button type="button" class="st-rail-item" data-section="storage">上下文</button>
<button type="button" class="st-rail-item" data-section="chat">直聊</button>
<p class="st-rail-note">保存在本机 <code>~/.writing-agent/</code>，明文、不同步。</p>
</aside>
@@ -106,6 +107,53 @@
</section>
<section class="settings-section hidden" id="section-preset">
<div class="settings-card storage-card">
<h3>发出前的消息整形</h3>
<p class="settings-help">
预设（如酒馆的 <code>squash_system_messages</code>）会要求把相邻同角色的消息合并。
这里默认「跟随预设」，也可以强制覆盖。
</p>
<div class="settings-form">
<div class="form-row">
<span class="form-label" id="preset-squash-label">合并模式</span>
<div class="form-control">
<select id="message-squash" aria-labelledby="preset-squash-label">
<option value="follow-preset">跟随预设</option>
<option value="none">不合并</option>
<option value="merge">合并相同角色连续的发言</option>
<option value="semi">半严格（强制对话角色交替）</option>
<option value="strict">严格（强制对话角色交替、用户最先）</option>
<option value="single-user-turn">单一用户消息（无工具）</option>
</select>
<p class="form-hint">
请求里带工具调用时，后三档会退化为「只合并相邻同角色」，避免拆散工具调用。
</p>
</div>
</div>
<div class="form-row">
<span class="form-label" id="preset-tool-label">预设工具协议</span>
<div class="form-control">
<select id="preset-tool-policy" aria-labelledby="preset-tool-label">
<option value="adapt">适配（把预设要求的工具折算到已有工具上）</option>
<option value="app">只用本应用工具（排除预设的伪工具条目）</option>
<option value="preset">只发预设要求的工具</option>
</select>
</div>
</div>
<div class="form-row">
<span class="form-label"><code>{{char}}</code> 取值</span>
<div class="form-control">
<p class="form-static">
优先用直聊上下文壳里的<strong>角色名</strong>；创作期取<strong>当前作品名</strong>
（对话落盘时给快照起的名字）。都没填时用「作品」。
</p>
</div>
</div>
</div>
<div class="storage-actions">
<button type="button" class="btn-primary" id="btn-save-preset-runtime">保存</button>
</div>
</div>
<div id="presets-list" class="card-list"></div>
<pre id="import-report" class="import-report" hidden></pre>
</section>
@@ -156,6 +204,32 @@
</div>
</div>
</section>
<section class="settings-section hidden" id="section-chat">
<div class="settings-card storage-card">
<h3>直聊卡片拖动</h3>
<p class="settings-help">
在直聊里按住回复卡片拖动（左右切卡片、上下滚正文）时，指针移动 1px 实际滚动多少 px。
</p>
<label class="field">
拖动倍率
<input
type="number"
id="chat-drag-gain"
min="0.5"
max="3"
step="0.1"
value="1.5"
/>
</label>
<p class="settings-help muted">
默认 1.5（拖 100px 走 150px）；1 = 跟手；范围 0.5–3。保存后回到直聊刷新即生效。
</p>
<div class="storage-actions">
<button type="button" class="btn-primary" id="btn-save-drag-gain">保存倍率</button>
</div>
</div>
</section>
</div>
</main>
</div>
web/settings.js
+71 -7
View File
@@ -58,11 +58,15 @@ const sectionPersonaEl = document.getElementById("section-persona");
const sectionPreferenceEl = document.getElementById("section-preference");
const sectionPresetEl = document.getElementById("section-preset");
const sectionStorageEl = document.getElementById("section-storage");
const sectionChatEl = document.getElementById("section-chat");
const preferenceCollectEveryEl = document.getElementById("preference-collect-every");
const activeSettingsBarEl = document.getElementById("active-settings-bar");
const settingsToastEl = document.getElementById("settings-toast");
const contextTraceKeepEl = document.getElementById("context-trace-keep");
const dictateFillRetriesEl = document.getElementById("dictate-fill-retries");
const chatDragGainEl = document.getElementById("chat-drag-gain");
const messageSquashEl = document.getElementById("message-squash");
const presetToolPolicyEl = document.getElementById("preset-tool-policy");
const probeDialog = document.getElementById("preset-probe-dialog");
const probePresetNameEl = document.getElementById("probe-preset-name");
const probeMessageEl = document.getElementById("probe-message");
@@ -154,6 +158,7 @@ function switchSection(section) {
sectionPreferenceEl?.classList.toggle("hidden", section !== "preference");
sectionPresetEl.classList.toggle("hidden", section !== "preset");
sectionStorageEl?.classList.toggle("hidden", section !== "storage");
sectionChatEl?.classList.toggle("hidden", section !== "chat");
renderPanelHeader();
}
@@ -192,6 +197,9 @@ function renderPanelHeader() {
btn.textContent = "导入 JSON";
btn.addEventListener("click", () => presetFileEl.click());
panelActionsEl.appendChild(btn);
} else if (activeSection === "chat") {
panelTitleEl.textContent = "直聊";
panelSubtitleEl.textContent = "卡片拖动的跟手倍率";
} else {
panelTitleEl.textContent = "上下文";
panelSubtitleEl.textContent = "上下文痕迹，以及对话落盘同轮补写次数";
@@ -780,6 +788,15 @@ async function loadAll() {
if (dictateFillRetriesEl) {
dictateFillRetriesEl.value = String(state.settings.dictateFillRetries ?? 0);
}
if (chatDragGainEl) {
chatDragGainEl.value = String(state.settings.chatDragGain ?? 1.5);
}
if (messageSquashEl) {
messageSquashEl.value = state.settings.messageSquash ?? "follow-preset";
}
if (presetToolPolicyEl) {
presetToolPolicyEl.value = state.settings.presetToolPolicy ?? "adapt";
}
renderActiveBar();
renderProfiles();
renderPersonas();
@@ -1659,14 +1676,23 @@ presetFileEl.addEventListener("change", async () => {
});
lastImportedPresetId = report.preset.id;
importReportEl.hidden = false;
const escapeHtml = (text) =>
String(text).replace(/[&<>"']/g, (c) =>
({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
);
const core = report.missingCoreIdentifiers?.length
? `缺少 ${escapeHtml(report.missingCoreIdentifiers.join(" / "))}`
: "框架完整";
importReportEl.innerHTML = `
<div>${[
`已导入: ${report.preset.name}`,
`条目: ${report.promptCount}，启用: ${report.enabledCount}`,
report.warnings.length ? `警告: ${report.warnings.join("; ")}` : "",
]
.filter(Boolean)
.join("<br>")}</div>
<div>已导入: ${escapeHtml(report.preset.name)}</div>
<div>条目 ${report.promptCount}，启用 ${report.enabledCount}；顺序块 character_id=${escapeHtml(report.orderCharacterId ?? "?")}（${core}）</div>
${
report.warnings?.length
? `<ul class="import-report-warnings">${report.warnings
.map((w) => `<li>${escapeHtml(w)}</li>`)
.join("")}</ul>`
: `<div>没有需要注意的项目</div>`
}
<div class="import-report-actions">
<button type="button" class="btn-activate" id="activate-imported-preset">选用此预设并生效</button>
</div>`;
@@ -1820,6 +1846,44 @@ document.getElementById("btn-save-fill-retries")?.addEventListener("click", asyn
}
});
document.getElementById("btn-save-preset-runtime")?.addEventListener("click", async () => {
try {
const data = await api("/api/settings", {
method: "PUT",
body: JSON.stringify({
messageSquash: messageSquashEl?.value ?? "follow-preset",
presetToolPolicy: presetToolPolicyEl?.value ?? "adapt",
}),
});
state.settings = data.settings;
if (messageSquashEl) {
messageSquashEl.value = data.settings.messageSquash ?? "follow-preset";
}
if (presetToolPolicyEl) {
presetToolPolicyEl.value = data.settings.presetToolPolicy ?? "adapt";
}
showToast("已保存预设运行设置");
} catch (err) {
showToast(err.message, true);
}
});
document.getElementById("btn-save-drag-gain")?.addEventListener("click", async () => {
try {
const n = Number(chatDragGainEl?.value ?? 1.5);
const data = await api("/api/settings", {
method: "PUT",
body: JSON.stringify({ chatDragGain: n }),
});
state.settings = data.settings;
const saved = data.settings.chatDragGain ?? 1.5;
if (chatDragGainEl) chatDragGainEl.value = String(saved);
showToast(`已保存：拖 100px 走 ${Math.round(saved * 100)}px`);
} catch (err) {
showToast(err.message, true);
}
});
document.getElementById("btn-save-context-keep")?.addEventListener("click", async () => {
try {
const n = Number(contextTraceKeepEl?.value ?? 5);