50 lines
1.4 KiB
Svelte
50 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
|
import { cn } from "$lib/utils";
|
|
|
|
let { text, live = false }: { text: string; live?: boolean } = $props();
|
|
|
|
const PREVIEW = 400;
|
|
const SPACES = /\s+/g;
|
|
let expanded = $state(false);
|
|
const flat = $derived(text.replace(SPACES, " ").trim());
|
|
</script>
|
|
|
|
<div class="flex min-w-0 max-w-full flex-col">
|
|
<button
|
|
aria-expanded={expanded}
|
|
class="row-hover ledger-grid grid-cols-[auto_auto_minmax(0,1fr)] rounded-md px-1.5 py-1 text-left text-sm"
|
|
onclick={() => {
|
|
expanded = !expanded;
|
|
}}
|
|
type="button"
|
|
>
|
|
<ChevronRightIcon
|
|
class={cn(
|
|
"size-3.5 text-icon transition-transform duration-150",
|
|
expanded && "rotate-90"
|
|
)}
|
|
/>
|
|
<span class="size-2 rounded-full bg-kind-deep"></span>
|
|
<span class="flex min-w-0 items-baseline gap-2">
|
|
<span class="shrink-0 font-medium text-kind-deep">reasoning</span>
|
|
{#if live && !expanded}
|
|
<span class="truncate text-left text-muted-foreground" dir="rtl">
|
|
<bdi dir="ltr">{flat.slice(-PREVIEW)}</bdi>
|
|
</span>
|
|
{:else if !expanded}
|
|
<span class="truncate text-muted-foreground"
|
|
>{flat.slice(0, PREVIEW)}</span
|
|
>
|
|
{/if}
|
|
</span>
|
|
</button>
|
|
{#if expanded}
|
|
<p
|
|
class="mb-1 ml-7 @md:max-w-[75ch] whitespace-pre-wrap break-words text-muted-foreground text-sm"
|
|
>
|
|
{text.trim()}
|
|
</p>
|
|
{/if}
|
|
</div>
|