@symerian/symi 3.5.0 → 3.5.1

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

@@ -0,0 +1,168 @@
+// ── 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();
+    }
+  });
+})();