@unabridged/midwest 0.23.0 → 0.23.1

package/dist/javascript/midwest.js

@@ -5374,20 +5374,97 @@ function cloneTemplate(template) {
   return el;
 }
 
+const PLACEHOLDER = "\uE000";
+function renderMarkdown(src) {
+  const blocks = [];
+  const withoutFences = src.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, _lang, code) => {
+    const body = escapeHtml(code.replace(/\n$/, ""));
+    blocks.push(`<pre class="command-palette-code"><code>${body}</code></pre>`);
+    return `${PLACEHOLDER}${blocks.length - 1}${PLACEHOLDER}`;
+  });
+  const lines = escapeHtml(withoutFences).split("\n");
+  const out = [];
+  let listOpen = false;
+  const closeList = () => {
+    if (listOpen) {
+      out.push("</ul>");
+      listOpen = false;
+    }
+  };
+  for (const line of lines) {
+    const placeholder = line.match(new RegExp(`^${PLACEHOLDER}(\\d+)${PLACEHOLDER}$`));
+    if (placeholder) {
+      closeList();
+      out.push(line);
+      continue;
+    }
+    const item = line.match(/^\s*[-*]\s+(.*)$/);
+    if (item) {
+      if (!listOpen) {
+        out.push("<ul>");
+        listOpen = true;
+      }
+      out.push(`<li>${inline(item[1])}</li>`);
+      continue;
+    }
+    closeList();
+    if (line.trim() !== "")
+      out.push(`<p>${inline(line)}</p>`);
+  }
+  closeList();
+  return out.join("\n").replace(new RegExp(`${PLACEHOLDER}(\\d+)${PLACEHOLDER}`, "g"), (_match, index) => blocks[Number(index)]);
+}
+function inline(text) {
+  return text.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
 class CommandPalette extends Controller {
-  static targets = ["input", "list", "empty", "body", "turboList", "itemTemplate", "groupTemplate"];
+  static targets = [
+    "input",
+    "list",
+    "empty",
+    "body",
+    "turboList",
+    "itemTemplate",
+    "groupTemplate",
+    "modes",
+    "chat",
+    "transcript",
+    "starters",
+    "messageTemplate",
+    "actionTemplate"
+  ];
   static values = {
     hotkey: { type: String, default: "k" },
     items: { type: Array, default: [] },
     src: { type: String, default: "" },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    chatEnabled: { type: Boolean, default: false },
+    chatMode: { type: String, default: "proxy" },
+    chatTrigger: { type: String, default: "toggle" },
+    chatAgentic: { type: Boolean, default: true },
+    chatPlaceholder: { type: String, default: "Ask AI\u2026" },
+    chatEndpoint: { type: String, default: "" },
+    chatUrl: { type: String, default: "" },
+    chatModel: { type: String, default: "" }
   };
   highlightedIndex = -1;
   fetchAbort = null;
   searchTimer;
   allItems = [];
+  mode = "command";
+  commandPlaceholder = "";
+  messages = [];
+  streamAbort = null;
   connect() {
     this.allItems = this.itemsValue;
+    this.commandPlaceholder = this.inputTarget.placeholder;
     document.addEventListener("keydown", this.handleGlobalKeydown);
     this.element.addEventListener("click", this.handleBackdropClick);
     if (!this.turboFrameUrlValue) {
@@ -5399,6 +5476,8 @@ class CommandPalette extends Controller {
     this.element.removeEventListener("click", this.handleBackdropClick);
     if (this.fetchAbort)
       this.fetchAbort.abort();
+    if (this.streamAbort)
+      this.streamAbort.abort();
     if (this.searchTimer)
       clearTimeout(this.searchTimer);
   }
@@ -5432,6 +5511,8 @@ class CommandPalette extends Controller {
     this.element.showModal();
     this.inputTarget.value = "";
     this.highlightedIndex = -1;
+    if (this.chatEnabledValue)
+      this.resetChat();
     if (this.turboFrameUrlValue) {
       this.navigateFrame("");
     } else {
@@ -5445,6 +5526,8 @@ class CommandPalette extends Controller {
     this.element.close();
   }
   filter() {
+    if (this.mode === "chat")
+      return;
     const query = this.inputTarget.value.trim().toLowerCase();
     if (this.turboFrameUrlValue) {
       this.debouncedNavigateFrame(query);
@@ -5465,6 +5548,21 @@ class CommandPalette extends Controller {
     this.renderItems(filtered);
   }
   navigate(event) {
+    if (this.mode === "chat") {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        this.send();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        this.close();
+      }
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && this.chatEnabledValue && this.chatTriggerValue === "toggle" && this.inputTarget.value.trim() === "") {
+      event.preventDefault();
+      this.setMode("chat");
+      return;
+    }
     const items = this.visibleItems;
     switch (event.key) {
       case "ArrowDown":
@@ -5499,6 +5597,225 @@ class CommandPalette extends Controller {
       this.selectItem(items[index]);
     }
   }
+  // ── Chat mode ───────────────────────────────────────────────────────
+  switchMode(event) {
+    const mode = event.currentTarget.dataset.mode === "chat" ? "chat" : "command";
+    this.setMode(mode);
+    if (mode === "command")
+      this.filter();
+    this.inputTarget.focus();
+  }
+  useStarter(event) {
+    this.inputTarget.value = event.currentTarget.textContent?.trim() || "";
+    this.send();
+  }
+  resetChat() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+    this.messages = [];
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.innerHTML = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = false;
+    this.setBusy(false);
+    this.setMode("command");
+  }
+  setMode(mode) {
+    if (!this.chatEnabledValue)
+      return;
+    this.mode = mode;
+    const chat = mode === "chat";
+    this.element.classList.toggle("chat-active", chat);
+    if (this.hasModesTarget) {
+      this.modesTarget.querySelectorAll(".command-palette-mode").forEach((el) => {
+        el.setAttribute("aria-pressed", String(el.dataset.mode === mode));
+      });
+    }
+    if (this.hasChatTarget)
+      this.chatTarget.hidden = !chat;
+    if (chat) {
+      this.emptyTarget.hidden = true;
+      if (this.hasListTarget)
+        this.listTarget.hidden = true;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = true;
+      this.inputTarget.placeholder = this.chatPlaceholderValue;
+    } else {
+      this.inputTarget.placeholder = this.commandPlaceholder;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = false;
+    }
+  }
+  stop() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+  }
+  send() {
+    if (this.streamAbort)
+      return;
+    const text = this.inputTarget.value.trim();
+    if (!text)
+      return;
+    this.appendMessage("user", text);
+    this.messages.push({ role: "user", content: text });
+    this.inputTarget.value = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = true;
+    void this.streamReply();
+  }
+  async streamReply() {
+    const message = this.appendMessage("assistant", "");
+    const bubble = message.querySelector(".command-palette-message-bubble");
+    this.setBusy(true);
+    this.streamAbort = new AbortController();
+    let reply = "";
+    try {
+      const response = await fetch(this.chatRequestUrl(), {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
+        body: JSON.stringify(this.chatRequestBody()),
+        signal: this.streamAbort.signal
+      });
+      if (!response.ok || !response.body)
+        throw new Error(`Chat request failed (${response.status})`);
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      for (; ; ) {
+        const { value, done } = await reader.read();
+        if (done)
+          break;
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+        buffer = events.pop() || "";
+        for (const event of events) {
+          const data = this.parseSseData(event);
+          if (!data)
+            continue;
+          const delta = data.choices?.[0]?.delta?.content;
+          if (delta) {
+            reply += delta;
+            bubble.innerHTML = renderMarkdown(reply);
+            this.scrollTranscript();
+          } else if (data.midwest) {
+            this.handleAgentEvent(data.midwest);
+          }
+        }
+      }
+      this.messages.push({ role: "assistant", content: reply });
+    } catch (error) {
+      if (error.name === "AbortError") {
+        if (reply)
+          this.messages.push({ role: "assistant", content: reply });
+      } else {
+        message.classList.add("is-error");
+        bubble.textContent = "Something went wrong. Please try again.";
+      }
+    } finally {
+      this.streamAbort = null;
+      this.setBusy(false);
+      this.scrollTranscript();
+    }
+  }
+  parseSseData(event) {
+    const data = event.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trim()).join("");
+    if (!data || data === "[DONE]")
+      return null;
+    try {
+      return JSON.parse(data);
+    } catch {
+      return null;
+    }
+  }
+  // Agentic events: the server streams a tool "action row" and/or a client
+  // directive (navigate / run a palette command). Directives reuse the same
+  // execution path as manual selection.
+  handleAgentEvent(event) {
+    if (event.type === "tool") {
+      this.appendActionRow(event);
+    } else if (event.type === "directive" && event.directive) {
+      this.performDirective(event.directive);
+    }
+  }
+  // Action rows live in the current assistant message's card footer.
+  appendActionRow(event) {
+    if (!this.hasActionTemplateTarget)
+      return;
+    const footer = this.currentActionFooter();
+    if (!footer)
+      return;
+    const action = cloneTemplate(this.actionTemplateTarget);
+    const label = action.querySelector(".command-palette-action-label");
+    if (label)
+      label.textContent = event.label || "Action";
+    footer.hidden = false;
+    footer.appendChild(action);
+    this.scrollTranscript();
+  }
+  currentActionFooter() {
+    const messages = this.transcriptTarget.querySelectorAll(
+      ".command-palette-message.role-assistant"
+    );
+    const last = messages[messages.length - 1];
+    return last ? last.querySelector(".command-palette-action-footer") : null;
+  }
+  performDirective(directive) {
+    if (directive.url) {
+      this.visit(directive.url, directive.method);
+    } else if (directive.action) {
+      this.element.dispatchEvent(
+        new CustomEvent("midwest-command-palette:action", {
+          bubbles: true,
+          detail: { action: directive.action }
+        })
+      );
+    }
+  }
+  chatRequestUrl() {
+    return this.chatModeValue === "proxy" ? this.chatEndpointValue : this.chatUrlValue;
+  }
+  chatRequestBody() {
+    const body = { messages: this.messages, stream: true };
+    if (this.chatModeValue !== "proxy" && this.chatModelValue)
+      body.model = this.chatModelValue;
+    if (this.chatModeValue === "proxy" && this.chatAgenticValue) {
+      body.commands = this.allItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        url: item.url,
+        action: item.action,
+        method: item.method,
+        icon: item.icon
+      }));
+    }
+    return body;
+  }
+  setBusy(busy) {
+    this.element.classList.toggle("chat-busy", busy);
+    if (this.hasStopTarget)
+      this.stopTarget.hidden = !busy;
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.setAttribute("aria-busy", String(busy));
+  }
+  scrollTranscript() {
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.scrollTop = this.transcriptTarget.scrollHeight;
+  }
+  appendMessage(role, text) {
+    const li = cloneTemplate(this.messageTemplateTarget);
+    li.classList.add(`role-${role}`);
+    if (role === "user")
+      li.classList.add("is-end");
+    const roleEl = li.querySelector(".command-palette-message-role");
+    if (roleEl)
+      roleEl.textContent = role === "user" ? "You" : "Assistant";
+    const bubble = li.querySelector(".command-palette-message-bubble");
+    if (text)
+      bubble.textContent = text;
+    this.transcriptTarget.appendChild(li);
+    this.scrollTranscript();
+    return li;
+  }
   // ── Remote search ───────────────────────────────────────────────────
   fetchRemote(query) {
     if (this.fetchAbort)