diff --git a/app/frontend/src/components/TextChat.jsx b/app/frontend/src/components/TextChat.jsx
index 4e6fee1..5ec8349 100644
--- a/app/frontend/src/components/TextChat.jsx
+++ b/app/frontend/src/components/TextChat.jsx
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Bot, LoaderCircle, Send, Trash2, Square, History, Paperclip, X } from "lucide-react";
+import { Bot, LoaderCircle, Send, Trash2, Square, History, Paperclip, X, ChevronDown } from "lucide-react";
import {
getDownloadProgress,
getLlmStatus,
@@ -9,6 +9,99 @@ import {
stopLlm,
} from "../services/api";
+const processMessageContent = (rawText, apiReasoning = "") => {
+ let content = rawText;
+ let reasoning = apiReasoning || "";
+
+ if (typeof rawText !== "string") {
+ return { content, reasoning };
+ }
+
+ const startTags = ["<|channel|>thought", "<|think|>", "<|thought|>", "", ""];
+ const endTags = ["<|channel|>model", "<|turn>model", "<|im_start|>model", " ", "", "", ""];
+
+ let startIdx = -1;
+ let matchedStartTag = "";
+
+ for (const tag of startTags) {
+ const idx = rawText.indexOf(tag);
+ if (idx !== -1 && (startIdx === -1 || idx < startIdx)) {
+ startIdx = idx;
+ matchedStartTag = tag;
+ }
+ }
+
+ if (startIdx !== -1) {
+ let endIdx = -1;
+ let matchedEndTag = "";
+ const searchArea = rawText.substring(startIdx + matchedStartTag.length);
+
+ for (const tag of endTags) {
+ const idx = searchArea.indexOf(tag);
+ if (idx !== -1 && (endIdx === -1 || idx < endIdx)) {
+ endIdx = idx;
+ matchedEndTag = tag;
+ }
+ }
+
+ if (endIdx !== -1) {
+ const actualEndIdxInRaw = startIdx + matchedStartTag.length + endIdx;
+ const extractedReasoning = rawText.substring(startIdx + matchedStartTag.length, actualEndIdxInRaw).trim();
+ reasoning = (reasoning + "\n" + extractedReasoning).trim();
+
+ const afterEndText = rawText.substring(actualEndIdxInRaw + matchedEndTag.length);
+ content = rawText.substring(0, startIdx) + afterEndText;
+
+ return processMessageContent(content, reasoning);
+ } else {
+ const extractedReasoning = rawText.substring(startIdx + matchedStartTag.length).trim();
+ reasoning = (reasoning + "\n" + extractedReasoning).trim();
+ content = rawText.substring(0, startIdx);
+ }
+ }
+
+ return { content, reasoning };
+};
+
+function ThinkingBlock({ reasoning, isComplete, thinkingDuration }) {
+ const [isExpanded, setIsExpanded] = useState(!isComplete);
+
+ useEffect(() => {
+ if (isComplete) {
+ setIsExpanded(false);
+ }
+ }, [isComplete]);
+
+ if (!reasoning) return null;
+
+ const formattedTime = thinkingDuration > 0 ? ` (${thinkingDuration.toFixed(1)}s)` : "";
+
+ return (
+
)}
- {messages.map((message, index) => (
-
+
+ {isExpanded && (
+
+ );
+}
+
function TextChat({
specs,
showAlert,
@@ -245,6 +338,7 @@ function TextChat({
threads: textSettings?.threads || specs?.cpu_cores_physical || 4,
contextSize: textSettings?.contextSize || 4096,
gpuLayers: -1,
+ enableThinking: textSettings?.enableThinking !== false,
});
setStatus({ ...status, ...result, ready: true, running: true, settings: result.settings });
setMessages([]);
@@ -339,14 +433,18 @@ function TextChat({
];
let assistantText = "";
+ let assistantReasoning = "";
let streamedTokens = 0;
let firstTokenAt = null;
+ let thinkingStartedAt = null;
+ let thinkingEndedAt = null;
+ let thinkingDuration = 0;
const response = await streamChatWithLlm(requestMessages, {
temperature: textSettings?.temperature || 0.7,
maxTokens: 768,
signal: controller.signal,
- }, (_token, fullText) => {
+ }, (_token, fullText, _reasoningToken, fullReasoning) => {
const now = performance.now();
if (streamedTokens === 0) {
firstTokenAt = now;
@@ -355,13 +453,31 @@ function TextChat({
const generationSeconds = firstTokenAt
? Math.max(0.05, (now - firstTokenAt) / 1000)
: Math.max(0.05, (now - requestStartedAt) / 1000);
- assistantText = fullText;
+
+ const processed = processMessageContent(fullText, fullReasoning);
+ assistantText = processed.content;
+ assistantReasoning = processed.reasoning;
+
+ // Calculate thinking duration
+ if (processed.reasoning && !thinkingStartedAt) {
+ thinkingStartedAt = now;
+ }
+ if (processed.content && thinkingStartedAt && !thinkingEndedAt) {
+ thinkingEndedAt = now;
+ thinkingDuration = (thinkingEndedAt - thinkingStartedAt) / 1000;
+ }
+ const currentThinkingDuration = thinkingEndedAt
+ ? thinkingDuration
+ : (thinkingStartedAt ? (now - thinkingStartedAt) / 1000 : 0);
+
setMessages((prev) => {
const updated = [...prev];
if (updated.length > 0 && updated[updated.length - 1].role === "assistant") {
updated[updated.length - 1] = {
...updated[updated.length - 1],
- content: fullText,
+ content: processed.content,
+ reasoning: processed.reasoning,
+ thinkingDuration: currentThinkingDuration,
generationStats: {
status: "streaming",
tokens: streamedTokens,
@@ -375,6 +491,12 @@ function TextChat({
});
const completedAt = performance.now();
+ let finalThinkingDuration = thinkingDuration;
+ if (thinkingStartedAt && !thinkingEndedAt) {
+ thinkingEndedAt = completedAt;
+ finalThinkingDuration = (thinkingEndedAt - thinkingStartedAt) / 1000;
+ }
+
const exactTokens = Number(response.timings?.predicted_n) || streamedTokens;
const backendTotalMs = Number(response.timings?.prompt_ms || 0) + Number(response.timings?.predicted_ms || 0);
const exactSeconds = backendTotalMs > 0
@@ -388,9 +510,13 @@ function TextChat({
tokensPerSecond: exactTokensPerSecond,
seconds: exactSeconds,
};
+
+ const processed = processMessageContent(assistantText, response.reasoningContent || assistantReasoning);
const finalMessages = [...nextMessages, {
role: "assistant",
- content: assistantText,
+ content: processed.content,
+ reasoning: processed.reasoning,
+ thinkingDuration: finalThinkingDuration,
generationStats,
}];
setMessages(finalMessages);
@@ -594,54 +720,70 @@ function TextChat({
+ {reasoning}
+
+ )}
+
- {/* Avatar */}
-
- {message.role === "user" ? "You" : "AI"}
-
+ {messages.map((message, index) => {
+ const processed = processMessageContent(
+ Array.isArray(message.content) ? "" : (message.content || ""),
+ message.reasoning || ""
+ );
+ const displayContent = Array.isArray(message.content) ? message.content : processed.content;
+ const displayReasoning = processed.reasoning;
- {/* Bubble + stats */}
-
-
- {message.role === "user" ? "You" : "Local AI"}
-
-
- {Array.isArray(message.content) ? (
-
- {message.content.map((item, idx) => {
- if (item.type === "text") return 
- );
- return null;
- })}
-
- ) : (
-
+ {/* Avatar */}
+
- ))}
+ );
+ })}
)}
@@ -691,27 +833,69 @@ function TextChat({
onClick={() => fileInputRef.current?.click()}
disabled={!supportsVision || isBusy}
title={supportsVision ? "Attach files or images" : "Image attachment requires a vision model with an mmproj file"}
+ style={{ marginBottom: "2px" }}
>
+ {message.role === "user" ? "You" : "AI"}
- {/* Generation stats pill */}
- {message.role === "assistant" && message.generationStats && !message.error && (
-
- {message.generationStats.status === "starting" ? (
- <>
-
+
+ {message.role === "user" ? "You" : "Local AI"}
+
+ {message.role === "assistant" && displayReasoning && textSettings?.enableThinking !== false && (
+
+ {Array.isArray(displayContent) ? (
+
- )}
+
+ {/* Generation stats pill */}
+ {message.role === "assistant" && message.generationStats && !message.error && (
+
+ {displayContent.map((item, idx) => {
+ if (item.type === "text") return
) : (
- <>{message.generationStats.tokens} tokens • {formatGenerationTime(message.generationStats.seconds)}
+
+ {message.generationStats.status === "starting" ? (
+ <>
+ )}
+