Add gradioStream SSE reader in gradio_api.js and wire runChat in app.js to live updates

assets/app.js

@@ -1,4 +1,4 @@
-import { gradioPredict } from "/assets/gradio_api.js?v=2";
+import { gradioPredict, gradioStream } from "/assets/gradio_api.js?v=2";
 
 let markdownTools = null;
 
@@ -420,6 +420,66 @@ async function renderMessageBody(body, message, isTool) {
   }
 }
 
+function appendToolLogSection(parent, label, value) {
+  const section = document.createElement("div");
+  section.className = "tool-log-section";
+  const heading = document.createElement("strong");
+  heading.textContent = label;
+  section.appendChild(heading);
+  const pre = document.createElement("pre");
+  pre.textContent =
+    typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  section.appendChild(pre);
+  parent.appendChild(section);
+}
+
+function renderToolMessage(node, message, metadata) {
+  const isThinking = metadata.title === "Thinking";
+  if (isThinking) {
+    node.classList.add("thinking");
+  }
+
+  if (metadata.log) {
+    const details = document.createElement("details");
+    details.className = "tool-log";
+    const summary = document.createElement("summary");
+    const statusSuffix =
+      metadata.status === "pending"
+        ? " (running…)"
+        : metadata.duration
+          ? ` (${metadata.duration.toFixed(1)}s)`
+          : "";
+    summary.textContent = `${metadata.title || "Tool"}${statusSuffix}`;
+    details.appendChild(summary);
+
+    if (message.content) {
+      const summaryText = document.createElement("div");
+      summaryText.className = "tool-summary-text";
+      summaryText.textContent = message.content;
+      details.appendChild(summaryText);
+    }
+
+    if (metadata.log.arguments) {
+      appendToolLogSection(details, "Arguments", metadata.log.arguments);
+    }
+    if (metadata.log.result !== undefined) {
+      appendToolLogSection(details, "Result", metadata.log.result);
+    }
+
+    node.appendChild(details);
+    return;
+  }
+
+  const title = document.createElement("div");
+  title.className = "tool-title";
+  title.textContent = metadata.title || "Tool";
+  node.appendChild(title);
+  const body = document.createElement("div");
+  body.className = "chat-message-body";
+  body.textContent = message.content || "";
+  node.appendChild(body);
+}
+
 async function renderMessages() {
   els.chatMessages.innerHTML = "";
   for (const message of state.history) {
@@ -430,15 +490,15 @@ async function renderMessages() {
     if (metadata.status === "pending") {
       node.classList.add("pending");
     }
+
     if (isTool) {
-      const title = document.createElement("div");
-      title.className = "tool-title";
-      title.textContent = metadata.title || "Tool";
-      node.appendChild(title);
+      renderToolMessage(node, message, metadata);
+    } else {
+      const body = document.createElement("div");
+      await renderMessageBody(body, message, isTool);
+      node.appendChild(body);
     }
-    const body = document.createElement("div");
-    await renderMessageBody(body, message, isTool);
-    node.appendChild(body);
+
     els.chatMessages.appendChild(node);
   }
   els.chatMessages.scrollTop = els.chatMessages.scrollHeight;
@@ -499,17 +559,23 @@ async function loadChoices() {
 }
 
 async function runChat(message) {
-  const result = await gradioPredict("/chat", {
-    message,
-    history: state.history,
-    globe_state: state.globeState,
-  });
-  const payload = unwrapResult(result);
-  state.history = payload.history || state.history;
-  await renderMessages();
-  if (payload.globe_state) {
-    applyGlobeState(payload.globe_state);
-  }
+  await gradioStream(
+    "/chat",
+    {
+      message,
+      history: state.history,
+      globe_state: state.globeState,
+    },
+    async (chunk) => {
+      if (chunk.history) {
+        state.history = chunk.history;
+      }
+      if (chunk.globe_state) {
+        applyGlobeState(chunk.globe_state);
+      }
+      await renderMessages();
+    },
+  );
   persistActiveSession();
 }
 

assets/gradio_api.js

@@ -1,4 +1,11 @@
-export async function gradioPredict(apiName, payload = {}) {
+function unwrapStreamData(data) {
+  if (Array.isArray(data)) {
+    return data.length === 1 ? data[0] : data;
+  }
+  return data;
+}
+
+export async function gradioStream(apiName, payload = {}, onChunk) {
   const route = apiName.replace(/^\//, "");
   const start = await fetch(`/gradio_api/call/v2/${route}`, {
     method: "POST",
@@ -22,31 +29,82 @@ export async function gradioPredict(apiName, payload = {}) {
     throw new Error(`Gradio API stream failed (${stream.status})`);
   }
 
-  const body = await stream.text();
-  let resultData = null;
+  const reader = stream.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let lastData = null;
   let errorMessage = null;
+  let currentEvent = null;
 
-  for (const line of body.split("\n")) {
-    if (line.startsWith("event: error")) {
-      errorMessage = "Gradio API returned an error";
-      continue;
+  const processLine = (line) => {
+    if (line.startsWith("event: ")) {
+      currentEvent = line.slice(7).trim();
+      if (currentEvent === "error") {
+        errorMessage = "Gradio API returned an error";
+      }
+      return;
     }
     if (!line.startsWith("data: ")) {
-      continue;
+      return;
     }
+
     try {
-      resultData = JSON.parse(line.slice(6));
+      const parsed = JSON.parse(line.slice(6));
+      lastData = parsed;
+      if (currentEvent === "error") {
+        errorMessage =
+          typeof parsed === "string" ? parsed : JSON.stringify(parsed);
+        return;
+      }
+      onChunk(unwrapStreamData(parsed));
     } catch {
       // Ignore malformed SSE chunks and keep the last valid payload.
     }
+  };
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() || "";
+
+    for (const line of lines) {
+      if (line.trim() === "") {
+        currentEvent = null;
+        continue;
+      }
+      processLine(line);
+    }
+  }
+
+  if (buffer.trim()) {
+    for (const line of buffer.split("\n")) {
+      if (line.trim() === "") {
+        currentEvent = null;
+        continue;
+      }
+      processLine(line);
+    }
   }
 
   if (errorMessage) {
     throw new Error(errorMessage);
   }
-  if (resultData === null) {
+  if (lastData === null) {
     throw new Error("Gradio API returned no data");
   }
 
-  return { data: resultData };
+  return { data: lastData };
+}
+
+export async function gradioPredict(apiName, payload = {}) {
+  let resultData = null;
+  await gradioStream(apiName, payload, (chunk) => {
+    resultData = chunk;
+  });
+  return { data: [resultData] };
 }

assets/server.css

@@ -266,6 +266,68 @@ button:disabled {
   margin-bottom: 4px;
 }
 
+.chat-message.tool.thinking {
+  background: rgba(148, 163, 184, 0.08);
+  border-color: rgba(148, 163, 184, 0.2);
+  font-style: italic;
+  color: #d1d5db;
+}
+
+.chat-message.tool details.tool-log {
+  margin: 0;
+}
+
+.chat-message.tool details.tool-log > summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: #fbbf24;
+  list-style-position: outside;
+}
+
+.chat-message.tool.thinking details.tool-log > summary {
+  color: #cbd5e1;
+}
+
+.chat-message.tool .tool-summary-text {
+  margin-top: 6px;
+  white-space: pre-wrap;
+  color: #e5e7eb;
+  font-style: normal;
+}
+
+.chat-message.tool.thinking .tool-summary-text {
+  color: #d1d5db;
+  font-style: italic;
+}
+
+.chat-message.tool .tool-log-section {
+  margin-top: 10px;
+}
+
+.chat-message.tool .tool-log-section strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 0.8rem;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.chat-message.tool .tool-log-section pre {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  overflow-x: auto;
+  font-size: 0.78rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-style: normal;
+  color: #e5e7eb;
+}
+
 .markdown-body > :first-child {
   margin-top: 0;
 }