Claude: Support thinking mode

postcss.config.js

@@ -24,6 +24,7 @@ export default {
 				case '.fa-mouse-pointer:before':
 				case '.fa-hourglass-half:before':
 				case '.fa-hand:before':
+				case '.fa-brain:before':
 				case '.fa-keyboard:before':
 				case '.fa-brands:before':
 				case '.fa-solid:before':

src/lib/AnthropicTab.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { apiState, setApiKey, addMessage, clearMessageHistory, forceStop, messageList, currentMessage } from '$lib/anthropic.js';
+	import { apiState, setApiKey, addMessage, clearMessageHistory, forceStop, messageList, currentMessage, enableThinking } from '$lib/anthropic.js';
 	import { tick } from 'svelte';
 	import { get } from 'svelte/store';
 	import PanelButton from './PanelButton.svelte';
@@ -56,6 +56,7 @@
 	function getMessageDetails(msg) {
 		const isToolUse = Array.isArray(msg.content) && msg.content[0].type === "tool_use";
 		const isToolResult = Array.isArray(msg.content) && msg.content[0].type === "tool_result";
+		const isThinking = Array.isArray(msg.content) && msg.content[0].type === "thinking";
 		let icon = "";
 		let messageContent = "";
 
@@ -89,6 +90,9 @@
 				icon = "fa-screwdriver-wrench";
 				messageContent = "Use the system";
 			}
+		} else if (isThinking) {
+			icon = "fa-brain";
+			messageContent = "Thinking...";
 		} else {
 			icon = msg.role === "user" ? "fa-user" : "fa-robot";
 			messageContent = msg.content;
@@ -107,6 +111,10 @@
 		await forceStop();
 		stopRequested = false;
 	}
+
+	function toggleThinkingMode() {
+		enableThinking.set(!get(enableThinking));
+	}
 </script>
 <h1 class="text-lg font-bold">Claude AI Integration</h1>
 <p>WebVM is integrated with Claude by Anthropic AI. You can prompt the AI to control the system.</p>
@@ -114,6 +122,7 @@
 <div class="flex grow flex-col overflow-y-hidden gap-2">
 	<p class="flex flex-row gap-2">
 		<span class="mr-auto flex items-center">Conversation history</span>
+		<SmallButton buttonIcon="fa-solid fa-brain" clickHandler={toggleThinkingMode} buttonTooltip="{$enableThinking ? "Disable" : "Enable"} thinking mode" bgColor={$enableThinking ? "bg-neutral-500" : "bg-neutral-700"}></SmallButton>
 		<SmallButton buttonIcon="fa-solid fa-trash-can" clickHandler={clearMessageHistory} buttonTooltip="Clear conversation history"></SmallButton>
 	</p>
 	<div class="flex grow overflow-y-scroll scrollbar" use:scrollMessage={$messageList}>

src/lib/anthropic.js

@@ -38,14 +38,17 @@ async function sendMessages(handleTool)
 	{
 		var dc = get(displayConfig);
 		var tool = dc ? { type: "computer_20250124", name: "computer", display_width_px: dc.width, display_height_px: dc.height, display_number: 1 } : { type: "bash_20250124", name: "bash" }
-		const response = await client.beta.messages.create({max_tokens: 1024,
+		const config = {max_tokens: 2048,
 									messages: messages,
 									system: "You are running on a virtualized machine. Wait some extra time after all operations to compensate for slowdown.",
 									model: 'claude-3-7-sonnet-20250219',
 									tools: [tool],
 									tool_choice: {type: "auto", disable_parallel_tool_use: true},
 									betas: ["computer-use-2025-01-24"]
-								});
+								};
+		if(get(enableThinking))
+			config.thinking = { type: "enabled", budget_tokens: 1024 };
+		const response = await client.beta.messages.create(config);
 		if(stopFlag)
 		{
 			aiActivity.set(false);
@@ -97,6 +100,10 @@ async function sendMessages(handleTool)
 				}
 				sendMessages(handleTool);
 			}
+			else if(c.type == "thinking")
+			{
+				addMessageInternal(response.role, [c]);
+			}
 			else
 			{
 				console.warn(`Invalid response type: ${c.type}`);
@@ -156,6 +163,7 @@ export const apiState = writable("KEY_REQUIRED");
 export const messageList = writable(messages);
 export const currentMessage = writable("");
 export const displayConfig = writable(null);
+export const enableThinking = writable(false);
 
 if(browser)
 	initialize();