Spaces:
Running
Running
File size: 1,880 Bytes
3342a1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<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> |