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

11
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,7 +111,12 @@
<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">
<p class="flex flex-row gap-2">
<span class="mr-auto flex items-center">Conversation history</span>
<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}>
<div class="h-full w-full"> <div class="h-full w-full">
<div class="w-full min-h-full flex flex-col gap-2 justify-end"> <div class="w-full min-h-full flex flex-col gap-2 justify-end">
{#each $messageList as msg} {#each $messageList as msg}
@ -123,6 +129,7 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
</div> </div>
{#if $apiState == "KEY_REQUIRED"} {#if $apiState == "KEY_REQUIRED"}
<textarea class="bg-neutral-700 p-2 rounded-md placeholder-gray-400 resize-none shrink-0" placeholder="Insert your Claude API Key" rows="1" on:keydown={handleKeyEnter} on:input={handleResize} id="ai-input"/> <textarea class="bg-neutral-700 p-2 rounded-md placeholder-gray-400 resize-none shrink-0" placeholder="Insert your Claude API Key" rows="1" on:keydown={handleKeyEnter} on:input={handleResize} id="ai-input"/>

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) => {