Updated the chat UI and backend so MiniCPM thinking renders

assets/app.js

@@ -2,7 +2,8 @@ import { gradioPredict, gradioStream } from "/assets/gradio_api.js?v=2";
 import {
   ensureMarkdownTools,
   renderMarkdownInto,
-} from "/assets/markdown.js?v=1";
+  splitThinkingContent,
+} from "/assets/markdown.js?v=2";
 
 const CHAT_SESSIONS_KEY = "borderless-chat-sessions";
 
@@ -530,23 +531,77 @@ function shouldRenderMarkdown(message, isTool) {
   return !isTool;
 }
 
-async function renderMessageBody(body, message, isTool) {
-  const content = message.content || "";
-  body.className = "chat-message-body";
+async function renderThinkingBlock(parent, thinkingText, options = {}) {
+  const text = String(thinkingText || "").trim();
+  if (!text) {
+    return null;
+  }
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "thinking-block-wrap";
+
+  if (options.label) {
+    const label = document.createElement("div");
+    label.className = "thinking-block-label";
+    label.textContent = options.label;
+    wrapper.appendChild(label);
+  }
 
-  if (!shouldRenderMarkdown(message, isTool)) {
-    body.textContent = content;
+  const block = document.createElement("div");
+  block.className = "thinking-block markdown-body";
+  await renderMarkdownInto(block, text);
+  wrapper.appendChild(block);
+  parent.appendChild(wrapper);
+  return wrapper;
+}
+
+async function renderAssistantContent(parent, message, isTool) {
+  const metadata = message.metadata || {};
+  const { thinking, answer } = splitThinkingContent(message.content || "", {
+    thinking: metadata.thinking,
+  });
+
+  parent.replaceChildren();
+
+  if (thinking) {
+    await renderThinkingBlock(parent, thinking, {
+      label: metadata.display === "thinking" ? null : "Thinking",
+    });
+  }
+
+  if (answer) {
+    const body = document.createElement("div");
+    body.className = "chat-message-body";
+    if (shouldRenderMarkdown(message, isTool)) {
+      body.classList.add("markdown-body");
+      try {
+        await renderMarkdownInto(body, answer);
+      } catch {
+        body.textContent = answer;
+      }
+    } else {
+      body.textContent = answer;
+    }
+    parent.appendChild(body);
     return;
   }
 
-  body.classList.add("markdown-body");
-  try {
-    await renderMarkdownInto(body, content);
-  } catch {
-    body.textContent = content;
+  if (thinking && metadata.display === "thinking") {
+    return;
+  }
+
+  if (!thinking && !answer) {
+    const body = document.createElement("div");
+    body.className = "chat-message-body";
+    body.textContent = message.content || "";
+    parent.appendChild(body);
   }
 }
 
+async function renderMessageBody(body, message, isTool) {
+  await renderAssistantContent(body, message, isTool);
+}
+
 function appendToolLogSection(parent, label, value) {
   const section = document.createElement("div");
   section.className = "tool-log-section";
@@ -648,9 +703,19 @@ async function renderPlanMessage(node, message, metadata) {
 }
 
 async function renderToolMessage(node, message, metadata, options = {}) {
-  const isThinking = metadata.title === "Thinking";
+  const isThinking =
+    metadata.display === "thinking" || metadata.title === "Thinking";
   if (isThinking) {
     node.classList.add("thinking");
+    const header = document.createElement("div");
+    header.className = "thinking-message-header";
+    header.textContent = metadata.title || "Thinking";
+    node.appendChild(header);
+    const panel = document.createElement("div");
+    panel.className = "thinking-message";
+    await renderAssistantContent(panel, message, true);
+    node.appendChild(panel);
+    return;
   }
 
   if (metadata.display === "plan") {
@@ -806,6 +871,7 @@ async function renderResearchMessage(parent, message, task) {
     await renderToolMessage(node, message, metadata, { compact: true });
   } else {
     const body = document.createElement("div");
+    body.className = "assistant-message-content";
     await renderMessageBody(body, message, false);
     node.appendChild(body);
   }
@@ -966,6 +1032,7 @@ async function renderMessages() {
       }
     } else {
       const body = document.createElement("div");
+      body.className = "assistant-message-content";
       await renderMessageBody(body, message, isTool);
       node.appendChild(body);
     }

assets/markdown.js

@@ -50,3 +50,34 @@ export function plainTextSummary(content, limit = 280) {
   }
   return `${text.slice(0, limit - 1)}…`;
 }
+
+const THINK_OPEN = "<" + "think" + ">";
+const THINK_CLOSE = "</" + "think" + ">";
+
+export function splitThinkingContent(fullText, options = {}) {
+  const metaThinking = String(options.thinking || "").trim();
+  let text = String(fullText || "")
+    .replace(/<\|redacted_im_end\|>/g, "")
+    .replace(/<think>/g, THINK_OPEN)
+    .replace(/<\/redacted_thinking>/g, THINK_CLOSE);
+
+  let thinking = metaThinking;
+  let answer = text.trim();
+  const openIdx = text.indexOf(THINK_OPEN);
+  const closeIdx = text.indexOf(THINK_CLOSE);
+
+  if (openIdx !== -1 && closeIdx !== -1 && closeIdx > openIdx) {
+    const extracted = text.slice(openIdx + THINK_OPEN.length, closeIdx).trim();
+    thinking = thinking ? `${thinking}\n\n${extracted}` : extracted;
+    answer = `${text.slice(0, openIdx)}${text.slice(closeIdx + THINK_CLOSE.length)}`.trim();
+  } else if (openIdx !== -1 && closeIdx === -1) {
+    const extracted = text.slice(openIdx + THINK_OPEN.length).trim();
+    thinking = thinking ? `${thinking}\n\n${extracted}` : extracted;
+    answer = text.slice(0, openIdx).trim();
+  }
+
+  return {
+    thinking: thinking.trim(),
+    answer: answer.trim(),
+  };
+}

assets/server.css

@@ -267,10 +267,93 @@ button:disabled {
 }
 
 .chat-message.tool.thinking {
-  background: rgba(148, 163, 184, 0.08);
-  border-color: rgba(148, 163, 184, 0.2);
+  background: rgba(79, 70, 229, 0.08);
+  border-color: rgba(99, 102, 241, 0.28);
+  font-style: normal;
+  color: #e5e7eb;
+  padding: 0;
+  overflow: hidden;
+}
+
+.thinking-message-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px 0;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #a5b4fc;
+}
+
+.thinking-message-header::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #818cf8;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
+}
+
+.thinking-message {
+  padding: 8px 12px 12px;
+}
+
+.thinking-block-wrap {
+  margin-bottom: 10px;
+}
+
+.thinking-block-wrap:last-child {
+  margin-bottom: 0;
+}
+
+.thinking-block-label {
+  margin-bottom: 6px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #a5b4fc;
+}
+
+.thinking-block {
+  background: rgba(79, 70, 229, 0.12);
+  border-left: 3px solid #6366f1;
+  border-radius: 4px 12px 12px 4px;
+  padding: 12px 14px;
+  font-size: 0.92rem;
+  color: #c7d2fe;
   font-style: italic;
-  color: #d1d5db;
+}
+
+.thinking-block.markdown-body {
+  white-space: normal;
+  font-style: italic;
+}
+
+.thinking-block.markdown-body p,
+.thinking-block.markdown-body li {
+  color: #c7d2fe;
+}
+
+.thinking-block.markdown-body code {
+  color: #e0e7ff;
+  background: rgba(15, 23, 42, 0.35);
+}
+
+.assistant-message-content .thinking-block-wrap + .chat-message-body {
+  margin-top: 4px;
+}
+
+.chat-message.assistant .assistant-message-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.chat-message.tool.thinking details.tool-log > summary {
+  color: #cbd5e1;
 }
 
 .chat-message.tool details.tool-log {
@@ -284,10 +367,6 @@ button:disabled {
   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;

tests/test_research_findings.py

@@ -11,7 +11,11 @@ os.environ.setdefault("BORDERLESS_PRELOAD_MODEL", "0")
 
 from langchain_core.messages import AIMessage, ToolMessage
 
-from ui.agent.graph.nodes.helpers import extract_assistant_text, research_tool_calls
+from ui.agent.graph.nodes.helpers import (
+    extract_assistant_text,
+    extract_thinking_text,
+    research_tool_calls,
+)
 from ui.agent.synthesis import synthesize_finding_from_tool_messages
 
 
@@ -52,6 +56,22 @@ class ExtractAssistantTextTests(unittest.TestCase):
             additional_kwargs={"reasoning_content": "Hidden reasoning"},
         )
         self.assertEqual(extract_assistant_text(message), "Visible answer")
+        self.assertEqual(extract_thinking_text(message), "Hidden reasoning")
+
+    def test_extract_thinking_text_from_think_tags(self) -> None:
+        open_tag = "<" + "think" + ">"
+        close_tag = "</" + "think" + ">"
+        message = AIMessage(
+            content=(
+                f"{open_tag}Compare Canada and Germany pathways.{close_tag}\n\n"
+                "## Recommended Countries\n- Canada"
+            )
+        )
+        self.assertIn("Canada", extract_assistant_text(message))
+        self.assertEqual(
+            extract_thinking_text(message),
+            "Compare Canada and Germany pathways.",
+        )
 
 
 class ResearchToolCallsTests(unittest.TestCase):

ui/agent/graph/nodes/consolidator.py

@@ -10,7 +10,7 @@ from ..llm import build_llm
 from ..state import AgentState
 from ...synthesis import build_structured_final_answer
 from .config import CONSOLIDATOR_MAX_TOKENS, FINDING_SUMMARY_LIMIT
-from .helpers import extract_assistant_text, format_todo_label
+from .helpers import extract_assistant_text, extract_thinking_text, format_todo_label
 from .prompts import CONSOLIDATOR_SYSTEM_PROMPT
 
 
@@ -43,6 +43,7 @@ def consolidator_node(state: AgentState, config: RunnableConfig) -> dict[str, An
     ]
     response = llm.invoke(messages)
     answer = extract_assistant_text(response)
+    thinking = extract_thinking_text(response)
     if not answer:
         answer = build_structured_final_answer(
             profile_summary=str(state.get("profile_summary") or "").strip(),
@@ -53,4 +54,4 @@ def consolidator_node(state: AgentState, config: RunnableConfig) -> dict[str, An
                 "directly from the parallel country research notes below."
             ),
         )
-    return {"final_answer": answer}
+    return {"final_answer": answer, "consolidator_thinking": thinking}

ui/agent/graph/nodes/helpers.py

@@ -447,6 +447,33 @@ def extract_assistant_text(message: AIMessage) -> str:
     return ""
 
 
+def extract_thinking_text(message: AIMessage) -> str:
+    """Extract model reasoning / thinking text separate from the user-facing answer."""
+    content_text, reasoning_text = assistant_text_sources(message)
+    answer = extract_assistant_text(message)
+    parts: list[str] = []
+
+    for text in (reasoning_text, content_text):
+        if not text.strip():
+            continue
+        inner_parts = _THINK_INNER_PATTERN.findall(text)
+        if inner_parts:
+            parts.extend(part.strip() for part in inner_parts if part.strip())
+            continue
+        outside = _THINK_BLOCK_PATTERN.sub("", text).strip()
+        candidate = outside or text.strip()
+        if candidate and candidate != answer:
+            parts.append(candidate)
+
+    deduped: list[str] = []
+    seen: set[str] = set()
+    for part in parts:
+        if part not in seen:
+            seen.add(part)
+            deduped.append(part)
+    return "\n\n".join(deduped).strip()
+
+
 def research_tool_calls(
     response: AIMessage,
 ) -> list[tuple[str, dict[str, Any], str]]:

ui/agent/graph/respond.py

@@ -78,11 +78,17 @@ class _UiState:
     def handle(self, event: dict[str, Any]) -> bool:
         kind = event.get("type")
         if kind == "thinking":
+            thinking_text = str(event.get("text") or "").strip()
             self.ui_messages.append(
                 ChatMessage(
                     role="assistant",
-                    content=str(event.get("text") or ""),
-                    metadata={"title": "Thinking", "status": "done"},
+                    content=thinking_text,
+                    metadata={
+                        "title": "Thinking",
+                        "status": "done",
+                        "display": "thinking",
+                        "thinking": thinking_text,
+                    },
                 )
             )
             return True
@@ -317,4 +323,8 @@ def respond_with_graph(
         ui_state.ui_messages,
         final_answer,
         ui_state.globe_state,
+        assistant_metadata={
+            "markdown": True,
+            "thinking": str(last_state.get("consolidator_thinking") or "").strip(),
+        },
     )

ui/agent/graph/state.py

@@ -37,6 +37,7 @@ class AgentState(TypedDict, total=False):
     todos: list[TodoItem]
     findings: Annotated[list[Finding], operator.add]
     final_answer: str
+    consolidator_thinking: str
 
 
 class ResearchTask(TypedDict):

ui/agent/streaming.py

@@ -29,16 +29,23 @@ def yield_streaming_messages(
     ui_messages: list[ChatMessage],
     text: str,
     globe_state: dict[str, Any],
+    *,
+    assistant_metadata: dict[str, Any] | None = None,
 ):
     messages = list(ui_messages)
+    metadata = dict(assistant_metadata or {})
     if not text:
-        messages.append(ChatMessage(role="assistant", content=""))
+        messages.append(ChatMessage(role="assistant", content="", metadata=metadata or None))
         yield messages, globe_state
         return
 
-    messages.append(ChatMessage(role="assistant", content=""))
+    messages.append(ChatMessage(role="assistant", content="", metadata=metadata or None))
     for end in _chunk_end_indices(text):
-        messages[-1] = ChatMessage(role="assistant", content=text[:end])
+        messages[-1] = ChatMessage(
+            role="assistant",
+            content=text[:end],
+            metadata=metadata or None,
+        )
         yield messages, globe_state
 
 
@@ -46,8 +53,15 @@ def yield_response(
     ui_messages: list[ChatMessage],
     text: str,
     globe_state: dict[str, Any],
+    *,
+    assistant_metadata: dict[str, Any] | None = None,
 ):
     if ui_messages:
-        yield from yield_streaming_messages(ui_messages, text, globe_state)
+        yield from yield_streaming_messages(
+            ui_messages,
+            text,
+            globe_state,
+            assistant_metadata=assistant_metadata,
+        )
     else:
         yield from yield_streaming_string(text, globe_state)