From 7ace8f4c5234f1401596aa2a4780ba724e7fd39f Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Wed, 26 Feb 2025 10:49:05 +0100
Subject: [PATCH] feat: add support for claude sonnet 3.7 thinking (#5387)

* feat: add support for claude sonnet 3.7 thinking

* non streaming as well
---
 frontend/package-lock.json                    |  8 ++--
 frontend/package.json                         |  4 +-
 .../lib/components/copilot/ScriptGen.svelte   | 37 ++++++++++++-------
 frontend/src/lib/components/copilot/lib.ts    | 36 +++++++++++++++---
 4 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ce92f235da..38342ebff3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
 			"version": "1.470.1",
 			"license": "AGPL-3.0",
 			"dependencies": {
-				"@anthropic-ai/sdk": "^0.32.1",
+				"@anthropic-ai/sdk": "^0.37.0",
 				"@aws-crypto/sha256-js": "^4.0.0",
 				"@codingame/monaco-vscode-configuration-service-override": "~11.1.2",
 				"@codingame/monaco-vscode-standalone-css-language-features": "~11.1.2",
@@ -185,9 +185,9 @@
 			}
 		},
 		"node_modules/@anthropic-ai/sdk": {
-			"version": "0.32.1",
-			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.32.1.tgz",
-			"integrity": "sha512-U9JwTrDvdQ9iWuABVsMLj8nJVwAyQz6QXvgLsVhryhCEPkLsbcP/MXxm+jYcAwLoV8ESbaTTjnD4kuAFa+Hyjg==",
+			"version": "0.37.0",
+			"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.37.0.tgz",
+			"integrity": "sha512-tHjX2YbkUBwEgg0JZU3EFSSAQPoK4qQR/NFYa8Vtzd5UAyXzZksCw2In69Rml4R/TyHPBfRYaLK35XiOe33pjw==",
 			"license": "MIT",
 			"dependencies": {
 				"@types/node": "^18.11.18",
diff --git a/frontend/package.json b/frontend/package.json
index 3594a4452e..e56ad48c12 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -84,7 +84,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@anthropic-ai/sdk": "^0.32.1",
+		"@anthropic-ai/sdk": "^0.37.0",
 		"@aws-crypto/sha256-js": "^4.0.0",
 		"@codingame/monaco-vscode-configuration-service-override": "~11.1.2",
 		"@codingame/monaco-vscode-standalone-css-language-features": "~11.1.2",
@@ -120,8 +120,8 @@
 		"minimatch": "^10.0.1",
 		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
 		"monaco-editor-wrapper": "6.1.1",
-		"monaco-languageclient": "9.1.1",
 		"monaco-graphql": "^1.6.0",
+		"monaco-languageclient": "9.1.1",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^4.57.2",
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index 960cf13689..646c61676c 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -412,20 +412,29 @@
 							</ToggleButtonGroup>
 
 							<div class="min-w-0">
-								{#if $copilotInfo.ai_models.length > 1}
-									<select
-										bind:value={$copilotSessionModel}
-										class="!text-xs !pr-5 !bg-[right_center] overflow-ellipsis text-right !border-none !shadow-none"
-									>
-										{#each $copilotInfo.ai_models as model}
-											<option value={model} class="pr-4">{model}</option>
-										{/each}
-									</select>
-								{:else if $copilotInfo.ai_models.length === 1}
-									<div class="text-xs whitespace-nowrap overflow-hidden overflow-ellipsis">
-										{$copilotInfo.ai_models[0]}
-									</div>
-								{/if}
+								<TooltipV2>
+									{#if $copilotInfo.ai_models.length > 1}
+										<select
+											bind:value={$copilotSessionModel}
+											class="!text-xs !pr-5 !bg-[right_center] overflow-ellipsis text-right !border-none !shadow-none"
+										>
+											{#each $copilotInfo.ai_models as model}
+												<option value={model} class="pr-4">{model}</option>
+											{/each}
+										</select>
+									{:else if $copilotInfo.ai_models.length === 1}
+										<div class="text-xs whitespace-nowrap overflow-hidden overflow-ellipsis">
+											{$copilotInfo.ai_models[0]}
+										</div>
+									{/if}
+									<svelte:fragment slot="text">
+										<span class="text-xs"
+											>{$copilotInfo.ai_models.length > 1
+												? $copilotSessionModel
+												: $copilotInfo.ai_models[0]}</span
+										>
+									</svelte:fragment>
+								</TooltipV2>
 							</div>
 						</div>
 						<div class="flex w-96 items-start">
diff --git a/frontend/src/lib/components/copilot/lib.ts b/frontend/src/lib/components/copilot/lib.ts
index f7923dc2f0..f727dbdd12 100644
--- a/frontend/src/lib/components/copilot/lib.ts
+++ b/frontend/src/lib/components/copilot/lib.ts
@@ -35,7 +35,12 @@ export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts))
 // need at least one model for each provider except customai
 export const AI_DEFAULT_MODELS: Record<AIProvider, string[]> = {
 	openai: ['gpt-4o', 'gpt-4o-mini'],
-	anthropic: ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest'],
+	anthropic: [
+		'claude-3-7-sonnet-latest',
+		'claude-3-7-sonnet-latest/thinking',
+		'claude-3-5-haiku-latest',
+		'claude-3-5-sonnet-latest'
+	],
 	mistral: ['codestral-latest'],
 	deepseek: ['deepseek-chat', 'deepseek-reasoner'],
 	googleai: ['gemini-1.5-pro', 'gemini-2.0-flash', 'gemini-1.5-flash'],
@@ -196,7 +201,6 @@ namespace MistralAI {
 
 export namespace AnthropicAI {
 	export const config: MessageCreateParams = {
-		temperature: 0,
 		max_tokens: 8192,
 		model: '',
 		messages: []
@@ -224,8 +228,6 @@ export namespace AnthropicAI {
 		if (part.type == 'content_block_delta') {
 			if (part.delta.type == 'text_delta') {
 				response = part.delta.text
-			} else {
-				response = part.delta.partial_json
 			}
 		}
 		return response
@@ -507,7 +509,18 @@ export async function getNonStreamingCompletion(
 				{
 					...AnthropicAI.config,
 					system,
-					model,
+					...(model.endsWith('/thinking')
+						? {
+								thinking: {
+									type: 'enabled',
+									budget_tokens: 1024
+								},
+								model: model.slice(0, -9)
+						  }
+						: {
+								model,
+								temperature: 0
+						  }),
 					messages: anthropicMessages,
 					stream: false
 				},
@@ -601,7 +614,18 @@ export async function getCompletion(
 			const completion = await anthropicClient.messages.create(
 				{
 					...AnthropicAI.config,
-					model,
+					...(model.endsWith('/thinking')
+						? {
+								thinking: {
+									type: 'enabled',
+									budget_tokens: 1024
+								},
+								model: model.slice(0, -9)
+						  }
+						: {
+								model,
+								temperature: 0
+						  }),
 					system,
 					messages: anthropicMessages,
 					stream: true