npm - aicq-chat-plugin - Versions diffs - 2.1.0 - Mend

aicq-chat-plugin 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/public/index.html ADDED Viewed

@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AICQ 加密聊天</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--primary:#4f46e5;--primary-light:#6366f1;--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--text:#f1f5f9;--text2:#94a3b8;--border:#475569;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b;--info:#3b82f6;--bubble-me:#4f46e5;--bubble-them:#334155}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden}
+/* Layout */
+.app{display:flex;width:100%;height:100%}
+.right-panel{width:280px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
+.main-panel{flex:1;display:flex;flex-direction:column;min-width:0}
+.chat-area{flex:1;overflow:hidden;display:flex;flex-direction:column}
+/* Right Panel */
+.agent-select{padding:12px;border-bottom:1px solid var(--border)}
+.agent-select select{width:100%;padding:8px 12px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:14px;cursor:pointer}
+.action-buttons{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border)}
+.action-btn{flex:1;padding:7px 4px;background:var(--bg3);color:var(--text2);border:none;border-radius:6px;cursor:pointer;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s}
+.action-btn:hover{background:var(--primary);color:#fff}
+.action-btn .icon{font-size:18px}
+.list-section{flex:1;overflow-y:auto}
+.list-section h4{padding:10px 12px 6px;color:var(--text2);font-size:12px;text-transform:uppercase;letter-spacing:1px}
+.friend-item,.group-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}
+.friend-item:hover,.group-item:hover{background:var(--bg3)}
+.friend-item.active,.group-item.active{background:rgba(79,70,229,.2);border-left-color:var(--primary)}
+.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;color:#fff}
+.avatar.online{box-shadow:0 0 0 2px var(--success)}
+.info{flex:1;min-width:0}
+.info .name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.info .status{font-size:11px;color:var(--text2)}
+.badge-online{color:var(--success);font-size:10px}
+.badge-offline{color:var(--text2);font-size:10px}
+.silent-badge{font-size:9px;background:var(--warning);color:#000;padding:1px 4px;border-radius:3px;margin-left:4px}
+/* Chat Header */
+.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--bg2)}
+.chat-header .avatar{width:40px;height:40px;font-size:16px}
+.chat-header .info .name{font-size:16px}
+.chat-header .actions{margin-left:auto;display:flex;gap:8px}
+.chat-header .actions button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:4px}
+.chat-header .actions button:hover{background:var(--bg3);color:var(--text)}
+/* Messages */
+.messages-container{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px}
+.load-more{text-align:center;padding:8px;color:var(--text2);font-size:12px;cursor:pointer}
+.load-more:hover{color:var(--primary)}
+.msg-row{display:flex;max-width:75%;gap:8px}
+.msg-row.me{margin-left:auto;flex-direction:row-reverse}
+.msg-row.them{margin-right:auto}
+.msg-bubble{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.6;word-break:break-word;position:relative;max-width:100%}
+.msg-row.me .msg-bubble{background:var(--bubble-me);color:#fff;border-bottom-right-radius:4px}
+.msg-row.them .msg-bubble{background:var(--bubble-them);color:var(--text);border-bottom-left-radius:4px}
+.msg-bubble img{max-width:300px;max-height:300px;border-radius:8px;margin-top:6px;cursor:pointer}
+.msg-bubble .file-link{display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(255,255,255,.1);border-radius:6px;margin-top:6px;cursor:pointer;color:inherit;text-decoration:none}
+.msg-bubble .file-link:hover{background:rgba(255,255,255,.2)}
+.msg-time{font-size:10px;color:var(--text2);margin-top:4px;text-align:right}
+.msg-row.them .msg-time{text-align:left}
+.msg-actions{position:absolute;top:-8px;right:-4px;display:none;gap:2px}
+.msg-row.me .msg-actions{right:auto;left:-4px}
+.msg-row:hover .msg-actions{display:flex}
+.msg-action-btn{width:24px;height:24px;border-radius:50%;background:var(--bg3);border:none;color:var(--text2);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
+.msg-action-btn:hover{background:var(--primary);color:#fff}
+.msg-action-btn.danger:hover{background:var(--danger)}
+/* Mention */
+.mention{color:var(--info);font-weight:600;cursor:pointer}
+.mention:hover{text-decoration:underline}
+/* Input Area */
+.input-area{padding:12px 16px;border-top:1px solid var(--border);background:var(--bg2);display:flex;flex-direction:column;gap:8px}
+.input-top{display:flex;gap:8px;align-items:center}
+.input-top input{flex:1;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;outline:none}
+.input-top input:focus{border-color:var(--primary)}
+.send-btn{padding:10px 20px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}
+.send-btn:hover{background:var(--primary-light)}
+.send-btn:disabled{opacity:.5;cursor:not-allowed}
+.input-toolbar{display:flex;gap:4px}
+.tool-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}
+.tool-btn:hover{background:var(--bg3);color:var(--text)}
+/* Modals */
+.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000}
+.modal-overlay.show{display:flex}
+.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto}
+.modal h3{margin-bottom:16px;font-size:18px}
+.modal .form-group{margin-bottom:14px}
+.modal label{display:block;margin-bottom:6px;font-size:13px;color:var(--text2)}
+.modal input,.modal select,.modal textarea{width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px}
+.modal textarea{min-height:80px;resize:vertical}
+.modal .btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
+.modal .btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}
+.modal .btn-primary{background:var(--primary);color:#fff}
+.modal .btn-primary:hover{background:var(--primary-light)}
+.modal .btn-secondary{background:var(--bg3);color:var(--text)}
+.modal .btn-danger{background:var(--danger);color:#fff}
+.qr-container{text-align:center;margin:16px 0}
+.qr-container img{max-width:256px;border-radius:8px}
+.key-display{background:var(--bg);padding:10px;border-radius:6px;font-family:monospace;font-size:12px;word-break:break-all;margin:8px 0;color:var(--text2)}
+.warning-box{background:rgba(239,68,68,.15);border:1px solid var(--danger);border-radius:6px;padding:12px;margin:12px 0;color:#fca5a5;font-size:13px}
+/* Empty State */
+.empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:16px;flex-direction:column;gap:12px}
+.empty-state .icon{font-size:48px;opacity:.3}
+/* Mention dropdown */
+.mention-dropdown{position:absolute;bottom:100%;left:0;background:var(--bg2);border:1px solid var(--border);border-radius:6px;max-height:200px;overflow-y:auto;z-index:100;display:none;min-width:200px}
+.mention-dropdown.show{display:block}
+.mention-option{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px}
+.mention-option:hover{background:var(--bg3)}
+/* Scrollbar */
+::-webkit-scrollbar{width:6px}
+::-webkit-scrollbar-track{background:var(--bg)}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--text2)}
+/* Markdown in bubbles */
+.msg-bubble p{margin:4px 0}
+.msg-bubble code{background:rgba(255,255,255,.1);padding:1px 4px;border-radius:3px;font-size:13px}
+.msg-bubble pre{background:rgba(0,0,0,.2);padding:8px;border-radius:6px;overflow-x:auto;margin:6px 0}
+.msg-bubble pre code{background:none;padding:0}
+.msg-bubble blockquote{border-left:3px solid var(--primary);padding-left:10px;margin:6px 0;color:var(--text2)}
+.msg-bubble ul,.msg-bubble ol{padding-left:20px;margin:4px 0}
+.msg-bubble a{color:var(--info)}
+.msg-bubble table{border-collapse:collapse;margin:6px 0}
+.msg-bubble th,.msg-bubble td{border:1px solid var(--border);padding:4px 8px;font-size:13px}
+</style>
+</head>
+<body>
+<div class="app">
+  <!-- Right Panel -->
+  <div class="right-panel">
+    <div class="agent-select">
+      <select id="agentSelect" onchange="switchAgent(this.value)">
+        <option value="">选择 Agent...</option>
+      </select>
+    </div>
+    <div class="action-buttons">
+      <button class="action-btn" onclick="showModal('addFriend')">
+        <span class="icon">👤</span>添加好友
+      </button>
+      <button class="action-btn" onclick="showModal('joinGroup')">
+        <span class="icon">👥</span>加入群聊
+      </button>
+      <button class="action-btn" onclick="showModal('settings')">
+        <span class="icon">⚙️</span>设置
+      </button>
+    </div>
+    <div class="list-section">
+      <h4>好友</h4>
+      <div id="friendsList"></div>
+      <h4>群聊</h4>
+      <div id="groupsList"></div>
+    </div>
+  </div>
+  <!-- Main Panel -->
+  <div class="main-panel">
+    <div id="emptyState" class="empty-state">
+      <div class="icon">💬</div>
+      <div>选择好友或群聊开始对话</div>
+    </div>
+    <div id="chatView" class="chat-area" style="display:none">
+      <div class="chat-header">
+        <div class="avatar" id="chatAvatar">U</div>
+        <div class="info">
+          <div class="name" id="chatName">-</div>
+          <div class="status" id="chatStatus">-</div>
+        </div>
+        <div class="actions">
+          <button onclick="toggleSilent()" id="silentBtn" title="静默模式">🔔</button>
+          <button onclick="showChatInfo()" title="信息">ℹ️</button>
+        </div>
+      </div>
+      <div class="messages-container" id="messagesContainer">
+        <div class="load-more" id="loadMore" onclick="loadMoreMessages()" style="display:none">加载更多消息</div>
+      </div>
+      <div class="input-area" style="position:relative">
+        <div class="mention-dropdown" id="mentionDropdown"></div>
+        <div class="input-top">
+          <input type="text" id="messageInput" placeholder="输入消息... (@提及)" onkeydown="handleInputKey(event)" oninput="handleInputChange()">
+          <button class="send-btn" onclick="sendMessage()">发送</button>
+        </div>
+        <div class="input-toolbar">
+          <button class="tool-btn" onclick="document.getElementById('fileInput').click()" title="上传文件">📎</button>
+          <button class="tool-btn" onclick="document.getElementById('imageInput').click()" title="上传图片">🖼️</button>
+          <button class="tool-btn" onclick="insertMarkdown('**','**')" title="粗体">𝐁</button>
+          <button class="tool-btn" onclick="insertMarkdown('`','`')" title="代码">⟨⟩</button>
+          <button class="tool-btn" onclick="insertMarkdown('$','$')" title="LaTeX">∑</button>
+        </div>
+        <input type="file" id="fileInput" style="display:none" onchange="uploadFile(this,'file')">
+        <input type="file" id="imageInput" style="display:none" accept="image/*" onchange="uploadFile(this,'image')">
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Modals -->
+<div class="modal-overlay" id="modal-addFriend">
+  <div class="modal">
+    <h3>添加好友</h3>
+    <div class="form-group">
+      <label>好友码 / 临时号码</label>
+      <input type="text" id="friendCodeInput" placeholder="输入6位好友码或临时号码">
+    </div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('addFriend')">取消</button>
+      <button class="btn btn-primary" onclick="addFriendByCode()">添加</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-joinGroup">
+  <div class="modal">
+    <h3>加入群聊</h3>
+    <div class="form-group">
+      <label>创建新群聊</label>
+      <input type="text" id="newGroupName" placeholder="群聊名称">
+    </div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('joinGroup')">取消</button>
+      <button class="btn btn-primary" onclick="createGroup()">创建</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-settings">
+  <div class="modal">
+    <h3>设置</h3>
+    <div style="display:flex;flex-direction:column;gap:12px">
+      <button class="btn btn-secondary" onclick="showQRCode()" style="width:100%;text-align:left">📱 二维码 — 客户端扫描添加好友</button>
+      <button class="btn btn-secondary" onclick="showNicknameModal()" style="width:100%;text-align:left">✏️ 修改昵称</button>
+      <button class="btn btn-secondary" onclick="generateFriendCode()" style="width:100%;text-align:left">🔢 生成好友码 (24小时有效)</button>
+      <button class="btn btn-secondary" onclick="showKeysModal()" style="width:100%;text-align:left">🔑 显示/重新生成密钥</button>
+      <button class="btn btn-secondary" onclick="createNewAgent()" style="width:100%;text-align:left">➕ 创建新 Agent</button>
+      <button class="btn btn-secondary" onclick="syncData()" style="width:100%;text-align:left">🔄 同步服务器数据</button>
+    </div>
+    <div class="btn-row" style="margin-top:20px">
+      <button class="btn btn-primary" onclick="hideModal('settings')">关闭</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-qr">
+  <div class="modal">
+    <h3>二维码 — 扫码添加好友</h3>
+    <div class="qr-container" id="qrContainer">加载中...</div>
+    <p style="font-size:12px;color:var(--text2);text-align:center">客户端扫描此二维码，通过验证后即可添加该 Agent 为好友</p>
+    <div class="btn-row">
+      <button class="btn btn-primary" onclick="hideModal('qr')">关闭</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-nickname">
+  <div class="modal">
+    <h3>修改昵称</h3>
+    <div class="form-group">
+      <label>新昵称</label>
+      <input type="text" id="nicknameInput" placeholder="输入新昵称">
+    </div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('nickname')">取消</button>
+      <button class="btn btn-primary" onclick="saveNickname()">保存</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-friendCode">
+  <div class="modal">
+    <h3>好友码</h3>
+    <div id="friendCodeDisplay" style="text-align:center;padding:20px">生成中...</div>
+    <p style="font-size:12px;color:var(--text2);text-align:center">24小时有效的6位数字好友码，对方添加此号码即可自动连接服务器并添加好友</p>
+    <div class="btn-row">
+      <button class="btn btn-primary" onclick="hideModal('friendCode')">关闭</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-keys">
+  <div class="modal">
+    <h3>密钥管理</h3>
+    <div class="warning-box">⚠️ 警告：私钥用于执行模式聊天。拥有私钥的人可以通过聊天安排任务执行、调用工具。请勿泄露私钥！</div>
+    <div id="keysDisplay">加载中...</div>
+    <div class="btn-row">
+      <button class="btn btn-danger" onclick="confirmRotateKeys()">重新生成密钥</button>
+      <button class="btn btn-primary" onclick="hideModal('keys')">关闭</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-confirmRotate">
+  <div class="modal">
+    <h3>⚠️ 确认重新生成密钥</h3>
+    <div class="warning-box">重新生成密钥后，旧密钥将立即失效。所有好友需要重新建立连接。此操作不可撤销！</div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('confirmRotate')">取消</button>
+      <button class="btn btn-danger" onclick="rotateKeys()">确认重新生成</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-createAgent">
+  <div class="modal">
+    <h3>创建新 Agent</h3>
+    <div class="form-group">
+      <label>Agent ID</label>
+      <input type="text" id="newAgentId" placeholder="输入唯一标识">
+    </div>
+    <div class="form-group">
+      <label>昵称</label>
+      <input type="text" id="newAgentName" placeholder="输入昵称">
+    </div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('createAgent')">取消</button>
+      <button class="btn btn-primary" onclick="doCreateAgent()">创建</button>
+    </div>
+  </div>
+</div>
+<div class="modal-overlay" id="modal-deleteMsg">
+  <div class="modal">
+    <h3>确认删除</h3>
+    <p>确定要删除这条消息吗？此操作不可撤销。</p>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="hideModal('deleteMsg')">取消</button>
+      <button class="btn btn-danger" onclick="doDeleteMessage()">删除</button>
+    </div>
+  </div>
+</div>
+<!-- Image Preview Modal -->
+<div class="modal-overlay" id="modal-imagePreview">
+  <div class="modal" style="max-width:90vw;max-height:90vh;padding:8px">
+    <img id="previewImage" style="max-width:100%;max-height:85vh;border-radius:8px">
+    <div class="btn-row"><button class="btn btn-primary" onclick="hideModal('imagePreview')">关闭</button></div>
+  </div>
+</div>
+<script>
+// ─── State ──────────────────────────────────────────────────────────
+let currentAgentId = '';
+let currentTarget = null;  // { id, name, type: 'friend'|'group', isOnline, silent }
+let chatMessages = [];
+let oldestTimestamp = null;
+let wsReconnectTimer = null;
+let pendingDeleteMsgId = null;
+const API = '';
+// ─── API Helper ─────────────────────────────────────────────────────
+async function api(method, path, body = null) {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } };
+  if (body) opts.body = JSON.stringify(body);
+  const resp = await fetch(API + path, opts);
+  return resp.json();
+}
+// ─── Initialize ─────────────────────────────────────────────────────
+async function init() {
+  await loadAgents();
+  await loadFriends();
+  await loadGroups();
+  // Auto-select first agent
+  const sel = document.getElementById('agentSelect');
+  if (sel.options.length > 1) {
+    currentAgentId = sel.options[1].value;
+    sel.value = currentAgentId;
+  }
+}
+// ─── Agents ─────────────────────────────────────────────────────────
+async function loadAgents() {
+  const data = await api('GET', '/api/agents');
+  const sel = document.getElementById('agentSelect');
+  sel.innerHTML = '<option value="">选择 Agent...</option>';
+  for (const a of data.agents || []) {
+    const opt = document.createElement('option');
+    opt.value = a.agent_id;
+    opt.textContent = a.nickname || a.agent_id;
+    if (a.agent_id === currentAgentId) opt.selected = true;
+    sel.appendChild(opt);
+  }
+}
+async function switchAgent(agentId) {
+  if (!agentId) return;
+  currentAgentId = agentId;
+  currentTarget = null;
+  showEmptyState();
+  await loadFriends();
+  await loadGroups();
+}
+function showEmptyState() {
+  document.getElementById('emptyState').style.display = 'flex';
+  document.getElementById('chatView').style.display = 'none';
+}
+function showChatView() {
+  document.getElementById('emptyState').style.display = 'none';
+  document.getElementById('chatView').style.display = 'flex';
+}
+async function createNewAgent() {
+  hideModal('settings');
+  showModal('createAgent');
+}
+async function doCreateAgent() {
+  const id = document.getElementById('newAgentId').value.trim();
+  const name = document.getElementById('newAgentName').value.trim();
+  if (!id) return alert('请输入 Agent ID');
+  await api('POST', '/api/agents', { agent_id: id, nickname: name });
+  hideModal('createAgent');
+  currentAgentId = id;
+  await loadAgents();
+  await loadFriends();
+}
+// ─── Friends ────────────────────────────────────────────────────────
+async function loadFriends() {
+  if (!currentAgentId) return;
+  const data = await api('GET', `/api/friends?agent_id=${currentAgentId}`);
+  const container = document.getElementById('friendsList');
+  container.innerHTML = '';
+  for (const f of data.friends || []) {
+    const div = document.createElement('div');
+    div.className = 'friend-item' + (currentTarget?.id === f.id && currentTarget?.type === 'friend' ? ' active' : '');
+    div.onclick = () => selectTarget(f.id, f.ai_name || f.fingerprint?.slice(0,8) || f.id.slice(0,8), 'friend', !!f.is_online);
+    div.innerHTML = `
+      <div class="avatar ${f.is_online ? 'online' : ''}">${(f.ai_name||f.id).charAt(0).toUpperCase()}</div>
+      <div class="info">
+        <div class="name">${f.ai_name || f.fingerprint?.slice(0,16) || f.id.slice(0,12)}</div>
+        <div class="status"><span class="${f.is_online ? 'badge-online' : 'badge-offline'}">●</span> ${f.is_online ? '在线' : '离线'}</div>
+      </div>`;
+    container.appendChild(div);
+  }
+}
+// ─── Groups ─────────────────────────────────────────────────────────
+async function loadGroups() {
+  if (!currentAgentId) return;
+  const data = await api('GET', `/api/groups?agent_id=${currentAgentId}`);
+  const container = document.getElementById('groupsList');
+  container.innerHTML = '';
+  for (const g of data.groups || []) {
+    const silent = false; // will check
+    const div = document.createElement('div');
+    div.className = 'group-item' + (currentTarget?.id === g.id && currentTarget?.type === 'group' ? ' active' : '');
+    div.onclick = () => selectTarget(g.id, g.name, 'group', true, silent);
+    div.innerHTML = `
+      <div class="avatar">👥</div>
+      <div class="info">
+        <div class="name">${g.name}${silent ? '<span class="silent-badge">静默</span>' : ''}</div>
+        <div class="status">${(JSON.parse(g.members_json||'[]')).length} 成员</div>
+      </div>`;
+    container.appendChild(div);
+  }
+}
+// ─── Select Chat Target ────────────────────────────────────────────
+async function selectTarget(id, name, type, isOnline = false, silent = false) {
+  currentTarget = { id, name, type, isOnline, silent };
+  showChatView();
+  // Update header
+  document.getElementById('chatAvatar').textContent = type === 'group' ? '👥' : name.charAt(0).toUpperCase();
+  document.getElementById('chatName').textContent = name;
+  document.getElementById('chatStatus').textContent = type === 'group' ? '群聊' : (isOnline ? '在线' : '离线');
+  document.getElementById('silentBtn').textContent = silent ? '🔕' : '🔔';
+  document.getElementById('silentBtn').style.display = type === 'group' ? '' : 'none';
+  // Reload lists to show active state
+  await loadFriends();
+  await loadGroups();
+  // Load chat history
+  await loadMessages();
+}
+// ─── Messages ───────────────────────────────────────────────────────
+async function loadMessages() {
+  if (!currentTarget || !currentAgentId) return;
+  chatMessages = [];
+  oldestTimestamp = null;
+  const container = document.getElementById('messagesContainer');
+  // Keep loadMore button, clear rest
+  container.innerHTML = '<div class="load-more" id="loadMore" onclick="loadMoreMessages()" style="display:none">加载更多消息</div>';
+  const data = await api('GET', `/api/chat/${currentTarget.id}?agent_id=${currentAgentId}&limit=50`);
+  const msgs = (data.messages || []).reverse();
+  if (msgs.length > 0) {
+    oldestTimestamp = msgs[0].timestamp;
+    document.getElementById('loadMore').style.display = msgs.length >= 50 ? 'block' : 'none';
+  }
+  chatMessages = msgs;
+  renderMessages();
+  scrollToBottom();
+}
+async function loadMoreMessages() {
+  if (!currentTarget || !oldestTimestamp) return;
+  const data = await api('GET', `/api/chat/${currentTarget.id}?agent_id=${currentAgentId}&limit=50&before=${oldestTimestamp}`);
+  const msgs = (data.messages || []).reverse();
+  if (msgs.length > 0) {
+    oldestTimestamp = msgs[0].timestamp;
+    chatMessages = [...msgs, ...chatMessages];
+    document.getElementById('loadMore').style.display = msgs.length >= 50 ? 'block' : 'none';
+    renderMessages();
+  } else {
+    document.getElementById('loadMore').style.display = 'none';
+  }
+}
+function renderMessages() {
+  const container = document.getElementById('messagesContainer');
+  const loadMore = document.getElementById('loadMore');
+  // Clear except loadMore
+  while (container.children.length > 1) container.removeChild(container.lastChild);
+  for (const msg of chatMessages) {
+    const isMe = msg.from_id === currentAgentId;
+    const row = document.createElement('div');
+    row.className = 'msg-row ' + (isMe ? 'me' : 'them');
+    row.dataset.msgId = msg.id;
+    const bubble = document.createElement('div');
+    bubble.className = 'msg-bubble';
+    // Render content based on type
+    let content = msg.content || '';
+    if (msg.type === 'image' && msg.file_url) {
+      content = renderMarkdown(content) + `<img src="${msg.file_url}" onclick="previewImage('${msg.file_url}')" alt="图片">`;
+    } else if (msg.type === 'file' && msg.file_url) {
+      content = renderMarkdown(content) + `<a class="file-link" href="${msg.file_url}" download>📄 ${msg.file_name || '下载文件'}</a>`;
+    } else {
+      // Process mentions
+      content = processMentions(content);
+      content = renderMarkdown(content);
+      content = renderLatex(content);
+    }
+    bubble.innerHTML = content;
+    // Time
+    const timeDiv = document.createElement('div');
+    timeDiv.className = 'msg-time';
+    timeDiv.textContent = formatTime(msg.timestamp);
+    // Action buttons
+    const actions = document.createElement('div');
+    actions.className = 'msg-actions';
+    actions.innerHTML = `
+      <button class="msg-action-btn" onclick="copyMessage('${msg.id}')" title="复制">📋</button>
+      <button class="msg-action-btn danger" onclick="confirmDeleteMessage('${msg.id}')" title="删除">🗑️</button>`;
+    bubble.appendChild(actions);
+    bubble.appendChild(timeDiv);
+    row.appendChild(bubble);
+    container.appendChild(row);
+  }
+  // Re-render KaTeX
+  renderAllLatex();
+}
+function renderMarkdown(text) {
+  try {
+    return marked.parse(text, { breaks: true, gfm: true });
+  } catch (e) {
+    return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+}
+function renderLatex(html) {
+  // Inline and block LaTeX with $$...$$ and $...$
+  return html.replace(/\$\$([\s\S]+?)\$\$/g, (m, tex) => {
+    try { return katex.renderToString(tex.trim(), { displayMode: true, throwOnError: false }); }
+    catch (e) { return m; }
+  }).replace(/\$([^\$]+?)\$/g, (m, tex) => {
+    try { return katex.renderToString(tex.trim(), { displayMode: false, throwOnError: false }); }
+    catch (e) { return m; }
+  });
+}
+function renderAllLatex() {
+  // Re-render any remaining LaTeX
+  try {
+    document.querySelectorAll('.msg-bubble').forEach(el => {
+      renderMathInElement(el, {
+        delimiters: [
+          {left: '$$', right: '$$', display: true},
+          {left: '$', right: '$', display: false},
+        ],
+        throwOnError: false
+      });
+    });
+  } catch(e) {}
+}
+function processMentions(text) {
+  // Highlight @mentions
+  return text.replace(/@(\S+)/g, '<span class="mention">@$1</span>');
+}
+function formatTime(ts) {
+  try {
+    const d = new Date(ts);
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  } catch { return ts; }
+}
+function scrollToBottom() {
+  const container = document.getElementById('messagesContainer');
+  container.scrollTop = container.scrollHeight;
+}
+// ─── Send Message ───────────────────────────────────────────────────
+async function sendMessage() {
+  const input = document.getElementById('messageInput');
+  const content = input.value.trim();
+  if (!content || !currentTarget || !currentAgentId) return;
+  input.value = '';
+  try {
+    await api('POST', '/api/chat/send', {
+      agent_id: currentAgentId,
+      targetId: currentTarget.id,
+      content,
+      type: 'text',
+      isGroup: currentTarget.type === 'group',
+      mentions: extractMentions(content),
+    });
+    await loadMessages();
+  } catch (e) {
+    alert('发送失败: ' + e.message);
+  }
+}
+function extractMentions(text) {
+  const mentions = [];
+  const re = /@(\S+)/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    mentions.push(m[1]);
+  }
+  return mentions;
+}
+function handleInputKey(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+}
+function handleInputChange() {
+  const input = document.getElementById('messageInput');
+  const val = input.value;
+  const cursorPos = input.selectionStart;
+  const textBefore = val.substring(0, cursorPos);
+  const atMatch = textBefore.match(/@(\S*)$/);
+  const dropdown = document.getElementById('mentionDropdown');
+  if (atMatch && currentTarget?.type === 'group') {
+    // Show mention dropdown
+    const query = atMatch[1].toLowerCase();
+    // Get group members from the group info
+    dropdown.innerHTML = '';
+    dropdown.innerHTML += `<div class="mention-option" onclick="insertMention('all')">📢 @所有人</div>`;
+    // Add friend suggestions
+    const friends = document.querySelectorAll('.friend-item .name');
+    friends.forEach(f => {
+      const name = f.textContent;
+      if (!query || name.toLowerCase().includes(query)) {
+        dropdown.innerHTML += `<div class="mention-option" onclick="insertMention('${name}')">👤 ${name}</div>`;
+      }
+    });
+    dropdown.classList.add('show');
+  } else {
+    dropdown.classList.remove('show');
+  }
+}
+function insertMention(name) {
+  const input = document.getElementById('messageInput');
+  const val = input.value;
+  const cursorPos = input.selectionStart;
+  const textBefore = val.substring(0, cursorPos);
+  const textAfter = val.substring(cursorPos);
+  const newText = textBefore.replace(/@\S*$/, '@' + name + ' ') + textAfter;
+  input.value = newText;
+  input.focus();
+  document.getElementById('mentionDropdown').classList.remove('show');
+}
+// ─── File Upload ────────────────────────────────────────────────────
+async function uploadFile(input, type) {
+  if (!input.files[0] || !currentTarget) return;
+  const formData = new FormData();
+  formData.append('file', input.files[0]);
+  formData.append('agent_id', currentAgentId);
+  formData.append('targetId', currentTarget.id);
+  formData.append('isGroup', currentTarget.type === 'group' ? 'true' : 'false');
+  try {
+    const resp = await fetch(API + '/api/upload', { method: 'POST', body: formData });
+    const data = await resp.json();
+    if (data.success) {
+      await loadMessages();
+    } else {
+      alert('上传失败: ' + (data.error || '未知错误'));
+    }
+  } catch (e) {
+    alert('上传失败: ' + e.message);
+  }
+  input.value = '';
+}
+// ─── Message Actions ────────────────────────────────────────────────
+function copyMessage(msgId) {
+  const row = document.querySelector(`.msg-row[data-msg-id="${msgId}"]`);
+  if (!row) return;
+  const bubble = row.querySelector('.msg-bubble');
+  // Get text content, excluding action buttons and time
+  const clone = bubble.cloneNode(true);
+  clone.querySelectorAll('.msg-actions, .msg-time').forEach(el => el.remove());
+  navigator.clipboard.writeText(clone.textContent.trim()).then(() => {
+    // Brief visual feedback
+  });
+}
+function confirmDeleteMessage(msgId) {
+  pendingDeleteMsgId = msgId;
+  showModal('deleteMsg');
+}
+async function doDeleteMessage() {
+  if (!pendingDeleteMsgId) return;
+  await api('DELETE', `/api/chat/${pendingDeleteMsgId}?agent_id=${currentAgentId}`);
+  hideModal('deleteMsg');
+  pendingDeleteMsgId = null;
+  await loadMessages();
+}
+// ─── Markdown Toolbar ───────────────────────────────────────────────
+function insertMarkdown(before, after) {
+  const input = document.getElementById('messageInput');
+  const start = input.selectionStart;
+  const end = input.selectionEnd;
+  const selected = input.value.substring(start, end);
+  const replacement = before + (selected || 'text') + after;
+  input.value = input.value.substring(0, start) + replacement + input.value.substring(end);
+  input.focus();
+  input.setSelectionRange(start + before.length, start + before.length + (selected || 'text').length);
+}
+// ─── Image Preview ──────────────────────────────────────────────────
+function previewImage(url) {
+  document.getElementById('previewImage').src = url;
+  showModal('imagePreview');
+}
+// ─── Silent Mode ────────────────────────────────────────────────────
+async function toggleSilent() {
+  if (!currentTarget || currentTarget.type !== 'group') return;
+  const newSilent = !currentTarget.silent;
+  await api('PUT', `/api/groups/${currentTarget.id}/silent?agent_id=${currentAgentId}`, { silent: newSilent });
+  currentTarget.silent = newSilent;
+  document.getElementById('silentBtn').textContent = newSilent ? '🔕' : '🔔';
+}
+// ─── Modal Helpers ──────────────────────────────────────────────────
+function showModal(name) { document.getElementById('modal-' + name).classList.add('show'); }
+function hideModal(name) { document.getElementById('modal-' + name).classList.remove('show'); }
+// ─── Add Friend ─────────────────────────────────────────────────────
+async function addFriendByCode() {
+  const code = document.getElementById('friendCodeInput').value.trim();
+  if (!code) return alert('请输入好友码');
+  try {
+    const result = await api('POST', '/api/friends/add', { temp_number: code, agent_id: currentAgentId });
+    if (result.success) {
+      alert('好友添加成功！');
+      hideModal('addFriend');
+      document.getElementById('friendCodeInput').value = '';
+      await loadFriends();
+    } else {
+      alert('添加失败: ' + (result.error || '未知错误'));
+    }
+  } catch (e) {
+    alert('添加失败: ' + e.message);
+  }
+}
+// ─── Create Group ───────────────────────────────────────────────────
+async function createGroup() {
+  const name = document.getElementById('newGroupName').value.trim();
+  if (!name) return alert('请输入群聊名称');
+  try {
+    await api('POST', '/api/groups', { name, agent_id: currentAgentId });
+    hideModal('joinGroup');
+    document.getElementById('newGroupName').value = '';
+    await loadGroups();
+  } catch (e) {
+    alert('创建失败: ' + e.message);
+  }
+}
+// ─── Settings Actions ───────────────────────────────────────────────
+async function showQRCode() {
+  hideModal('settings');
+  try {
+    const data = await api('GET', `/api/identity/qr?agent_id=${currentAgentId}`);
+    document.getElementById('qrContainer').innerHTML = data.qr
+      ? `<img src="${data.qr}" alt="QR Code">`
+      : '<p>生成失败</p>';
+  } catch (e) {
+    document.getElementById('qrContainer').innerHTML = '<p>生成失败: ' + e.message + '</p>';
+  }
+  showModal('qr');
+}
+function showNicknameModal() {
+  hideModal('settings');
+  showModal('nickname');
+}
+async function saveNickname() {
+  const nickname = document.getElementById('nicknameInput').value.trim();
+  if (!nickname) return alert('请输入昵称');
+  await api('POST', '/api/identity/nickname', { agent_id: currentAgentId, nickname });
+  hideModal('nickname');
+  await loadAgents();
+}
+async function generateFriendCode() {
+  hideModal('settings');
+  try {
+    const data = await api('POST', '/api/identity/friend-code', { agent_id: currentAgentId });
+    document.getElementById('friendCodeDisplay').innerHTML = data.code
+      ? `<div style="font-size:48px;font-weight:700;letter-spacing:8px;color:var(--primary)">${data.code}</div><div style="font-size:12px;color:var(--text2);margin-top:8px">有效期至: ${data.expires_at || '24小时'}</div>`
+      : '<p>生成失败</p>';
+  } catch (e) {
+    document.getElementById('friendCodeDisplay').innerHTML = '<p>生成失败: ' + e.message + '</p>';
+  }
+  showModal('friendCode');
+}
+async function showKeysModal() {
+  hideModal('settings');
+  try {
+    const data = await api('GET', `/api/identity/keys?agent_id=${currentAgentId}`);
+    document.getElementById('keysDisplay').innerHTML = `
+      <div><strong>Agent ID:</strong></div>
+      <div class="key-display">${data.agent_id || '-'}</div>
+      <div><strong>昵称:</strong> ${data.nickname || '-'}</div>
+      <div><strong>指纹:</strong></div>
+      <div class="key-display">${data.fingerprint || '-'}</div>
+      <div><strong>公钥 (签名):</strong> <small style="color:var(--text2)">用于连接服务端，获取好友列表</small></div>
+      <div class="key-display">${data.signing_public_key || '-'}</div>
+      <div><strong>公钥 (交换):</strong></div>
+      <div class="key-display">${data.exchange_public_key || '-'}</div>
+      <details style="margin-top:12px"><summary style="cursor:pointer;color:var(--warning)">🔑 显示私钥 (危险)</summary>
+        <div class="warning-box" style="margin-top:8px">⚠️ 私钥用于执行模式的聊天。拥有此私钥的人可以通过聊天安排任务执行、调用工具。请勿泄露！</div>
+        <div><strong>私钥 (签名):</strong></div>
+        <div class="key-display">${data.signing_secret_key || '-'}</div>
+        <div><strong>私钥 (交换):</strong></div>
+        <div class="key-display">${data.exchange_secret_key || '-'}</div>
+      </details>`;
+  } catch (e) {
+    document.getElementById('keysDisplay').innerHTML = '<p>加载失败: ' + e.message + '</p>';
+  }
+  showModal('keys');
+}
+function confirmRotateKeys() {
+  hideModal('keys');
+  showModal('confirmRotate');
+}
+async function rotateKeys() {
+  try {
+    await api('POST', '/api/identity/rotate-keys', { agent_id: currentAgentId });
+    hideModal('confirmRotate');
+    await showKeysModal();
+  } catch (e) {
+    alert('密钥轮换失败: ' + e.message);
+  }
+}
+async function syncData() {
+  hideModal('settings');
+  try {
+    await api('POST', '/api/sync', { agent_id: currentAgentId });
+    await loadFriends();
+    await loadGroups();
+    alert('同步完成');
+  } catch (e) {
+    alert('同步失败: ' + e.message);
+  }
+}
+function showChatInfo() {
+  if (!currentTarget) return;
+  alert(currentTarget.type === 'group'
+    ? `群聊: ${currentTarget.name}\nID: ${currentTarget.id}`
+    : `好友: ${currentTarget.name}\nID: ${currentTarget.id}\n状态: ${currentTarget.isOnline ? '在线' : '离线'}`);
+}
+// ─── Init ───────────────────────────────────────────────────────────
+init();
+// Periodic refresh
+setInterval(async () => {
+  if (currentAgentId) {
+    await loadFriends();
+    await loadGroups();
+  }
+}, 30000);
+</script>
+</body>
+</html>