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

Claude: Restructure message rendering

Browse Source 
In preperation for supporting more tools
This commit is contained in:
Alessandro Pignotti 2025-03-01 22:54:50 +01:00
parent 47755e507b
commit 109b8f8137
1 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/lib/AnthropicTab.svelte
View File

@ -47,38 +47,33 @@
} }
} }
} }
function getIconForMsg(msg) function getMessageDetails(msg) {
{ const isToolUse = Array.isArray(msg.content) && msg.content[0].type === "tool_use";
if(msg.role == "user") const isToolResult = Array.isArray(msg.content) && msg.content[0].type === "tool_result";
return "fa-user" let icon = "";
else let messageContent = "";
return "fa-robot"
} if (isToolUse) {
function getIconForTool(msg) let tool = msg.content[0].input;
{ if (tool.action === "screenshot") {
if(msg.content[0].input.action == "screenshot") icon = "fa-desktop";
return "fa-desktop"; messageContent = "Screenshot";
else } else {
return "fa-screwdriver-wrench"; icon = "fa-screwdriver-wrench";
} messageContent = "Use the system";
function getMessageForTool(msg) }
{ } else {
if(msg.content[0].input.action == "screenshot") icon = msg.role === "user" ? "fa-user" : "fa-robot";
return "Screenshot"; messageContent = msg.content;
else }
return "Use the system";
} return {
function isToolUse(msg) isToolUse,
{ isToolResult,
if(!Array.isArray(msg.content)) icon,
return false; messageContent,
return msg.content[0].type == "tool_use"; role: msg.role
} };
function isToolResult(msg)
{
if(!Array.isArray(msg.content))
return false;
return msg.content[0].type == "tool_result";
} }
</script> </script>
<h1 class="text-lg font-bold">Claude AI Integration</h1> <h1 class="text-lg font-bold">Claude AI Integration</h1>
@ -88,10 +83,11 @@
<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}
{#if isToolUse(msg)} {@const details = getMessageDetails(msg)}
<p class="bg-neutral-700 p-2 rounded-md italic"><i class='fas {getIconForTool(msg)} w-6 mr-2 text-center'></i>{getMessageForTool(msg)}</p> {#if details.isToolUse}
{:else if !isToolResult(msg)} <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>
<p class="{msg.role == 'error' ? 'bg-red-900' : 'bg-neutral-700'} p-2 rounded-md"><i class='fas {getIconForMsg(msg)} w-6 mr-2 text-center'></i>{msg.content}</p> {:else if !details.isToolResult}
<p class="{msg.role == 'error' ? 'bg-red-900' : 'bg-neutral-700'} p-2 rounded-md"><i class='fas {details.icon} w-6 mr-2 text-center'></i>{details.messageContent}</p>
{/if} {/if}
{/each} {/each}
</div> </div>