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

Claude: Implement clearing of the conversation history

Browse Source
This commit is contained in:
Alessandro Pignotti 2025-03-03 16:16:14 +01:00
parent 5ba38a80ac
commit 2ba90ab2df
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/AnthropicTab.svelte
View File

@ -1,8 +1,9 @@
<script> <script>
import { apiState, setApiKey, addMessage, forceStop, messageList, currentMessage } from '$lib/anthropic.js'; import { apiState, setApiKey, addMessage, clearMessageHistory, forceStop, messageList, currentMessage } from '$lib/anthropic.js';
import { tick } from 'svelte'; import { tick } from 'svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import PanelButton from './PanelButton.svelte'; import PanelButton from './PanelButton.svelte';
import SmallButton from './SmallButton.svelte';
import { aiActivity } from './activities.js'; import { aiActivity } from './activities.js';
export let handleTool; export let handleTool;
let stopRequested = false; let stopRequested = false;
@ -110,17 +111,23 @@
<h1 class="text-lg font-bold">Claude AI Integration</h1> <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> <p>WebVM is integrated with Claude by Anthropic AI. You can prompt the AI to control the system.</p>
<p>You need to provide your API key. The key is only saved locally to your browser.</p> <p>You need to provide your API key. The key is only saved locally to your browser.</p>
<div class="flex grow overflow-y-scroll scrollbar" use:scrollMessage={$messageList}> <div class="flex grow flex-col overflow-y-hidden gap-2">
<div class="h-full w-full"> <p class="flex flex-row gap-2">
<div class="w-full min-h-full flex flex-col gap-2 justify-end"> <span class="mr-auto flex items-center">Conversation history</span>
{#each $messageList as msg} <SmallButton buttonIcon="fa-solid fa-trash-can" clickHandler={clearMessageHistory} buttonTooltip="Clear conversation history"></SmallButton>
{@const details = getMessageDetails(msg)} </p>
{#if details.isToolUse} <div class="flex grow overflow-y-scroll scrollbar" use:scrollMessage={$messageList}>
<p class="bg-neutral-700 p-2 rounded-md italic"><i class='fas {details.icon} w-6 mr-2 text-center'></i>{details.messageContent}</p> <div class="h-full w-full">
{:else if !details.isToolResult} <div class="w-full min-h-full flex flex-col gap-2 justify-end">
<p class="{msg.role == 'error' ? 'bg-red-900' : 'bg-neutral-700'} p-2 rounded-md whitespace-pre-wrap"><i class='fas {details.icon} w-6 mr-2 text-center'></i>{details.messageContent}</p> {#each $messageList as msg}
{/if} {@const details = getMessageDetails(msg)}
{/each} {#if details.isToolUse}
<p class="bg-neutral-700 p-2 rounded-md italic"><i class='fas {details.icon} w-6 mr-2 text-center'></i>{details.messageContent}</p>
{:else if !details.isToolResult}
<p class="{msg.role == 'error' ? 'bg-red-900' : 'bg-neutral-700'} p-2 rounded-md whitespace-pre-wrap"><i class='fas {details.icon} w-6 mr-2 text-center'></i>{details.messageContent}</p>
{/if}
{/each}
</div>
</div> </div>
</div> </div>
</div> </div>

11
src/lib/SmallButton.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
export let clickHandler = null;
export let buttonTooltip = null;
export let bgColor = "bg-neutral-700";
export let hoverColor = "hover:bg-neutral-500"
export let buttonIcon = null;
</script>
<span class="inline-block h-7 {bgColor} p-1 rounded-md shadow-md shadow-neutral-900 {(clickHandler != null) ? `${hoverColor} cursor-pointer` : ""}" title={buttonTooltip} on:click={clickHandler}>
<i class="w-5 {buttonIcon} text-center"></i>
</span>

5
src/lib/anthropic.js
View File

@ -127,6 +127,11 @@ export function addMessage(text, handleTool)
plausible("ClaudeAI Use"); plausible("ClaudeAI Use");
} }
export function clearMessageHistory() {
messages.length = 0;
messageList.set(messages);
}
export function forceStop() { export function forceStop() {
stopFlag = true; stopFlag = true;
return new Promise((resolve) => { return new Promise((resolve) => {