shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cross conversation messaging

Browse Source
This commit is contained in:
shiyue
2026-06-12 17:46:37 +08:00
parent 8b2173be8f
commit 04e15c9c89
7 changed files with 1033 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
public/app.js
View File

@@ -81,6 +81,7 @@
let isGenerating = false;
let reconnectAttempts = 0;
let reconnectTimer = null;
let isPageUnloading = false;
let pendingText = '';
let renderTimer = null;
let generatingSessionId = null;
@@ -135,6 +136,7 @@
const importSessionBtn = $('#import-session-btn');
const sessionList = $('#session-list');
const chatTitle = $('#chat-title');
const chatSessionIdBtn = $('#chat-session-id-btn');
const chatAgentBtn = $('#chat-agent-btn');
const chatAgentMenu = $('#chat-agent-menu');
const chatRuntimeState = $('#chat-runtime-state');
@@ -648,6 +650,51 @@
return sessions.find((s) => s.id === sessionId) || null;
}
function shortSessionId(sessionId) {
const value = String(sessionId || '');
return value ? value.slice(0, 8) : '';
}
function updateSessionIdBadge() {
if (!chatSessionIdBtn) return;
if (!currentSessionId) {
chatSessionIdBtn.hidden = true;
chatSessionIdBtn.textContent = 'ID';
chatSessionIdBtn.title = '复制当前会话 ID';
return;
}
chatSessionIdBtn.hidden = false;
chatSessionIdBtn.textContent = `ID ${shortSessionId(currentSessionId)}`;
chatSessionIdBtn.title = `复制当前会话 ID\n${currentSessionId}`;
chatSessionIdBtn.setAttribute('aria-label', `复制当前会话 ID ${currentSessionId}`);
}
async function copyTextToClipboard(text, successText = '已复制') {
const value = String(text || '');
if (!value) return false;
try {
if (navigator.clipboard?.writeText && window.isSecureContext) {
await navigator.clipboard.writeText(value);
} else {
const textarea = document.createElement('textarea');
textarea.value = value;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
textarea.style.top = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
}
showToast(successText);
return true;
} catch {
showToast('复制失败');
return false;
}
}
function deepClone(value) {
if (value === null || value === undefined) return value;
return JSON.parse(JSON.stringify(value));
@@ -1797,6 +1844,7 @@
${session.hasUnread ? '<span class="session-unread-dot"></span>' : ''}
<span class="session-item-time">${timeAgo(session.updated)}</span>
<div class="session-item-actions">
<button class="session-item-btn copy-id" title="复制 ID">ID</button>
<button class="session-item-btn edit" title="重命名">✎</button>
<button class="session-item-btn delete" title="删除">×</button>
</div>
@@ -1804,6 +1852,11 @@
item.addEventListener('click', (e) => {
const target = e.target;
if (target.classList.contains('copy-id')) {
e.stopPropagation();
copyTextToClipboard(session.id, '会话 ID 已复制');
return;
}
if (target.classList.contains('delete')) {
e.stopPropagation();
const doDelete = () => {
@@ -1920,6 +1973,7 @@
sendBtn.hidden = false;
abortBtn.hidden = true;
chatTitle.textContent = '新会话';
updateSessionIdBadge();
updateCwdBadge();
messagesDiv.innerHTML = buildWelcomeMarkup(currentAgent);
setStatsDisplay(null);
@@ -1949,6 +2003,7 @@
loadedHistorySessionId = snapshot.sessionId;
setLastSessionForAgent(snapshot.agent, currentSessionId);
chatTitle.textContent = snapshot.title || '新会话';
updateSessionIdBadge();
setCurrentAgent(snapshotAgent);
migratePendingNotesToSession(snapshot.sessionId, snapshotAgent);
setCurrentSessionRunningState(snapshot.isRunning);
@@ -2221,26 +2276,49 @@
};
// --- WebSocket ---
function connect() {
if (ws && ws.readyState <= 1) return;
ws = new WebSocket(WS_URL);
function isBrowserOnline() {
return !('onLine' in navigator) || navigator.onLine;
}
ws.onopen = () => {
function canConnectWs() {
return !isPageUnloading && isBrowserOnline();
}
function clearReconnectTimer() {
if (!reconnectTimer) return;
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
function connect() {
if (!canConnectWs()) return;
if (ws && ws.readyState <= 1) return;
clearReconnectTimer();
const socket = new WebSocket(WS_URL);
ws = socket;
socket.onopen = () => {
if (ws !== socket) return;
reconnectAttempts = 0;
clearReconnectTimer();
if (authToken) send({ type: 'auth', token: authToken });
};
ws.onmessage = (e) => {
socket.onmessage = (e) => {
if (ws !== socket) return;
let msg;
try { msg = JSON.parse(e.data); } catch { return; }
handleServerMessage(msg);
};
ws.onclose = () => {
socket.onclose = () => {
if (ws !== socket) return;
ws = null;
clearSessionLoading();
scheduleReconnect();
};
ws.onerror = () => {};
socket.onerror = () => {};
}
function send(data) {
@@ -2248,6 +2326,7 @@
}
function scheduleReconnect() {
if (!canConnectWs()) return;
if (reconnectTimer) return;
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
reconnectAttempts++;
@@ -2367,6 +2446,22 @@
}
break;
case 'session_message':
if (msg.sessionId && msg.message) {
updateCachedSession(msg.sessionId, (snapshot) => {
snapshot.messages = Array.isArray(snapshot.messages) ? snapshot.messages : [];
snapshot.messages.push(deepClone(msg.message));
snapshot.updated = msg.message.timestamp || new Date().toISOString();
});
}
if (msg.sessionId === currentSessionId && msg.message) {
const welcome = messagesDiv.querySelector('.welcome-msg');
if (welcome) welcome.remove();
messagesDiv.appendChild(buildMsgElement(msg.message));
scrollToBottom();
}
break;
case 'session_renamed':
sessions = sessions.map((session) => session.id === msg.sessionId ? { ...session, title: msg.title } : session);
updateCachedSession(msg.sessionId, (snapshot) => { snapshot.title = msg.title; });
@@ -2755,9 +2850,10 @@
catch { return escapeHtml(text); }
}
function createMsgElement(role, content, attachments = []) {
function createMsgElement(role, content, attachments = [], meta = {}) {
const div = document.createElement('div');
div.className = `msg ${role}${role === 'assistant' ? ' agent-' + currentAgent : ''}`;
const isCrossConversation = role === 'user' && !!meta.crossConversation;
div.className = `msg ${role}${role === 'assistant' ? ' agent-' + currentAgent : ''}${isCrossConversation ? ' cross-conversation' : ''}`;
if (role === 'system') {
const bubble = document.createElement('div');
@@ -2769,7 +2865,9 @@
const avatar = document.createElement('div');
avatar.className = 'msg-avatar';
if (role === 'user') {
if (isCrossConversation) {
avatar.textContent = '↗';
} else if (role === 'user') {
avatar.textContent = 'U';
} else if (currentAgent === 'codex') {
avatar.innerHTML = `<img src="/codex.png" width="24" height="24" style="display:block;" alt="Codex">`;
@@ -2781,6 +2879,33 @@
bubble.className = 'msg-bubble';
if (role === 'user') {
if (isCrossConversation) {
const source = meta.crossConversation || {};
const sourceTitle = source.sourceTitle || '未命名对话';
const sourceId = source.sourceSessionId || '';
const sourceMeta = document.createElement('div');
sourceMeta.className = 'cross-conversation-meta';
const label = document.createElement('span');
label.className = 'cross-conversation-label';
label.textContent = `来自「${sourceTitle}」的对话`;
sourceMeta.appendChild(label);
if (sourceId) {
const copyBtn = document.createElement('button');
copyBtn.type = 'button';
copyBtn.className = 'cross-conversation-id-btn';
copyBtn.textContent = `ID ${shortSessionId(sourceId)}`;
copyBtn.title = `复制来源会话 ID\n${sourceId}`;
copyBtn.addEventListener('click', (event) => {
event.stopPropagation();
copyTextToClipboard(sourceId, '来源会话 ID 已复制');
});
sourceMeta.appendChild(copyBtn);
}
bubble.appendChild(sourceMeta);
}
if (content) {
const textNode = document.createElement('div');
textNode.className = 'msg-text';
@@ -3052,7 +3177,7 @@
}
function buildMsgElement(m) {
const el = createMsgElement(m.role, m.content, m.attachments || []);
const el = createMsgElement(m.role, m.content, m.attachments || [], m);
if (m.role === 'assistant' && m.toolCalls && m.toolCalls.length > 0) {
const bubble = el.querySelector('.msg-bubble');
const FOLD_AT = 3;
@@ -3822,6 +3947,12 @@
});
}
if (chatSessionIdBtn) {
chatSessionIdBtn.addEventListener('click', () => {
copyTextToClipboard(currentSessionId, '当前会话 ID 已复制');
});
}
// --- Header title editing (contenteditable) ---
chatTitle.addEventListener('click', () => {
if (!currentSessionId || chatTitle.contentEditable === 'true') return;
@@ -5932,6 +6063,25 @@
renderSessionList();
connect();
window.addEventListener('resize', updateCwdBadge);
window.addEventListener('online', () => {
reconnectAttempts = 0;
connect();
});
window.addEventListener('offline', clearReconnectTimer);
window.addEventListener('pagehide', () => {
isPageUnloading = true;
clearReconnectTimer();
if (ws && ws.readyState <= 1) {
ws.close(1001, 'pagehide');
}
});
window.addEventListener('pageshow', () => {
isPageUnloading = false;
if (!ws || ws.readyState > 1) {
reconnectAttempts = 0;
connect();
}
});
// Register Service Worker for mobile push notifications
if ('serviceWorker' in navigator) {
@@ -5950,6 +6100,7 @@
if (document.visibilityState !== 'visible') return;
if (!ws || ws.readyState > 1) {
// WS is dead, force reconnect
reconnectAttempts = 0;
connect();
} else if (ws.readyState === 1 && currentSessionId) {
// Preserve active streaming UI when returning to foreground.

1
public/index.html
View File

@@ -60,6 +60,7 @@
<header class="chat-header">
<button id="menu-btn" class="menu-btn" title="菜单">☰</button>
<span id="chat-title" class="chat-title">新会话</span>
<button id="chat-session-id-btn" class="chat-session-id-btn" type="button" title="复制当前会话 ID" hidden>ID</button>
<button id="chat-agent-btn" class="chat-agent-btn" type="button" aria-haspopup="menu" aria-expanded="false">Claude</button>
<div id="chat-agent-menu" class="chat-agent-menu" hidden>
<button type="button" class="chat-agent-option active" data-agent="claude">Claude</button>

72
public/style.css
View File

@@ -804,6 +804,12 @@ body.session-loading-active {
line-height: 1;
}
.session-item-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.session-item-btn.copy-id {
min-width: 24px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
}
.session-item-btn.delete:hover { color: var(--danger); background: var(--accent-light); }
/* Inline edit in sidebar */
.session-item-edit-input {
@@ -872,6 +878,26 @@ body.session-loading-active {
transition: background 0.15s;
}
.chat-title:hover { background: var(--bg-tertiary); }
.chat-session-id-btn {
appearance: none;
max-width: 112px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid rgba(91, 126, 161, 0.22);
border-radius: 999px;
background: rgba(91, 126, 161, 0.1);
color: var(--info);
padding: 3px 9px;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.chat-session-id-btn:hover {
background: rgba(91, 126, 161, 0.16);
border-color: rgba(91, 126, 161, 0.34);
}
.chat-agent-btn {
appearance: none;
font-size: 11px;
@@ -1268,6 +1294,46 @@ body.session-loading-active {
color: #fff;
border-bottom-right-radius: 4px;
}
.msg.user.cross-conversation .msg-avatar {
background: var(--info);
color: #fff;
}
.msg.user.cross-conversation .msg-bubble {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), transparent),
rgba(91, 126, 161, 0.1);
border: 1px solid rgba(91, 126, 161, 0.24);
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(45, 31, 20, 0.05);
}
.cross-conversation-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 7px;
color: var(--info);
font-size: 11px;
font-weight: 800;
}
.cross-conversation-label {
min-width: 0;
overflow-wrap: anywhere;
}
.cross-conversation-id-btn {
appearance: none;
border: 1px solid rgba(91, 126, 161, 0.24);
border-radius: 999px;
background: rgba(255, 255, 255, 0.58);
color: var(--info);
padding: 2px 7px;
font: inherit;
font-size: 10px;
cursor: pointer;
}
.cross-conversation-id-btn:hover {
background: rgba(91, 126, 161, 0.14);
}
.msg.assistant .msg-bubble {
background: var(--bg-bubble-assistant);
border: 1px solid var(--border-color);
@@ -2149,6 +2215,12 @@ body.session-loading-active {
.chat-title {
font-size: 13px;
}
.chat-session-id-btn {
max-width: 82px;
padding-left: 7px;
padding-right: 7px;
font-size: 10px;
}
.theme-grid {
grid-template-columns: 1fr;
}