Fix reasoning tokens in Anthropic API

Author: XInTheDark

src/api/Providers/special/custom_openai.js

@@ -49,11 +49,12 @@ export const CustomOpenAIProvider = {
     try {
       const { getCustomAPIInfo } = await import("#root/src/api/providers_custom.js");
       apiData = await getCustomAPIInfo(url);
+      this.info.type = this.info.type ?? apiData.type;
       // eslint-disable-next-line no-empty
     } catch {}
 
     // Initialize
-    const api_url = getChatCompletionsURL(url, this.info?.type ?? apiData.type);
+    const api_url = getChatCompletionsURL(url, this.info?.type);
 
     apiKey = apiKey || apiData.apiKey;
     // The order for applying configs: reqBody -> apiData.config -> reqConfig
@@ -103,8 +104,7 @@ export const CustomOpenAIProvider = {
 
         try {
           let json = JSON.parse(line);
-          let chunk = json["choices"][0]["delta"] ?? json["choices"][0]["message"];
-          chunk = chunk?.content;
+          let chunk = this.getChunk(json);
           if (chunk) {
             yield chunk;
           }
@@ -114,4 +114,32 @@ export const CustomOpenAIProvider = {
       }
     }
   },
+  getChunk: function (json) {
+    switch (this.info?.type) {
+      case "Anthropic": {
+        let chunk = "";
+        if (json["delta"]["thinking"]) {
+          if (!this.isThinking) {
+            this.isThinking = true;
+            chunk += "\n<thinking>\n";
+          }
+          chunk += json["delta"]["thinking"];
+        }
+        if (json["delta"]["text"]) {
+          if (this.isThinking) {
+            this.isThinking = false;
+            chunk += "\n</thinking>\n";
+          }
+          chunk += json["delta"]["text"];
+        }
+        return chunk;
+      }
+      case "OpenAI":
+      default: {
+        let chunk = json["choices"][0]["delta"] ?? json["choices"][0]["message"];
+        chunk = chunk?.content;
+        return chunk;
+      }
+    }
+  },
 };

src/components/preferences/manageCustomAPIs.jsx

@@ -69,13 +69,9 @@ const EditAPIConfig = ({ customAPIData, setCustomAPIData, url }) => {
       <Form.TextField id="name" title="API Name" defaultValue={APIData.name} />
       <Form.TextField id="apiKey" title="API Key" defaultValue={APIData.apiKey} />
 
-      <Form.Dropdown
-        id="type"
-        title="Type"
-        defaultValue={APIData.type}
-      >
-        <Form.Dropdown.Item title="OpenAI" value="OpenAI"  />
-        <Form.Dropdown.Item title="Anthropic"  value="Anthropic"  />
+      <Form.Dropdown id="type" title="Type" defaultValue={APIData.type}>
+        <Form.Dropdown.Item title="OpenAI" value="OpenAI" />
+        <Form.Dropdown.Item title="Anthropic" value="Anthropic" />
       </Form.Dropdown>
 
       {/* Options */}