@wendongfly/myhi 1.3.167 → 1.3.169

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; } }
@@ -2871,7 +2887,110 @@
       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(path, i) {
+      const cut = path.lastIndexOf('/');
+      const dir = cut >= 0 ? path.slice(0, cut + 1) : '';
+      const name = cut >= 0 ? path.slice(cut + 1) : path;
+      return `<div class="mi ${i === _mention.idx ? 'on' : ''}" data-i="${i}"><span class="m-ico">${isEditableFile(name) ? '📝' : '📄'}</span><span class="m-dir">${escHtml(dir)}</span><span class="m-name">${escHtml(name)}</span><span class="m-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(path) {
+      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,13 +3111,14 @@
         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">${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-size">${fpFormatSize(e.size)}</span>
+              <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 +3132,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';

package/dist/index.html

@@ -81,6 +81,28 @@
     #conn-dot.on  { background: var(--green); box-shadow: 0 0 6px var(--green); }
     #conn-dot.off { background: var(--red); }
 
+    /* 顶栏右侧按钮组：空间不够时整组换行，但按钮自身永不收缩——
+        否则中文标签被挤成一字一行竖排（手机端反馈「不美观」的主因） */
+    .hd-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    .hd-btn {
+      background: none; border: 1px solid var(--border); color: var(--muted);
+      font-size: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer;
+      width: auto; white-space: nowrap; flex-shrink: 0;
+    }
+    /* 手机（≤540px）：藏用户名、文字标签只留图标，一行放下且不憋屈 */
+    @media (max-width: 540px) {
+      #user-name { display: none; }
+      .hd-actions { gap: 0.4rem; }
+      .hd-btn { padding: 0.32rem 0.48rem; }
+      .hd-btn .hd-txt { display: none; }
+    }
+
     /* ── Session list ── */
     #list {
       flex: 1;
@@ -456,14 +478,14 @@
 <div id="app">
   <div id="header">
     <div class="logo">my<span>hi</span></div>
-    <div style="display:flex;align-items:center;gap:0.6rem">
+    <div class="hd-actions">
       <span id="user-name" style="font-size:0.8rem;color:var(--muted)"></span>
-      <button id="grid-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">▦ 分屏</button>
-      <button id="appearance-btn" onclick="openAppearance()" title="外观" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.55rem;border-radius:6px;cursor:pointer;width:auto">🎨</button>
-      <button id="doctor-btn" onclick="openDoctor()" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">🩺 体检</button>
-      <button id="usage-btn" onclick="showUsage()" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">用量</button>
-      <button id="passwd-btn" onclick="openPasswdSheet()" title="修改我的密码" style="display:none;background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">🔑 改密码</button>
-      <button id="logout-btn" onclick="doLogout()" style="display:none;background:none;border:1px solid var(--border);color:var(--muted);font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:6px;cursor:pointer;width:auto">退出</button>
+      <button id="grid-btn" class="hd-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）">▦ 分屏</button>
+      <button id="appearance-btn" class="hd-btn" onclick="openAppearance()" title="外观">🎨</button>
+      <button id="doctor-btn" class="hd-btn" onclick="openDoctor()" title="会话体检">🩺<span class="hd-txt"> 体检</span></button>
+      <button id="usage-btn" class="hd-btn" onclick="showUsage()" title="用量">📊<span class="hd-txt"> 用量</span></button>
+      <button id="passwd-btn" class="hd-btn" onclick="openPasswdSheet()" title="修改我的密码" style="display:none">🔑<span class="hd-txt"> 改密码</span></button>
+      <button id="logout-btn" class="hd-btn" onclick="doLogout()" style="display:none">退出</button>
       <div id="conn-dot"></div>
     </div>
   </div>