save reasoning_content

src/chatgpt.ts

@@ -22,6 +22,7 @@ export interface ToolCall {
 export interface Message {
   role: "system" | "user" | "assistant" | "tool";
   content: string | MessageDetail[];
+  reasoning_content?: string | null;
   name?: "example_user" | "example_assistant";
   tool_calls?: ToolCall[];
   tool_call_id?: string;
@@ -30,6 +31,7 @@ export interface Message {
 interface Delta {
   role?: string;
   content?: string;
+  reasoning_content?: string;
   tool_calls?: ToolCall[];
 }
 

src/components/ImageGenDrawer.tsx

@@ -208,6 +208,7 @@ export function ImageGenDrawer({ disableFactor }: Props) {
                             audio: null,
                             logprobs: null,
                             response_model_name: imageGenModel,
+                            reasoning_content: null,
                           });
 
                           setChatStore({ ...chatStore });

src/pages/AddToolMsg.tsx

@@ -74,6 +74,7 @@ const AddToolMsg = (props: {
                 audio: null,
                 logprobs: null,
                 response_model_name: null,
+                reasoning_content: null,
               });
               setChatStore({ ...chatStore });
               setNewToolCallID("");

src/pages/Chatbox.tsx

@@ -82,6 +82,7 @@ export default function ChatBOX() {
   ): Promise<Usage> => {
     let responseTokenCount = 0;
     const allChunkMessage: string[] = [];
+    const allReasoningContentChunk: string[] = [];
     const allChunkTool: ToolCall[] = [];
     setShowGenerating(true);
     const logprobs: Logprobs = {
@@ -110,7 +111,13 @@ export default function ChatBOX() {
         console.log(c?.delta?.content, logprob);
       }
 
+      if (c?.delta?.content) {
         allChunkMessage.push(c?.delta?.content ?? "");
+      }
+      if (c?.delta?.reasoning_content) {
+        allReasoningContentChunk.push(c?.delta?.reasoning_content ?? "");
+      }
+
       const tool_calls = c?.delta?.tool_calls;
       if (tool_calls) {
         for (const tool_call of tool_calls) {
@@ -142,6 +149,11 @@ export default function ChatBOX() {
         }
       }
       setGeneratingMessage(
+        (allReasoningContentChunk.length
+          ? "----------\nreasoning:\n" +
+            allReasoningContentChunk.join("") +
+            "\n----------\n"
+          : "") +
           allChunkMessage.join("") +
           allChunkTool.map((tool) => {
             return `Tool Call ID: ${tool.id}\nType: ${tool.type}\nFunction: ${tool.function.name}\nArguments: ${tool.function.arguments}`;
@@ -150,11 +162,13 @@ export default function ChatBOX() {
     }
     setShowGenerating(false);
     const content = allChunkMessage.join("");
+    const reasoning_content = allReasoningContentChunk.join("");
 
     console.log("save logprobs", logprobs);
     const newMsg: ChatStoreMessage = {
       role: "assistant",
       content,
+      reasoning_content,
       hide: false,
       token: responseTokenCount,
       example: false,
@@ -211,6 +225,7 @@ export default function ChatBOX() {
       audio: null,
       logprobs: data.choices[0]?.logprobs,
       response_model_name: data.model,
+      reasoning_content: data.choices[0]?.message?.reasoning_content ?? null,
     });
     setShowGenerating(false);
 
@@ -375,6 +390,7 @@ export default function ChatBOX() {
       audio: null,
       logprobs: null,
       response_model_name: null,
+      reasoning_content: null,
     });
 
     // manually calculate token length

src/types/chatstore.ts

@@ -74,6 +74,7 @@ export interface ChatStoreMessage {
 
   role: "system" | "user" | "assistant" | "tool";
   content: string | MessageDetail[];
+  reasoning_content: string | null;
   name?: "example_user" | "example_assistant";
   tool_calls?: ToolCall[];
   tool_call_id?: string;