src/lib/components/chat/ToolCallDisplay.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import gsap from "gsap";

    export let toolName: string;
    export let parameters: any = null;

    let element: HTMLDivElement;

    onMount(() => {
        gsap.fromTo(
            element,
            { opacity: 0, scale: 0.9, y: -5 },
            { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" }
        );
    });

    const toolIcons: Record<string, string> = {
        read_game_code: "📄",
        edit_game_code: "✏️",
        read_console: "📟",
        clear_console: "🧹",
        run_game: "▶️",
        stop_game: "⏹",
        default: "🔧",
    };

    $: icon = toolIcons[toolName] || toolIcons.default;
</script>

<div class="tool-call" bind:this={element}>
    <span class="tool-icon">{icon}</span>
    <span class="tool-name">{toolName}</span>
    {#if parameters && Object.keys(parameters).length > 0}
        <span class="tool-params">
            {#each Object.entries(parameters) as [key, value]}
                <span class="param">
                    <span class="param-key">{key}:</span>
                    <span class="param-value">{typeof value === 'string' && value.length > 20 ? value.substring(0, 20) + '...' : value}</span>
                </span>
            {/each}
        </span>
    {/if}
</div>

<style>
    .tool-call {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(65, 105, 225, 0.1);
        border: 1px solid rgba(65, 105, 225, 0.3);
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        margin: 0.25rem 0;
        font-size: 0.8rem;
        font-family: "Monaco", "Menlo", monospace;
    }

    .tool-icon {
        font-size: 1rem;
        line-height: 1;
    }

    .tool-name {
        color: rgba(65, 105, 225, 1);
        font-weight: 600;
    }

    .tool-params {
        display: flex;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.75rem;
    }

    .param {
        display: flex;
        gap: 0.25rem;
    }

    .param-key {
        color: rgba(255, 255, 255, 0.5);
    }

    .param-value {
        color: rgba(255, 210, 30, 0.7);
    }
</style>