From 5f1988ab65455d241f47c1d880a3963007841caf Mon Sep 17 00:00:00 2001 From: vikingowl Date: Wed, 31 Dec 2025 21:16:55 +0100 Subject: [PATCH] feat: visually distinguish tool messages from regular AI responses MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tool messages get emerald/teal avatar with wrench icon - Tool message bubbles have emerald left border and darker bg - Normal assistant messages keep purple robot avatar - Clear visual hierarchy: user (blue) / assistant (purple) / tool (green) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../lib/components/chat/MessageItem.svelte | 63 +++++++++++++------ 1 file changed, 44 insertions(+), 19 deletions(-) diff --git a/frontend/src/lib/components/chat/MessageItem.svelte b/frontend/src/lib/components/chat/MessageItem.svelte index 1c09c54..47cb5be 100644 --- a/frontend/src/lib/components/chat/MessageItem.svelte +++ b/frontend/src/lib/components/chat/MessageItem.svelte @@ -49,6 +49,15 @@ ) ); + // Detect tool-related assistant messages (has tool calls or contains tool results) + const isToolMessage = $derived( + isAssistant && ( + hasToolCalls || + node.message.content.includes('Tool result:') || + node.message.content.includes('Tool error:') + ) + ); + /** * Start editing a message */ @@ -100,19 +109,37 @@ > {#if isAssistant} - + {:else} + + + {/if} {/if} @@ -122,13 +149,11 @@ >
{#if isEditing}