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.