server: update webui to new reasoning_content diff

Author: ochafik

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

@@ -12,12 +12,6 @@ import {
 import ChatInputExtraContextItem from './ChatInputExtraContextItem';
 import { BtnWithTooltips } from '../utils/common';
 
-interface SplitMessage {
-  content: PendingMessage['content'];
-  thought?: string;
-  isThinking?: boolean;
-}
-
 export default function ChatMessage({
   msg,
   siblingLeafNodeIds,
@@ -55,32 +49,6 @@ export default function ChatMessage({
   const nextSibling = siblingLeafNodeIds[siblingCurrIdx + 1];
   const prevSibling = siblingLeafNodeIds[siblingCurrIdx - 1];
 
-  // 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') {
-      return { content: msg.content };
-    }
-    let actualContent = '';
-    let thought = '';
-    let isThinking = false;
-    let thinkSplit = msg.content.split('<think>', 2);
-    actualContent += thinkSplit[0];
-    while (thinkSplit[1] !== undefined) {
-      // <think> tag found
-      thinkSplit = thinkSplit[1].split('</think>', 2);
-      thought += thinkSplit[0];
-      isThinking = true;
-      if (thinkSplit[1] !== undefined) {
-        // </think> closing tag found
-        isThinking = false;
-        thinkSplit = thinkSplit[1].split('<think>', 2);
-        actualContent += thinkSplit[0];
-      }
-    }
-    return { content: actualContent, thought, isThinking };
-  }, [msg]);
-
   if (!viewingChat) return null;
 
   const isUser = msg.role === 'user';
@@ -141,7 +109,7 @@ export default function ChatMessage({
           {/* not editing content, render message */}
           {editingContent === null && (
             <>
-              {content === null ? (
+              {msg.content === null ? (
                 <>
                   {/* show loading dots for pending message */}
                   <span className="loading loading-dots loading-md"></span>
@@ -150,16 +118,16 @@ export default function ChatMessage({
                 <>
                   {/* render message as markdown */}
                   <div dir="auto" tabIndex={0}>
-                    {thought && (
+                    {msg.reasoningContent && (
                       <ThoughtProcess
-                        isThinking={!!isThinking && !!isPending}
-                        content={thought}
+                        isThinking={!!msg.reasoningContent && !!isPending}
+                        content={msg.reasoningContent}
                         open={config.showThoughtInProgress}
                       />
                     )}
 
                     <MarkdownDisplay
-                      content={content}
+                      content={msg.content}
                       isGenerating={isPending}
                     />
                   </div>

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

@@ -186,6 +186,7 @@ export const AppContextProvider = ({
       timestamp: pendingId,
       role: 'assistant',
       content: null,
+      reasoningContent: null,
       parent: leafNodeId,
       children: [],
     };
@@ -254,12 +255,15 @@ 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 addedContent = chunk.choices[0].delta.content ?? '';
+        const addedReasoningContent =
+          chunk.choices[0].delta.reasoning_content ?? '';
+        if (addedContent.length > 0 || addedReasoningContent.length > 0) {
           pendingMsg = {
             ...pendingMsg,
-            content: lastContent + addedContent,
+            content: (pendingMsg.content ?? '') + addedContent,
+            reasoningContent:
+              (pendingMsg.reasoningContent ?? '') + addedReasoningContent,
           };
         }
         const timings = chunk.timings;
@@ -324,6 +328,7 @@ export const AppContextProvider = ({
         convId,
         role: 'user',
         content,
+        reasoningContent: null,
         extra,
         parent: leafNodeId,
         children: [],
@@ -367,6 +372,7 @@ export const AppContextProvider = ({
           convId,
           role: 'user',
           content,
+          reasoningContent: null,
           extra,
           parent: parentNodeId,
           children: [],

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

@@ -111,6 +111,7 @@ const StorageUtils = {
       timestamp: now,
       role: 'system',
       content: '',
+      reasoningContent: null,
       parent: -1,
       children: [],
     });
@@ -229,6 +230,7 @@ interface LSMessage {
   id: number;
   role: 'user' | 'assistant' | 'system';
   content: string;
+  reasoningContent: string | null;
   timings?: TimingReport;
 }
 async function migrationLStoIDB() {
@@ -267,6 +269,7 @@ async function migrationLStoIDB() {
         timestamp: rootId,
         role: 'system',
         content: '',
+        reasoningContent: null,
         parent: -1,
         children: [firstMsg.id],
       });

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

@@ -41,6 +41,7 @@ export interface Message {
   timestamp: number; // timestamp from Date.now()
   role: 'user' | 'assistant' | 'system';
   content: string;
+  reasoningContent: string | null;
   timings?: TimingReport;
   extra?: MessageExtra[];
   // node based system for branching
@@ -112,6 +113,7 @@ export interface ViewingChat {
 
 export type PendingMessage = Omit<Message, 'content'> & {
   content: string | null;
+  reasoningContent: string | null;
 };
 
 export enum CanvasType {