@bolloon/bolloon-agent 0.1.32 → 0.1.33

package/dist/web/client.js

@@ -169,6 +169,19 @@ function startV3GlobalSSE() {
               log.scrollTop = log.scrollHeight;
             }
           }
+        } else if (msg.type === 'cross-mention-received') {
+          // v3 新增: A 节点上, 某个 channel 的 LLM @-mention 了另一个 channel, SSE 推过来
+          // 在所有打开的 chat modal 上显示"AI 跨渠道 @-mention" 提示
+          const allModals = document.querySelectorAll('.rcm-mention-toast, [id^="rcm-log"]');
+          for (const log of allModals) {
+            if (!log.id) continue;
+            const toast = document.createElement('div');
+            toast.style.cssText = 'margin:6px 0;padding:8px 10px;background:#fce7f3;border-left:3px solid #ec4899;border-radius:4px;font-size:12px;color:#831843;';
+            const fromTxt = msg.source === 'ai-mention-remote' ? `远端节点 ${(msg.fromPublicKey || '').substring(0, 8)}… 的 ${msg.originChannelName}` : `${msg.originChannelName} (本地)`;
+            toast.innerHTML = `📡 <b>${fromTxt}</b> @-mention → 当前 channel: <i>${escapeHtml((msg.text || '').slice(0, 100))}</i>${msg.text && msg.text.length > 100 ? '…' : ''}`;
+            log.appendChild(toast);
+            log.scrollTop = log.scrollHeight;
+          }
         }
       } catch (err) {
         console.error('[v3] 全局 SSE 解析失败:', err);
@@ -1586,6 +1599,329 @@ input.addEventListener('keydown', (e) => {
   }
 });
 
+// ============ v3 新增: @-mention 单选自动补全 (主聊天框 #input) ============
+let mentionChannels = []; // { id, name, source: 'local'|'remote', ownerPublicKey? }
+let mentionDropdownEl = null;
+let mentionHighlightIdx = -1;
+let mentionQuery = null;
+let mentionAnchor = -1;        // @ 字符的绝对位置 (固定, 直到 dropdown 关闭)
+let mentionBlockEnd = -1;      // 插入区块的终点 (单选模式下 = anchor + 1 + query)
+let mentionDocMousedownBound = false; // 防止重复注册 document mousedown
+
+function ensureMentionDocMousedown() {
+  if (mentionDocMousedownBound) return;
+  mentionDocMousedownBound = true;
+  document.addEventListener('mousedown', (e) => {
+    if (mentionDropdownEl && !mentionDropdownEl.contains(e.target) && e.target !== input) {
+      closeMentionDropdown();
+    }
+  });
+}
+
+async function refreshMentionChannels() {
+  try {
+    const res = await fetch('/channels');
+    const local = res.ok ? await res.json() : [];
+    const r2 = await fetch('/api/remote-channels');
+    const remoteData = r2.ok ? await r2.json() : { peers: [] };
+    const remote = [];
+    for (const p of (remoteData.peers || [])) {
+      for (const c of (p.channels || [])) {
+        remote.push({ id: c.id, name: c.name, source: 'remote', ownerPublicKey: p.peerId });
+      }
+    }
+    mentionChannels = [
+      ...(Array.isArray(local) ? local.map(c => ({ id: c.id, name: c.name, source: 'local' })) : []),
+      ...remote
+    ];
+  } catch (err) {
+    console.warn('[mention] 加载渠道列表失败:', err);
+  }
+}
+
+function closeMentionDropdown() {
+  if (mentionDropdownEl) { mentionDropdownEl.remove(); mentionDropdownEl = null; }
+  mentionHighlightIdx = -1;
+  mentionQuery = null;
+  mentionAnchor = -1;
+  mentionBlockEnd = -1;
+  // 不重置 mentionDocMousedownBound — 监听器是空操作 (mentionDropdownEl === null) 留着无妨, 避免重复绑
+}
+
+function getCurrentMentionQuery() {
+  const pos = input.selectionStart || input.value.length;
+  const before = input.value.slice(0, pos);
+  const m = before.match(/@([一-龥A-Za-z0-9_\-]{0,30})$/);
+  return m ? { query: m[1], anchor: pos - m[0].length } : null;
+}
+
+function renderMentionDropdown(items) {
+  if (!mentionDropdownEl) {
+    mentionDropdownEl = document.createElement('div');
+    mentionDropdownEl.id = 'mention-dropdown';
+    mentionDropdownEl.style.cssText = 'position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);max-height:240px;overflow-y:auto;z-index:10000;font-size:13px;min-width:240px;';
+    document.body.appendChild(mentionDropdownEl);
+    ensureMentionDocMousedown();
+  }
+  // v3 简化: 单选 + 立即填入输入框
+  const headerHtml = `<div style="padding:6px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:11px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;">
+    <span>💡 点击或回车选中 → 自动填入输入框</span>
+    <span style="color:#9ca3af;">↑↓ 移动</span>
+  </div>`;
+
+  if (items.length === 0) {
+    mentionDropdownEl.innerHTML = headerHtml + '<div style="padding:10px 12px;color:#6b7280;font-size:12px;">没有匹配的渠道</div>';
+  } else {
+    const rows = items.map((c, i) => {
+      const isLocal = c.source === 'local';
+      const tag = isLocal ? '🏠 本地' : '🌐 远端';
+      const owner = !isLocal && c.ownerPublicKey ? ` <span style="color:#9ca3af;font-size:11px;">(${c.ownerPublicKey.substring(0, 8)}…)</span>` : '';
+      // 浅蓝 = 键盘高亮, 白 = 普通
+      const bg = i === mentionHighlightIdx ? '#eff6ff' : '#fff';
+      const borderLeft = i === mentionHighlightIdx ? '3px solid #93c5fd' : '3px solid transparent';
+      return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+        <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
+        <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
+      </div>`;
+    }).join('');
+    mentionDropdownEl.innerHTML = headerHtml + rows;
+    mentionDropdownEl.querySelectorAll('.mention-item').forEach((el) => {
+      const idx = parseInt(el.getAttribute('data-idx'));
+      el.onclick = () => {
+        // 单击 → 立即填入输入框 + 关闭 dropdown
+        applyMention(items[idx]);
+      };
+      // v3 关键修复: mouseenter 只更新高亮, 不重建 dropdown — 否则用户实际点击的 element 被销毁,
+      // click 事件落到新 element, 但实际触发的是新 element 的 onclick (空), 而不是被销毁前那个
+      el.onmouseenter = () => {
+        if (mentionHighlightIdx === idx) return;
+        mentionHighlightIdx = idx;
+        // 只更新背景色 + 左边框, 不重建 innerHTML
+        const itemEls = mentionDropdownEl.querySelectorAll('.mention-item');
+        itemEls.forEach((ie, ii) => {
+          const isHi = ii === idx;
+          ie.style.background = isHi ? '#eff6ff' : '#fff';
+          ie.style.borderLeft = isHi ? '3px solid #93c5fd' : '3px solid transparent';
+        });
+      };
+    });
+  }
+  const rect = input.getBoundingClientRect();
+  mentionDropdownEl.style.left = rect.left + 'px';
+  mentionDropdownEl.style.top = 'auto';
+  mentionDropdownEl.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
+}
+
+/** v3 单选: 把 @xxx 替换为 @渠道名 + 空格, 关闭 dropdown, 光标放空格后 */
+function applyMention(channel) {
+  const anchor = mentionAnchor;
+  const blockEnd = mentionBlockEnd >= 0 ? mentionBlockEnd : (anchor + 1 + (mentionQuery || '').length);
+  if (anchor < 0 || anchor > input.value.length || input.value[anchor] !== '@') {
+    closeMentionDropdown();
+    return;
+  }
+  const before = input.value.slice(0, anchor);   // 含 @
+  const after = input.value.slice(blockEnd);     // query 之后 (可能用户已输入正文)
+  const insert = `@${channel.name} `;
+  input.value = before + insert + after;
+  const newPos = before.length + insert.length;
+  input.focus();
+  input.setSelectionRange(newPos, newPos);
+  closeMentionDropdown();
+}
+
+function updateMentionDropdown() {
+  if (!mentionChannels.length) return;
+  const m = getCurrentMentionQuery();
+  if (!m) { closeMentionDropdown(); return; }
+  // 只在 dropdown 刚打开时设置 anchor (blockEnd 跟着 insert 走)
+  if (mentionAnchor === -1) {
+    mentionAnchor = m.anchor;
+    mentionBlockEnd = m.anchor + 1 + (m.query || '').length;
+  }
+  mentionQuery = m.query;
+  const q = m.query.toLowerCase();
+  const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+  mentionHighlightIdx = items.length > 0 ? 0 : -1;
+  renderMentionDropdown(items);
+}
+
+input.addEventListener('input', () => {
+  updateMentionDropdown();
+});
+input.addEventListener('keydown', (e) => {
+  if (!mentionDropdownEl) return;
+  const items = mentionDropdownEl.querySelectorAll('.mention-item');
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    if (items.length === 0) return;
+    mentionHighlightIdx = (mentionHighlightIdx + 1) % items.length;
+    const q = (mentionQuery || '').toLowerCase();
+    const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    renderMentionDropdown(filtered);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    if (items.length === 0) return;
+    mentionHighlightIdx = (mentionHighlightIdx - 1 + items.length) % items.length;
+    const q = (mentionQuery || '').toLowerCase();
+    const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    renderMentionDropdown(filtered);
+  } else if (e.key === 'Enter' || e.key === 'Tab') {
+    // 单选: Enter/Tab 立即填入 + 关闭 dropdown
+    if (items.length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      const q = (mentionQuery || '').toLowerCase();
+      const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+      const cur = filtered[mentionHighlightIdx];
+      if (cur) applyMention(cur);
+    }
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    closeMentionDropdown();
+  }
+}, true);  // capture phase, 先于 sendMessage 那个 keydown
+
+// 初始化
+refreshMentionChannels();
+// 定时刷新 (channel 列表可能变化)
+setInterval(refreshMentionChannels, 5000);
+// 远端 channel 列表变化时也刷新 (loadRemoteChannels 是 function declaration, 不能重新赋值)
+// 用 setInterval 兜底: 每 5s 刷一次 (已经有定时器, 这里不重复)
+// 实际上 refreshMentionChannels() 已经在 setInterval 里跑了
+
+// v3 新增: 通用版 @-autocomplete (任意 input 元素都能挂, 比如 B 端的 #rcm-input)
+function setupMentionAutocomplete(inputEl) {
+  if (!inputEl || inputEl.__mentionBound) return;
+  inputEl.__mentionBound = true;
+  let localQuery = null;
+  let localAnchor = -1;       // @ 字符的绝对位置 (固定, 直到 dropdown 关闭)
+  let localBlockEnd = -1;     // 插入区块的终点
+  let localHighlight = -1;
+
+  function closeLocal() {
+    if (inputEl.__mentionDD) { inputEl.__mentionDD.remove(); inputEl.__mentionDD = null; }
+    localHighlight = -1; localQuery = null; localAnchor = -1; localBlockEnd = -1;
+  }
+
+  function detectQuery() {
+    const pos = inputEl.selectionStart || inputEl.value.length;
+    const before = inputEl.value.slice(0, pos);
+    const m = before.match(/@([一-龥A-Za-z0-9_\-]{0,30})$/);
+    return m ? { query: m[1], anchor: pos - m[0].length } : null;
+  }
+
+  // v3 单选: 点击 / Enter 立即填入输入框 + 关闭 dropdown
+  function applyLocal(channel) {
+    const anchor = localAnchor;
+    const blockEnd = localBlockEnd >= 0 ? localBlockEnd : (anchor + 1 + (localQuery || '').length);
+    if (anchor < 0 || anchor > inputEl.value.length || inputEl.value[anchor] !== '@') {
+      closeLocal();
+      return;
+    }
+    const before = inputEl.value.slice(0, anchor);   // 含 @
+    const after = inputEl.value.slice(blockEnd);
+    const insert = `@${channel.name} `;
+    inputEl.value = before + insert + after;
+    const newPos = before.length + insert.length;
+    inputEl.focus();
+    inputEl.setSelectionRange(newPos, newPos);
+    closeLocal();
+  }
+
+  function renderLocal(items) {
+    if (!inputEl.__mentionDD) {
+      inputEl.__mentionDD = document.createElement('div');
+      inputEl.__mentionDD.style.cssText = 'position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);max-height:240px;overflow-y:auto;z-index:10001;font-size:13px;min-width:240px;';
+      document.body.appendChild(inputEl.__mentionDD);
+    }
+    const headerHtml = `<div style="padding:6px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:11px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;">
+      <span>💡 点击或回车选中 → 自动填入输入框</span>
+      <span style="color:#9ca3af;">↑↓ 移动</span>
+    </div>`;
+    if (items.length === 0) {
+      inputEl.__mentionDD.innerHTML = headerHtml + '<div style="padding:10px 12px;color:#6b7280;font-size:12px;">没有匹配的渠道</div>';
+    } else {
+      inputEl.__mentionDD.innerHTML = headerHtml + items.map((c, i) => {
+        const isLocal = c.source === 'local';
+        const tag = isLocal ? '🏠 本地' : '🌐 远端';
+        const owner = !isLocal && c.ownerPublicKey ? ` <span style="color:#9ca3af;font-size:11px;">(${c.ownerPublicKey.substring(0, 8)}…)</span>` : '';
+        const bg = i === localHighlight ? '#eff6ff' : '#fff';
+        const borderLeft = i === localHighlight ? '3px solid #93c5fd' : '3px solid transparent';
+        return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+          <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
+          <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
+        </div>`;
+      }).join('');
+      inputEl.__mentionDD.querySelectorAll('.mention-item').forEach((el) => {
+        const idx = parseInt(el.getAttribute('data-idx'));
+        el.onclick = () => applyLocal(items[idx]);
+        // v3 关键修复: mouseenter 只更新高亮, 不重建 dropdown (同主 input)
+        el.onmouseenter = () => {
+          if (localHighlight === idx) return;
+          localHighlight = idx;
+          const itemEls = inputEl.__mentionDD.querySelectorAll('.mention-item');
+          itemEls.forEach((ie, ii) => {
+            const isHi = ii === idx;
+            ie.style.background = isHi ? '#eff6ff' : '#fff';
+            ie.style.borderLeft = isHi ? '3px solid #93c5fd' : '3px solid transparent';
+          });
+        };
+      });
+    }
+    const rect = inputEl.getBoundingClientRect();
+    inputEl.__mentionDD.style.left = rect.left + 'px';
+    inputEl.__mentionDD.style.top = 'auto';
+    inputEl.__mentionDD.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
+  }
+
+  function update() {
+    if (!mentionChannels.length) return;
+    const m = detectQuery();
+    if (!m) { closeLocal(); return; }
+    if (localAnchor === -1) {
+      localAnchor = m.anchor;
+      localBlockEnd = m.anchor + 1 + (m.query || '').length;
+    }
+    localQuery = m.query;
+    const q = m.query.toLowerCase();
+    const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    localHighlight = items.length > 0 ? 0 : -1;
+    renderLocal(items);
+  }
+
+  inputEl.addEventListener('input', update);
+  inputEl.addEventListener('keydown', (e) => {
+    if (!inputEl.__mentionDD) return;
+    const items = inputEl.__mentionDD.querySelectorAll('.mention-item');
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      localHighlight = (localHighlight + 1) % items.length;
+      const q = (localQuery || '').toLowerCase();
+      renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      localHighlight = (localHighlight - 1 + items.length) % items.length;
+      const q = (localQuery || '').toLowerCase();
+      renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      if (items.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        const q = (localQuery || '').toLowerCase();
+        const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+        const cur = filtered[localHighlight];
+        if (cur) applyLocal(cur);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      closeLocal();
+    }
+  }, true);
+}
+
 // 拖拽落点: 把判断库里的判断拖到输入框, 直接作为指令发给 AI (走"代我决定"路径).
 // 用户拖进来后输入框被预填, 点发送就把这条判断作为指令交给当前 agent.
 const inputArea = document.querySelector('.input-area');
@@ -2811,14 +3147,36 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
         log.appendChild(jh);
       }
 
-      // 2. 显示历史 messages
+      // 2. 显示历史 messages (带 source 标签: 内部 owner vs 远端访客)
       const msgs = data.messages || [];
       if (msgs.length === 0) {
         appendSystem('还没有历史消息, 在下面发第一条吧', 'info');
       } else {
-        appendSystem(`从远端拉到 ${msgs.length} 条历史消息`, 'info');
+        appendSystem(`从远端拉到 ${msgs.length} 条历史消息 (A 内部 owner + B 远端访客 都会显示)`, 'info');
         for (const m of msgs) {
-          append(m.content || '', m.type === 'user' ? 'user' : 'ai');
+          const isUser = m.type === 'user';
+          // v3: 加 source 标签
+          let tag = '';
+          if (isUser) {
+            if (m.source === 'remote') {
+              tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">🌐 远端访客${m.fromPublicKey ? ' (' + m.fromPublicKey.substring(0, 8) + '…)' : ''} → A 的 channel</div>`;
+            } else {
+              tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">👤 A (内部 owner) → A 的 channel</div>`;
+            }
+          } else {
+            tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">🤖 A 的 LLM (在 A 节点上跑)</div>`;
+          }
+          const bubble = document.createElement('div');
+          const isRemoteUser = isUser && m.source === 'remote';
+          bubble.style.cssText = `padding:8px 10px;margin:4px 0;border-radius:6px;font-size:13px;line-height:1.4;max-width:80%;word-wrap:break-word;${
+            isUser
+              ? (isRemoteUser
+                  ? 'background:#dbeafe;color:#1e3a8a;margin-right:auto;text-align:left;border:1px solid #93c5fd;'
+                  : 'background:#f3f4f6;color:#374151;margin-left:auto;text-align:left;border:1px solid #d1d5db;')
+              : 'background:#e5e7eb;color:#111;'
+          }`;
+          bubble.innerHTML = tag + `<div>${escapeHtml(m.content || '')}</div>`;
+          log.appendChild(bubble);
         }
         // 滚到底部
         setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
@@ -2855,6 +3213,8 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   };
   sendBtn.onclick = doSend;
   inputEl.onkeydown = (e) => { if (e.key === 'Enter') doSend(); };
+  // v3 新增: B 端远端 chat 也支持 @-autocomplete
+  setupMentionAutocomplete(inputEl);
   inputEl.focus();
   startV3GlobalSSE();
 
@@ -3407,19 +3767,23 @@ function openAgentAddModal(existingChannel) {
   if (existingChannel) {
     agentAddTitle.textContent = '配置智能体：' + existingChannel.name;
     agentAddName.value = existingChannel.name || '';
-    agentAddName.readOnly = true; // 改名走 PATCH
+    agentAddName.readOnly = false; // v3: 名字改成可编辑 (PATCH 支持更新 name)
+    agentAddName.placeholder = '输入新名称';
     agentAddWallet.value = existingChannel.walletAddress || '';
     agentAddAutoTools.checked = !!existingChannel.autoInvokeTools;
     agentAddConfirmBtn.dataset.mode = 'update';
     agentAddConfirmBtn.dataset.channelId = existingChannel.id;
+    agentAddConfirmBtn.dataset.originalName = existingChannel.name || '';
   } else {
     agentAddTitle.textContent = '添加智能体';
     agentAddName.value = '';
     agentAddName.readOnly = false;
+    agentAddName.placeholder = '例如: 交易助手';
     agentAddWallet.value = '';
     agentAddAutoTools.checked = true;
     agentAddConfirmBtn.dataset.mode = 'create';
     delete agentAddConfirmBtn.dataset.channelId;
+    delete agentAddConfirmBtn.dataset.originalName;
   }
   agentAddWalletInfo.style.display = 'none';
   agentAddWalletInfo.innerHTML = '';
@@ -3531,13 +3895,16 @@ if (agentAddConfirmBtn) {
       } else {
         // update
         const channelId = agentAddConfirmBtn.dataset.channelId;
+        const originalName = agentAddConfirmBtn.dataset.originalName || '';
+        // v3 新增: 名字改了才发 (没改就不发, 保持原状)
+        const body = { walletAddress: walletAddress || null, autoInvokeTools };
+        if (name && name !== originalName) {
+          body.name = name;
+        }
         const res = await fetch(`/channels/${channelId}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            walletAddress: walletAddress || null,
-            autoInvokeTools
-          })
+          body: JSON.stringify(body)
         });
         if (!res.ok) throw new Error('update failed');
         const updated = await res.json();