@symerian/symi 3.4.30 → 3.4.31

package/dist/control-ui/js/slash-autocomplete.js

@@ -1,168 +0,0 @@
-// ── Slash command autocomplete for the prompt input ─────────────────────
-// Fetches the chat command registry from the gateway via `chat.commands.list`
-// and surfaces it as a dropdown when the user types `/` at the start of the
-// prompt. Replaces the prior "you have to memorize the slash commands" UX.
-
-(function () {
-  const promptInput = document.getElementById("prompt-input");
-  const promptRowMain = document.querySelector(".prompt-row-main");
-  if (!promptInput || !promptRowMain) {
-    return;
-  }
-
-  // Build the dropdown element once; show/hide via .open class.
-  const dropdown = document.createElement("div");
-  dropdown.className = "slash-autocomplete";
-  dropdown.id = "slash-autocomplete";
-  promptRowMain.parentElement.insertBefore(dropdown, promptRowMain);
-
-  let commands = [];
-  let filtered = [];
-  let selectedIndex = 0;
-  let isOpen = false;
-
-  // Fetch the command registry. The WebSocket handshake completes async, so
-  // we must wait for `gateway:connected` (dispatched by app.js after the
-  // gateway's connect event) before calling rpc — otherwise the rpc helper
-  // rejects with "gateway not connected" and we silently end up with an
-  // empty command list.
-  let loaded = false;
-  async function loadCommands() {
-    if (loaded) {
-      return;
-    }
-    if (!window.gateway?.rpc) {
-      return;
-    }
-    if (!window.gateway.ws || window.gateway.ws.readyState !== WebSocket.OPEN) {
-      return;
-    }
-    try {
-      const result = await window.gateway.rpc("chat.commands.list", {});
-      commands = Array.isArray(result?.commands) ? result.commands : [];
-      loaded = true;
-      console.log("[slash-autocomplete] loaded", commands.length, "commands");
-    } catch (err) {
-      console.warn("[slash-autocomplete] failed to load commands:", err);
-    }
-  }
-  // Try once now in case we attached after the event already fired.
-  void loadCommands();
-  // And on every connect event (covers initial connect + reconnects).
-  window.addEventListener("gateway:connected", () => {
-    void loadCommands();
-  });
-
-  function render() {
-    if (!isOpen || filtered.length === 0) {
-      dropdown.classList.remove("open");
-      dropdown.innerHTML = "";
-      return;
-    }
-    dropdown.innerHTML = filtered
-      .slice(0, 8)
-      .map((cmd, i) => {
-        const name = cmd.nativeName ?? cmd.key;
-        const sel = i === selectedIndex ? " selected" : "";
-        const aliasText =
-          Array.isArray(cmd.textAliases) && cmd.textAliases.length > 0
-            ? `<span class="slash-ac-alias">${escapeHtml(cmd.textAliases[0])}</span>`
-            : "";
-        return `<div class="slash-ac-item${sel}" data-index="${i}">
-          <span class="slash-ac-name">/${escapeHtml(name)}</span>
-          ${aliasText}
-          <span class="slash-ac-desc">${escapeHtml(cmd.description ?? "")}</span>
-        </div>`;
-      })
-      .join("");
-    dropdown.classList.add("open");
-  }
-
-  function escapeHtml(str) {
-    return String(str)
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;");
-  }
-
-  function refilter() {
-    const value = promptInput.value;
-    if (!value.startsWith("/")) {
-      isOpen = false;
-      render();
-      return;
-    }
-    // Only the first token (no spaces) is the command query.
-    const query = value.slice(1).split(/\s/, 1)[0].toLowerCase();
-    filtered = commands.filter((cmd) => {
-      const name = (cmd.nativeName ?? cmd.key).toLowerCase();
-      if (name.startsWith(query)) {
-        return true;
-      }
-      if (Array.isArray(cmd.textAliases)) {
-        return cmd.textAliases.some((a) => a.toLowerCase().slice(1).startsWith(query));
-      }
-      return false;
-    });
-    selectedIndex = 0;
-    isOpen = filtered.length > 0;
-    render();
-  }
-
-  function applySelection() {
-    const cmd = filtered[selectedIndex];
-    if (!cmd) {
-      return;
-    }
-    const name = cmd.nativeName ?? cmd.key;
-    // Preserve any existing args after the first space.
-    const rest = promptInput.value.slice(1).split(/\s/).slice(1).join(" ");
-    promptInput.value =
-      cmd.acceptsArgs && !rest ? `/${name} ` : `/${name}${rest ? " " + rest : ""}`;
-    isOpen = false;
-    render();
-    promptInput.focus();
-    // Move caret to end.
-    promptInput.selectionStart = promptInput.selectionEnd = promptInput.value.length;
-  }
-
-  promptInput.addEventListener("input", refilter);
-
-  promptInput.addEventListener("keydown", (e) => {
-    if (!isOpen) {
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      selectedIndex = Math.min(selectedIndex + 1, Math.min(filtered.length, 8) - 1);
-      render();
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      selectedIndex = Math.max(selectedIndex - 1, 0);
-      render();
-    } else if (e.key === "Enter" || e.key === "Tab") {
-      e.preventDefault();
-      applySelection();
-    } else if (e.key === "Escape") {
-      isOpen = false;
-      render();
-    }
-  });
-
-  dropdown.addEventListener("mousedown", (e) => {
-    const target = e.target.closest(".slash-ac-item");
-    if (target) {
-      e.preventDefault();
-      selectedIndex = parseInt(target.getAttribute("data-index"), 10) || 0;
-      applySelection();
-    }
-  });
-
-  document.addEventListener("click", (e) => {
-    if (!dropdown.contains(e.target) && e.target !== promptInput) {
-      isOpen = false;
-      render();
-    }
-  });
-})();