feat: claude 3.7 model support

app/components/chat.tsx

@@ -54,6 +54,8 @@ import ReloadIcon from "../icons/reload.svg";
 import HeadphoneIcon from "../icons/headphone.svg";
 import SearchCloseIcon from "../icons/search_close.svg";
 import SearchOpenIcon from "../icons/search_open.svg";
+import EnableThinkingIcon from "../icons/thinking_enable.svg";
+import DisableThinkingIcon from "../icons/thinking_disable.svg";
 import {
   ChatMessage,
   SubmitKey,
@@ -82,6 +84,7 @@ import {
   isSupportRAGModel,
   isFunctionCallModel,
   isFirefox,
+  isClaudeThinkingModel,
 } from "../utils";
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
@@ -511,6 +514,14 @@ export function ChatActions(props: {
   const pluginStore = usePluginStore();
   const session = chatStore.currentSession();
 
+  // switch thinking mode
+  const claudeThinking = chatStore.currentSession().mask.claudeThinking;
+  function switchClaudeThinking() {
+    chatStore.updateTargetSession(session, (session) => {
+      session.mask.claudeThinking = !session.mask.claudeThinking;
+    });
+  }
+
   // switch web search
   const webSearch = chatStore.currentSession().mask.webSearch;
   function switchWebSearch() {
@@ -741,6 +752,7 @@ export function ChatActions(props: {
           text={currentModelName}
           icon={<RobotIcon />}
         />
+
         {!isFunctionCallModel(currentModel) && isEnableWebSearch && (
           <ChatAction
             onClick={switchWebSearch}
@@ -753,6 +765,20 @@ export function ChatActions(props: {
           />
         )}
 
+        {isClaudeThinkingModel(currentModel) && (
+          <ChatAction
+            onClick={switchClaudeThinking}
+            text={
+              claudeThinking
+                ? Locale.Chat.InputActions.DisableThinking
+                : Locale.Chat.InputActions.EnableThinking
+            }
+            icon={
+              claudeThinking ? <EnableThinkingIcon /> : <DisableThinkingIcon />
+            }
+          />
+        )}
+
         {showModelSelector && (
           <SearchSelector
             defaultSelectedValue={`${currentModel}@${currentProviderName}`}

app/components/model-config.tsx

@@ -110,6 +110,29 @@ export function ModelConfigList(props: {
         ></input>
       </ListItem>
 
+      {props.modelConfig?.providerName === ServiceProvider.Anthropic && (
+        <ListItem
+          title={Locale.Settings.BudgetTokens.Title}
+          subTitle={Locale.Settings.BudgetTokens.SubTitle}
+        >
+          <input
+            aria-label={Locale.Settings.BudgetTokens.Title}
+            type="number"
+            min={1024}
+            max={32000}
+            value={props.modelConfig.budget_tokens}
+            onChange={(e) =>
+              props.updateConfig(
+                (config) =>
+                  (config.budget_tokens = ModalConfigValidator.budget_tokens(
+                    e.currentTarget.valueAsNumber,
+                  )),
+              )
+            }
+          ></input>
+        </ListItem>
+      )}
+
       {props.modelConfig?.providerName == ServiceProvider.Google ? null : (
         <>
           <ListItem