Claude: Restructure message rendering

In preperation for supporting more tools

src/lib/AnthropicTab.svelte

@@ -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) {
+			let tool = msg.content[0].input;
+			if (tool.action === "screenshot") {
+				icon = "fa-desktop";
+				messageContent = "Screenshot";
+			} else {
+				icon = "fa-screwdriver-wrench";
+				messageContent = "Use the system";
 			}
-	function getIconForTool(msg)
+		} else {
-	{
+			icon = msg.role === "user" ? "fa-user" : "fa-robot";
-		if(msg.content[0].input.action == "screenshot")
+			messageContent = msg.content;
-			return "fa-desktop";
-		else
-			return "fa-screwdriver-wrench";
 		}
-	function getMessageForTool(msg)
+
-	{
+		return {
-		if(msg.content[0].input.action == "screenshot")
+			isToolUse,
-			return "Screenshot";
+			isToolResult,
-		else
+			icon,
-			return "Use the system";
+			messageContent,
-	}
+			role: msg.role
-	function isToolUse(msg)
+		};
-	{
-		if(!Array.isArray(msg.content))
-			return false;
-		return msg.content[0].type == "tool_use";
-	}
-	function isToolResult(msg)
-	{
-		if(!Array.isArray(msg.content))
-			return false;
-		return msg.content[0].type == "tool_result";
 	}
 </script>
 <h1 class="text-lg font-bold">Claude AI Integration</h1>
@@ -88,10 +83,11 @@
 	<div class="h-full w-full">
 		<div class="w-full min-h-full flex flex-col gap-2 justify-end">
 			{#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}
 			{/each}
 		</div>