Sunny-Moom/webvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Claude: Support thinking mode

Browse Source
This commit is contained in:
Alessandro Pignotti 2025-03-03 17:05:31 +01:00
parent 7b2a4682c5
commit 0ed0cc52a2
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
postcss.config.js
View File

@ -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':

11
src/lib/AnthropicTab.svelte
View File

@ -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}>

12
src/lib/anthropic.js
View File

@ -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();