Add support for reasoning in the UI

Add UI settings to set reasoning effort / token budget
Add UI to show reasoning tokens from Anthropic Claude 3.7 Sonnet and DeepSeek R1

Author: FallDownTheSystem

core/index.d.ts

@@ -324,7 +324,22 @@ export type ImageMessagePart = {
   imageUrl: { url: string };
 };
 
-export type MessagePart = TextMessagePart | ImageMessagePart;
+export type ThinkingMessagePart = {
+  type: "thinking";
+  thinking: string;
+  signature: string;
+};
+
+export type RedactedThinkingMessagePart = {
+  type: "redacted_thinking";
+  data: string;
+};
+
+export type MessagePart =
+  | TextMessagePart
+  | ImageMessagePart
+  | ThinkingMessagePart
+  | RedactedThinkingMessagePart;
 
 export type MessageContent = string | MessagePart[];
 
@@ -360,6 +375,7 @@ export interface UserChatMessage {
 export interface AssistantChatMessage {
   role: "assistant";
   content: MessageContent;
+  reasoning_content?: string;
   toolCalls?: ToolCallDelta[];
 }
 
@@ -921,11 +937,17 @@ export interface BaseCompletionOptions {
   prediction?: Prediction;
   tools?: Tool[];
   toolChoice?: ToolChoice;
+  thinking?: {
+    type: "enabled" | "disabled";
+    budget_tokens?: number;
+  };
+  reasoning_effort?: "high" | "medium" | "low";
 }
 
 export interface ModelCapability {
   uploadImage?: boolean;
   tools?: boolean;
+  thinking?: boolean;
 }
 
 export interface ModelDescription {

core/llm/autodetect.ts

@@ -174,7 +174,8 @@ function autodetectTemplateType(model: string): TemplateType | undefined {
     lower.includes("pplx") ||
     lower.includes("gemini") ||
     lower.includes("grok") ||
-    lower.includes("moonshot")
+    lower.includes("moonshot") ||
+    lower.includes("deepseek-reasoner")
   ) {
     return undefined;
   }
@@ -373,11 +374,45 @@ function autodetectPromptTemplates(
   return templates;
 }
 
+const PROVIDER_SUPPORTS_THINKING: string[] = ["anthropic", "openai", "deepseek"];
+
+const MODEL_SUPPORTS_THINKING: string[] = [
+  "claude-3-7-sonnet-20250219",
+  "claude-3-7-sonnet-latest",
+  "o3-mini",
+  "o3-mini-2025-01-31",
+  "o1",
+  "o1-2024-12-17",
+  "deepseek-reasoner",
+];
+
+function modelSupportsThinking(
+  provider: string,
+  model: string,
+  title: string | undefined,
+  capabilities: ModelCapability | undefined,
+): boolean {
+  if (capabilities?.thinking !== undefined) {
+    return capabilities.thinking;
+  }
+
+  if (!PROVIDER_SUPPORTS_THINKING.includes(provider)) {
+    return false;
+  }
+
+  const lower = model.toLowerCase();
+  return MODEL_SUPPORTS_THINKING.some(
+    (modelName) => lower.includes(modelName) || title?.includes(modelName),
+  );
+}
+
 export {
   autodetectPromptTemplates,
   autodetectTemplateFunction,
   autodetectTemplateType,
   llmCanGenerateInParallel,
   modelSupportsImages,
-  modelSupportsTools,
+  modelSupportsThinking,
+  modelSupportsTools
 };
+

core/llm/countTokens.ts

@@ -90,8 +90,15 @@ async function countTokensAsync(
     const promises = content.map(async (part) => {
       if (part.type === "imageUrl") {
         return countImageTokens(part);
+      } else if (part.type === "thinking") {
+        return (await encoding.encode(part.thinking ?? "")).length;
+      } else if (part.type === "redacted_thinking") {
+        // For redacted thinking, don't count any tokens
+        return 0;
+      } else if (part.type === "text") {
+        return (await encoding.encode(part.text ?? "")).length;
       }
-      return (await encoding.encode(part.text ?? "")).length;
+      return 0;
     });
     return (await Promise.all(promises)).reduce((sum, val) => sum + val, 0);
   }
@@ -106,12 +113,17 @@ function countTokens(
   const encoding = encodingForModel(modelName);
   if (Array.isArray(content)) {
     return content.reduce((acc, part) => {
-      return (
-        acc +
-        (part.type === "text"
-          ? encoding.encode(part.text ?? "", "all", []).length
-          : countImageTokens(part))
-      );
+      if (part.type === "text") {
+        return acc + encoding.encode(part.text ?? "", "all", []).length;
+      } else if (part.type === "imageUrl") {
+        return acc + countImageTokens(part);
+      } else if (part.type === "thinking") {
+        return acc + encoding.encode(part.thinking ?? "", "all", []).length;
+      } else if (part.type === "redacted_thinking") {
+        // For redacted thinking, don't count any tokens
+        return acc;
+      }
+      return acc;
     }, 0);
   } else {
     return encoding.encode(content ?? "", "all", []).length;
@@ -469,5 +481,6 @@ export {
   pruneLinesFromTop,
   pruneRawPromptFromTop,
   pruneStringFromBottom,
-  pruneStringFromTop,
+  pruneStringFromTop
 };
+