@wendongfly/myhi 1.3.168 → 1.3.170

package/dist/chat.html

@@ -210,6 +210,22 @@
     #img-preview .img-remove:hover { background: var(--red); color: #fff; }
     #input-box.focused { border-color: var(--blue); }
     #input-box.disabled { opacity: 0.5; pointer-events: none; }
+
+    /* @ 文件引用补全浮层（挂在 body 上，fixed 定位在输入框上方） */
+    #mention-box {
+      position: fixed; z-index: 95; display: none;
+      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+      box-shadow: 0 8px 30px rgba(0,0,0,0.45);
+      max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
+      font-size: 0.8rem; padding: 0.25rem;
+    }
+    #mention-box .mi { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 7px; cursor: pointer; }
+    #mention-box .mi.on { background: var(--surface3); }
+    #mention-box .mi .m-ico { flex-shrink: 0; }
+    #mention-box .mi .m-dir { color: var(--muted); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
+    #mention-box .mi .m-name { color: var(--text); white-space: nowrap; }
+    #mention-box .mi .m-hint { color: var(--muted); font-size: 0.66rem; margin-left: auto; padding-left: 0.5rem; flex-shrink: 0; }
+    #mention-box .mi-empty { padding: 0.55rem 0.7rem; color: var(--muted); font-size: 0.75rem; }
     #cmd-input { display: block; width: 100%; background: transparent; color: var(--text); border: none; padding: 0.6rem 0.75rem 0.3rem; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem; outline: none; resize: none; line-height: 1.5; max-height: 140px; overflow-y: auto; }
     #cmd-input::placeholder { color: var(--dimmer); }
     @media (pointer: coarse) { #cmd-input { font-size: 1rem; padding: 0.75rem 0.75rem 0.35rem; line-height: 1.55; } }
@@ -276,10 +292,11 @@
     .fp-list { flex: 1; overflow-y: auto; padding: 0.25rem 0; }
     .fp-item { display: flex; align-items: center; padding: 0.5rem 0.75rem; gap: 0.5rem; cursor: pointer; font-size: 0.82rem; color: var(--text); }
     .fp-item:active { background: var(--surface2); }
-    .fp-item .fp-icon { width: 1.2rem; text-align: center; flex-shrink: 0; }
-    .fp-item .fp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .fp-item .fp-size { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
-    .fp-item .fp-dl { color: var(--blue); font-size: 0.7rem; text-decoration: none; padding: 0.2rem 0.4rem; }
+    .fp-item .fp-icon { width: 1.2rem; text-align: center; flex-shrink: 0; align-self: flex-start; padding-top: 0.05rem; }
+    /* 文件名允许换行显全名（长报告名不再被掐断）；动作收成图标省宽度 */
+    .fp-item .fp-name { flex: 1; min-width: 0; word-break: break-all; line-height: 1.35; }
+    .fp-item .fp-size { color: var(--muted); font-size: 0.7rem; white-space: nowrap; align-self: flex-start; padding-top: 0.05rem; }
+    .fp-item .fp-dl { color: var(--blue); font-size: 0.78rem; text-decoration: none; padding: 0.2rem 0.3rem; flex-shrink: 0; align-self: flex-start; }
     .fp-empty { text-align: center; color: var(--muted); padding: 2rem 0.75rem; font-size: 0.85rem; }
     .fp-drop-zone {
       margin: 0.5rem 0.75rem; padding: 1.5rem; border: 2px dashed var(--border); border-radius: 8px;
@@ -771,14 +788,11 @@
     <div class="action-sheet-box" style="max-height:85vh;display:flex;flex-direction:column">
       <div class="action-sheet-title">📥 灵感收件箱 · 草稿</div>
       <div style="font-size:0.68rem;color:var(--muted);padding:0 0.2rem 0.5rem;line-height:1.55">
-        临时想法随时<b>记在这儿</b>（可带图片，能连着记多条，带记录时间）；AI 正忙时在消息框按回车也会自动转存进来。
-        <b>取回</b>=把内容放回消息框并<b>出队删除</b>。每条草稿都<b>记着属于哪个任务</b>，过几天也认得出。草稿只存在本机，没有发给模型。
-        <br>勾「<b>自动接力</b>」的草稿会在本轮干完、会话空闲后<b>自动发出</b>（你人不在也跑，按记录先后排队）；
-        <span style="color:var(--yellow)">默认关</span>，不勾就只能手动取回。被中断或出错收尾的轮次不接力。
+        随手记想法：先存这儿，AI 干完后<b>取回</b>发送；勾「<b>自动接力</b>」则干完自动发出。只存本机，细节见各条目按钮。
       </div>
       <!-- 就地新增：不必先在消息框打字再"提取"，直接在这儿写 -->
       <div style="border-top:1px solid var(--surface2);padding:0.5rem 0.2rem">
-        <textarea id="inbox-new-text" rows="3" spellcheck="false" placeholder="写下临时想法…　截图可直接 Ctrl+V 粘进来　（能连着记多条）"
+        <textarea id="inbox-new-text" rows="3" spellcheck="false" placeholder="写下临时想法…（截图可直接 Ctrl+V 粘进来）"
                   style="width:100%;box-sizing:border-box;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:0.5rem;font-size:0.82rem;resize:vertical"></textarea>
         <div id="inbox-new-img" style="display:none;align-items:center;gap:0.4rem;margin-top:0.35rem;font-size:0.7rem;color:var(--text2)">
           <span>📷</span><span id="inbox-new-img-name" style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
@@ -2871,7 +2885,115 @@
       cmdInput.focus();
     }
 
+    // ── @ 文件引用补全 ─────────────────────────────────────────
+    //   输入框里打出 @词（@ 后无空白）时浮出文件搜索层：递归搜会话目录、
+    //   最近修改优先；选中把 @词 替换成真实相对路径。「让 AI 读某个文件」
+    //   不再需要手打文件名。也可在 📄 文件面板点「引用」达到同样效果。
+    const _mention = { open: false, start: -1, items: [], idx: 0 };
+    const _mentionBox = document.createElement('div');
+    _mentionBox.id = 'mention-box';
+    document.body.appendChild(_mentionBox);
+    let _mentionTimer = null;
+
+    // 光标处是否正打着一个 @词 —— 是则返回 { start }（@ 的下标）
+    function mentionToken() {
+      const pos = cmdInput.selectionStart ?? cmdInput.value.length;
+      const val = cmdInput.value;
+      const from = val.lastIndexOf('@', Math.max(0, pos - 1));
+      if (from < 0) return null;
+      if (from > 0 && /[A-Za-z0-9._%-]/.test(val[from - 1])) return null;  // 邮箱等普通文本不触发
+      if (/[\s\r\n]/.test(val.slice(from + 1, pos))) return null;          // @ 后已有空白 = 早结束了
+      return { start: from };
+    }
+
+    function mentionClose() {
+      _mention.open = false;
+      _mention.items = [];
+      _mentionBox.style.display = 'none';
+    }
+
+    function mentionRowHTML(f, i) {
+      const path = f.name;
+      const cut = path.lastIndexOf('/');
+      const dir = cut >= 0 ? path.slice(0, cut + 1) : '';
+      const name = cut >= 0 ? path.slice(cut + 1) : path;
+      const ico = f.dir ? '📁' : (isEditableFile(name) ? '📝' : '📄');
+      const hint = f.dir ? '文件夹' : '引用';
+      return `<div class="mi ${i === _mention.idx ? 'on' : ''}" data-i="${i}"><span class="m-ico">${ico}</span><span class="m-dir">${escHtml(dir)}</span><span class="m-name">${escHtml(name)}</span><span class="m-hint">${hint}</span></div>`;
+    }
+
+    function mentionRender() {
+      _mentionBox.innerHTML = _mention.items.length
+        ? _mention.items.map((f, i) => mentionRowHTML(f, i)).join('')
+        : '<div class="mi-empty">没有匹配的文件</div>';
+      const r = cmdInput.getBoundingClientRect();
+      _mentionBox.style.left = Math.max(8, r.left) + 'px';
+      _mentionBox.style.width = Math.max(r.width, 240) + 'px';
+      _mentionBox.style.bottom = (window.innerHeight - r.top + 6) + 'px';
+      _mentionBox.style.display = 'block';
+      const on = _mentionBox.querySelector('.mi.on');
+      if (on) on.scrollIntoView({ block: 'nearest' });
+    }
+
+    function mentionSearch(token) {
+      clearTimeout(_mentionTimer);
+      _mentionTimer = setTimeout(async () => {
+        try {
+          const r = await fetch(`/api/files/${SESSION_ID}/search?q=${encodeURIComponent(token)}`);
+          const d = await r.json();
+          if (!_mention.open || !d.ok) return;
+          _mention.items = d.files || [];
+          _mention.idx = 0;
+          mentionRender();
+        } catch { mentionClose(); }
+      }, 140);
+    }
+
+    function mentionUpdate() {
+      const t = mentionToken();
+      if (!t) return mentionClose();
+      _mention.open = true;
+      _mention.start = t.start;
+      mentionSearch(cmdInput.value.slice(t.start + 1, cmdInput.selectionStart ?? cmdInput.value.length));
+    }
+
+    function mentionPick(f) {
+      // 目录带尾斜杠插入（「迁移到 docs/」一眼看出是文件夹），文件带空格结尾
+      const path = f.name + (f.dir ? '/' : '');
+      const pos = cmdInput.selectionStart ?? cmdInput.value.length;
+      const before = cmdInput.value.slice(0, _mention.start);
+      const after = cmdInput.value.slice(pos);
+      cmdInput.value = before + path + ' ' + after;
+      const caret = (before + path + ' ').length;
+      cmdInput.setSelectionRange(caret, caret);
+      mentionClose();
+      cmdInput.style.height = 'auto';
+      cmdInput.style.height = Math.min(cmdInput.scrollHeight, 200) + 'px';
+      cmdInput.focus();
+    }
+
+    cmdInput.addEventListener('input', (e) => { if (!e.isComposing) mentionUpdate(); });
+    cmdInput.addEventListener('keyup', (e) => { if (!['ArrowUp','ArrowDown','Escape','Enter'].includes(e.key)) mentionUpdate(); });
+    cmdInput.addEventListener('blur', () => setTimeout(mentionClose, 120));  // 等候选中的 pointerdown 先落地
+    _mentionBox.addEventListener('pointerdown', (e) => {
+      const row = e.target.closest('.mi[data-i]');
+      if (row) { e.preventDefault(); mentionPick(_mention.items[Number(row.dataset.i)]); }
+    });
+    window.addEventListener('resize', () => { if (_mention.open) mentionClose(); });
+
     cmdInput.addEventListener('keydown', (e) => {
+      if (_mention.open) {
+        if (e.key === 'ArrowDown' && _mention.items.length) {
+          e.preventDefault(); _mention.idx = (_mention.idx + 1) % _mention.items.length; mentionRender(); return;
+        }
+        if (e.key === 'ArrowUp' && _mention.items.length) {
+          e.preventDefault(); _mention.idx = (_mention.idx - 1 + _mention.items.length) % _mention.items.length; mentionRender(); return;
+        }
+        if ((e.key === 'Enter' || e.key === 'Tab') && _mention.items.length && !e.isComposing && e.keyCode !== 229) {
+          e.preventDefault(); mentionPick(_mention.items[_mention.idx]); return;   // 补全层开着时回车=选中，不是发送
+        }
+        if (e.key === 'Escape') { e.preventDefault(); mentionClose(); return; }    // 先关补全，别误触中断 AI
+      }
       if (e.key === 'Escape') {
         e.preventDefault();
         if (currentSession?.mode === 'agent' && workState !== 'idle') {
@@ -2992,15 +3114,16 @@
         for (const e of entries) {
           const rel = fpCurrentPath ? fpCurrentPath + '/' + e.name : e.name;
           if (e.isDir) {
-            html += `<div class="fp-item" onclick="fpNav('${escHtml(rel)}')"><span class="fp-icon">📁</span><span class="fp-name">${escHtml(e.name)}</span></div>`;
+            html += `<div class="fp-item" onclick="fpNav('${escHtml(rel)}')"><span class="fp-icon">📁</span><span class="fp-name" title="${escAttr(rel)}">${escHtml(e.name)}</span><span class="fp-dl" onclick="event.stopPropagation();fpRefer('${escAttr(rel)}/')" title="引用：把目录路径插入消息框">@</span></div>`;
           } else {
             const editable = isEditableFile(e.name);
             html += `<div class="fp-item" ${editable ? `style="cursor:pointer" onclick="openFileEditor('${escAttr(rel)}')" title="点击在线编辑"` : ''}>
               <span class="fp-icon">${editable ? '📝' : '📄'}</span>
-              <span class="fp-name">${escHtml(e.name)}</span>
+              <span class="fp-name" title="${escAttr(rel)}">${escHtml(e.name)}</span>
               <span class="fp-size">${fpFormatSize(e.size)}</span>
-              ${editable ? `<span class="fp-dl" onclick="event.stopPropagation();openFileEditor('${escAttr(rel)}')" title="在线编辑">编辑</span>` : ''}
-              <a class="fp-dl" href="/api/files/${SESSION_ID}/download?path=${encodeURIComponent(rel)}" download title="下载" onclick="event.stopPropagation()">下载</a>
+              <span class="fp-dl" onclick="event.stopPropagation();fpRefer('${escAttr(rel)}')" title="引用：把文件路径插入消息框，让 AI 读这个文件">@</span>
+              ${editable ? `<span class="fp-dl" onclick="event.stopPropagation();openFileEditor('${escAttr(rel)}')" title="在线编辑">✏️</span>` : ''}
+              <a class="fp-dl" href="/api/files/${SESSION_ID}/download?path=${encodeURIComponent(rel)}" download title="下载" onclick="event.stopPropagation()">⬇</a>
             </div>`;
           }
         }
@@ -3012,6 +3135,29 @@
 
     window.fpNav = function(path) { fpCurrentPath = path; fpLoadFiles(); };
 
+    // 把文本插进消息框光标处（前面没空白就补一个，后面留一个空格方便接着打字）
+    function insertIntoInput(text) {
+      const ta = cmdInput;
+      const s = ta.selectionStart ?? ta.value.length;
+      const e = ta.selectionEnd ?? ta.value.length;
+      const before = ta.value.slice(0, s);
+      const after = ta.value.slice(e);
+      const sep = before && !/\s$/.test(before) ? ' ' : '';
+      ta.value = before + sep + text + ' ' + after;
+      const pos = (before + sep + text + ' ').length;
+      ta.setSelectionRange(pos, pos);
+      ta.style.height = 'auto';
+      ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
+      ta.focus();
+    }
+
+    // 文件面板「引用」：把相对路径插进消息框 —— 「让 AI 读某个文件」不用再手打文件名。
+    // 引用完关掉面板，直接回到输入框继续写要求。
+    window.fpRefer = function(rel) {
+      closeFilePanel();
+      insertIntoInput(rel);
+    };
+
     function fpFormatSize(bytes) {
       if (bytes == null) return '';
       if (bytes < 1024) return bytes + ' B';