src/lib/components/chat/MessageSegment.svelte

<script lang="ts">
    import type { MessageSegment } from "../../stores/agent";
    import MarkdownRenderer from "./MarkdownRenderer.svelte";
    import ToolInvocation from "./ToolInvocation.svelte";

    export let segment: MessageSegment;
    export let hideToolResult: boolean = false;
</script>

{#if segment.type === "text"}
    {#if segment.content.trim()}
        <div class="text-segment">
            <MarkdownRenderer content={segment.content} streaming={segment.streaming} />
        </div>
    {/if}
{:else if segment.type === "tool-invocation"}
    <ToolInvocation {segment} />
{:else if segment.type === "tool-result"}
    {#if !hideToolResult}
        <ToolInvocation {segment} />
    {/if}
{:else if segment.type === "reasoning"}
    <div class="reasoning-segment">
        <details class="reasoning-details">
            <summary>Thinking...</summary>
            <div class="reasoning-content">
                {segment.content}
            </div>
        </details>
    </div>
{/if}

<style>
    .text-segment {
        margin: 0.25rem 0;
    }

    .reasoning-segment {
        margin: 0.25rem 0;
        padding: 0.4rem 0.6rem;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 3px;
        border-left: 2px solid rgba(255, 255, 255, 0.1);
    }

    .reasoning-details {
        cursor: pointer;
    }

    .reasoning-details summary {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        user-select: none;
    }

    .reasoning-details summary:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .reasoning-content {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.825rem;
        font-family: "Monaco", "Menlo", monospace;
        white-space: pre-wrap;
    }
</style>