Handling delta.reasoning_content in llama-server's webUI

tools/server/webui/src/components/ChatMessage.tsx

@@ -58,9 +58,25 @@ export default function ChatMessage({
   // for reasoning model, we split the message into content and thought
   // TODO: implement this as remark/rehype plugin in the future
   const { content, thought, isThinking }: SplitMessage = useMemo(() => {
-    if (msg.content === null || msg.role !== 'assistant') {
+    if (msg.role !== 'assistant') {
       return { content: msg.content };
     }
+
+    // Handle case where we have reasoningContent (content can be null or empty)
+    if (msg.reasoningContent !== null) {
+      return {
+        content: msg.content || '',
+        thought: msg.reasoningContent,
+        isThinking: msg.content === null || msg.content === '',
+      };
+    }
+
+    // If content is null or empty, return as-is
+    if (msg.content === null || msg.content === '') {
+      return { content: msg.content };
+    }
+
+    // perhaps there are <think>...</think> tags in the regular content
     let actualContent = '';
     let thought = '';
     let isThinking = false;

tools/server/webui/src/utils/app.context.tsx

@@ -188,6 +188,7 @@ export const AppContextProvider = ({
       content: null,
       parent: leafNodeId,
       children: [],
+      reasoningContent: '',
     };
     setPending(convId, pendingMsg);
 
@@ -254,13 +255,23 @@ export const AppContextProvider = ({
         if (chunk.error) {
           throw new Error(chunk.error?.message || 'Unknown error');
         }
-        const addedContent = chunk.choices[0].delta.content;
-        const lastContent = pendingMsg.content || '';
-        if (addedContent) {
+
+        const reasoningContent = chunk.choices[0].delta.reasoning_content;
+        if (reasoningContent) {
+          const lastContent = pendingMsg.reasoningContent || '';
           pendingMsg = {
             ...pendingMsg,
-            content: lastContent + addedContent,
+            reasoningContent: lastContent + reasoningContent,
           };
+        } else {
+          const addedContent = chunk.choices[0].delta.content;
+          const lastContent = pendingMsg.content || '';
+          if (addedContent) {
+            pendingMsg = {
+              ...pendingMsg,
+              content: lastContent + addedContent,
+            };
+          }
         }
         const timings = chunk.timings;
         if (timings && config.showTokensPerSecond) {

tools/server/webui/src/utils/types.ts

@@ -40,6 +40,7 @@ export interface Message {
   type: 'text' | 'root';
   timestamp: number; // timestamp from Date.now()
   role: 'user' | 'assistant' | 'system';
+  reasoningContent?: string;
   content: string;
   timings?: TimingReport;
   extra?: MessageExtra[];