@ai-setting/roy-plugin-task-show 2.4.2 → 2.5.0

package/public/chat-panel.js

@@ -0,0 +1,260 @@
+/**
+ * @fileoverview Home chat panel — client controller.
+ *
+ * v2.5.0+ REQ-2: lives on the index page (top of body). Hooks the
+ * following DOM contract (pinned by `test/home-chat-v25.test.ts`):
+ *
+ *   [data-chat-shell]      <section> wrapper
+ *   [data-chat-messages]   <div>    message log (role="log")
+ *   [data-chat-form]       <form>   submit handler
+ *   [data-chat-input]      <input>  text input
+ *   [data-chat-send]       <button> send button (type="submit")
+ *
+ * sessionId is persisted in `localStorage["taskShow.chat.sessionId"]`
+ * across page loads so the conversation survives reloads. The first
+ * run (no stored id) POSTs `/api/chat/start` to allocate one.
+ *
+ * The server speaks SSE for streaming chunks. We use `fetch` + an
+ * `ReadableStream` reader instead of `EventSource` because the chat
+ * endpoint is POST (EventSource can't POST) and we need to send the
+ * `message` in the request body.
+ *
+ * If the chat feature is disabled server-side (503), the panel hides
+ * itself with a banner instead of throwing.
+ */
+
+(function () {
+  const STORAGE_KEY = "taskShow.chat.sessionId";
+  const SHELL_SEL = "[data-chat-shell]";
+  const MESSAGES_SEL = "[data-chat-messages]";
+  const FORM_SEL = "[data-chat-form]";
+  const INPUT_SEL = "[data-chat-input]";
+  const SEND_SEL = "[data-chat-send]";
+
+  function $(sel) { return document.querySelector(sel); }
+
+  function readSessionId() {
+    try { return window.localStorage.getItem(STORAGE_KEY) || ""; }
+    catch { return ""; }
+  }
+
+  function writeSessionId(id) {
+    try { window.localStorage.setItem(STORAGE_KEY, id); } catch { /* ignore */ }
+  }
+
+  function clearMessages(container) {
+    while (container.firstChild) container.removeChild(container.firstChild);
+  }
+
+  function appendMessage(container, role, text) {
+    const empty = container.querySelector(".chat-empty");
+    if (empty) empty.remove();
+    const el = document.createElement("div");
+    el.className = "chat-message chat-message--" + role;
+    el.dataset.role = role;
+    const label = role === "user" ? "You" : role === "assistant" ? "Assistant" : "Error";
+    el.innerHTML =
+      `<div class="chat-message-meta">${label}</div>` +
+      `<div class="chat-message-text"></div>`;
+    el.querySelector(".chat-message-text").textContent = text;
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+    return el;
+  }
+
+  /**
+   * Append a streaming chunk to the last assistant message. If no
+   * assistant message exists yet (first chunk of a turn), create one.
+   */
+  function appendChunk(container, text) {
+    let last = container.querySelector(".chat-message--assistant:last-of-type");
+    if (!last) last = appendMessage(container, "assistant", "");
+    const textEl = last.querySelector(".chat-message-text");
+    textEl.textContent += text;
+    container.scrollTop = container.scrollHeight;
+  }
+
+  function setBusy(form, busy) {
+    const input = form.querySelector(INPUT_SEL);
+    const send = form.querySelector(SEND_SEL);
+    if (input) input.disabled = busy;
+    if (send) {
+      send.disabled = busy;
+      send.textContent = busy ? "Sending…" : "Send";
+    }
+  }
+
+  function showDisabledBanner(shell, msg) {
+    const banner = document.createElement("p");
+    banner.className = "chat-banner";
+    banner.dataset.role = "banner";
+    banner.textContent = msg;
+    shell.appendChild(banner);
+    const form = shell.querySelector(FORM_SEL);
+    if (form) form.remove();
+  }
+
+  async function ensureSessionId() {
+    let id = readSessionId();
+    if (id) return id;
+    const res = await fetch("/api/chat/start", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!res.ok) throw new Error("chat_start_failed: " + res.status);
+    const j = await res.json();
+    id = j.sessionId;
+    writeSessionId(id);
+    return id;
+  }
+
+  async function sendMessage(form, container, message) {
+    let sessionId;
+    try {
+      sessionId = await ensureSessionId();
+    } catch (e) {
+      appendMessage(container, "error", String(e && e.message || e));
+      return;
+    }
+    appendMessage(container, "user", message);
+    setBusy(form, true);
+
+    let res;
+    try {
+      res = await fetch(`/api/chat/${encodeURIComponent(sessionId)}/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "text/event-stream",
+        },
+        body: JSON.stringify({ message }),
+      });
+    } catch (e) {
+      appendMessage(container, "error", "network_error: " + (e && e.message || e));
+      setBusy(form, false);
+      return;
+    }
+
+    if (!res.ok || !res.body) {
+      let detail = "";
+      try { detail = await res.text(); } catch { /* ignore */ }
+      appendMessage(container, "error", `server_error: ${res.status} ${detail.slice(0, 200)}`);
+      setBusy(form, false);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let buf = "";
+    let sawError = false;
+
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        let nl;
+        while ((nl = buf.indexOf("\n\n")) >= 0) {
+          const frame = buf.slice(0, nl);
+          buf = buf.slice(nl + 2);
+          handleFrame(frame, container, (err) => { sawError = sawError || !!err; });
+        }
+      }
+      // Flush trailing frame if any.
+      if (buf.trim().length > 0) handleFrame(buf, container, () => {});
+    } catch (e) {
+      appendMessage(container, "error", "stream_error: " + (e && e.message || e));
+    } finally {
+      setBusy(form, false);
+      // Suppress the final empty-message that may have been left if the
+      // assistant produced no text. We intentionally leave error messages
+      // alone so the user can see what went wrong.
+      if (!sawError) {
+        const last = container.querySelector(".chat-message--assistant:last-of-type");
+        if (last && !last.querySelector(".chat-message-text").textContent.trim()) {
+          last.remove();
+        }
+      }
+    }
+  }
+
+  /** Parse one SSE frame (event:/data:/id: lines). Returns the parsed frame or null. */
+  function handleFrame(raw, container, onError) {
+    let event = "";
+    let data = "";
+    let id = "";
+    for (const line of raw.split(/\r?\n/)) {
+      if (line.startsWith(":")) continue;
+      if (line.startsWith("event:")) event = line.slice(6).trim();
+      else if (line.startsWith("data:")) data += (data ? "\n" : "") + line.slice(5).trim();
+      else if (line.startsWith("id:")) id = line.slice(3).trim();
+    }
+    if (!event && !data) return null;
+    let parsed = null;
+    if (data) {
+      try { parsed = JSON.parse(data); } catch { parsed = data; }
+    }
+    if (event === "chunk" && parsed && typeof parsed === "object") {
+      if (parsed.type === "text" && typeof parsed.text === "string") {
+        appendChunk(container, parsed.text);
+      } else if (parsed.type === "reasoning" && typeof parsed.text === "string") {
+        // Reasoning is hidden in the chat UI by design; we still log it
+        // so a developer can inspect via DevTools.
+        if (window.console && window.console.debug) {
+          window.console.debug("[chat] reasoning:", parsed.text);
+        }
+      } else if (parsed.type === "start") {
+        // No-op: the assistant bubble is created lazily on first text chunk.
+      } else if (parsed.type === "error" && parsed.error) {
+        onError(parsed);
+        appendMessage(container, "error", parsed.error.message || "unknown error");
+      }
+    } else if (event === "done") {
+      // Terminal marker — nothing to render.
+    } else if (event === "error") {
+      onError(parsed);
+      const msg = parsed && parsed.error && parsed.error.message
+        ? parsed.error.message
+        : "stream error";
+      appendMessage(container, "error", msg);
+    } else if (event === "ready") {
+      // SSE handshake — nothing to render.
+    }
+    return { event, data, id, parsed };
+  }
+
+  function init() {
+    const shell = document.querySelector(SHELL_SEL);
+    if (!shell) return;
+    const form = shell.querySelector(FORM_SEL);
+    const container = shell.querySelector(MESSAGES_SEL);
+    const input = shell.querySelector(INPUT_SEL);
+    if (!form || !container || !input) return;
+
+    // Probe feature availability with a HEAD request. If 503, hide UI.
+    fetch("/api/chat/start", { method: "HEAD" }).then((res) => {
+      if (res.status === 503) {
+        showDisabledBanner(shell, "Chat disabled (server returned 503 — chatOptions not configured).");
+      }
+    }).catch(() => { /* offline — leave UI alone */ });
+
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const message = (input.value || "").trim();
+      if (!message) return;
+      input.value = "";
+      sendMessage(form, container, message);
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Expose a tiny test hook so headless harness can drive the panel
+  // without firing real events.
+  window.taskShowChatPanel = { init, sendMessage, STORAGE_KEY };
+})();

package/public/style.css

@@ -1987,3 +1987,144 @@ details summary {
   font-size: 11px;
   color: var(--fg-muted, #6b7280);
 }
+
+/* ============================================================
+ * v2.5.0+ REQ-2: home-page chat panel
+ * ============================================================ */
+
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.chat-panel-header h2 {
+  margin: 0 0 4px;
+  font-size: 18px;
+}
+
+.chat-panel-meta {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fg-muted, #6b7280);
+}
+
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 80px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 12px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 14px;
+}
+
+.chat-empty {
+  margin: 0;
+  color: var(--fg-muted, #9ca3af);
+  font-style: italic;
+}
+
+.chat-message {
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+
+.chat-message-meta {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin-bottom: 2px;
+}
+
+.chat-message-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.chat-message--user {
+  align-self: flex-end;
+  background: #dbeafe;
+  border-color: #93c5fd;
+  max-width: 80%;
+}
+
+.chat-message--assistant {
+  align-self: flex-start;
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  max-width: 80%;
+}
+
+.chat-message--error {
+  align-self: stretch;
+  background: #fee2e2;
+  border-color: #fca5a5;
+  color: #991b1b;
+}
+
+.chat-form {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-input {
+  flex: 1 1 auto;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.chat-input:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: -1px;
+  border-color: #3b82f6;
+}
+
+.chat-send {
+  padding: 8px 16px;
+  background: #2563eb;
+  color: #fff;
+  border: 1px solid #1d4ed8;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.chat-send:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.chat-send:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chat-banner {
+  padding: 8px 12px;
+  margin: 0;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 6px;
+  color: #78350f;
+  font-size: 13px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}