File size: 2,627 Bytes
c59fd93 | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <script lang="ts">
import ChevronDown from '@lucide/svelte/icons/chevron-down';
import * as Collapsible from '$lib/components/ui/collapsible/index.js';
import { cn } from '$lib/components/ui/utils';
import { ICON_CLASS_DEFAULT } from '$lib/constants';
import type { Snippet } from 'svelte';
import type { Component } from 'svelte';
interface Props {
open?: boolean;
class?: string;
icon?: Component;
iconClass?: string;
iconUrl?: string | null;
title?: string;
titleSnippet?: Snippet;
subtitle?: string;
shimmerTitle?: boolean;
onToggle?: () => void;
children: Snippet;
}
let {
children,
class: className = '',
icon: IconComponent,
iconClass = ICON_CLASS_DEFAULT,
iconUrl = null,
onToggle,
open = $bindable(false),
shimmerTitle = false,
subtitle,
title = '',
titleSnippet
}: Props = $props();
function hideBrokenIcon(event: Event) {
(event.currentTarget as HTMLImageElement).style.display = 'none';
}
</script>
<Collapsible.Root
class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
onOpenChange={(value) => {
open = value;
onToggle?.();
}}
{open}
style="background: var(--code-background); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);"
>
<Collapsible.Trigger
class={cn(
'flex w-full cursor-pointer items-start justify-between gap-2 text-left',
'px-3 py-2'
)}
>
<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
{#if iconUrl}
<img
alt=""
class={cn('shrink-0 rounded-sm mt-0.5', iconClass)}
onerror={hideBrokenIcon}
src={iconUrl}
/>
{:else if IconComponent}
<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.5', iconClass)} />
{/if}
<span class={cn('text-sm font-medium', shimmerTitle ? 'shimmer-text' : 'text-foreground/80')}>
{#if titleSnippet}
{@render titleSnippet()}
{:else}
{title}
{/if}
</span>
{#if subtitle}
<span class="text-xs italic text-muted-foreground/70">{subtitle}</span>
{/if}
</div>
<ChevronDown
class={cn(
'size-4 shrink-0 text-muted-foreground/60 transition-all duration-150 ease-out opacity-0 group-hover/collapsible:opacity-100 mt-0.5',
open && 'rotate-180'
)}
/>
<span class="sr-only">Toggle content</span>
</Collapsible.Trigger>
<Collapsible.Content>
<!-- See CollapsibleContentBlock: bits-ui keeps closed content mounted, which
makes a collapsed tool result re-render on every streamed token. -->
{#if open}
<div class="p-3 pt-1">
{@render children()}
</div>
{/if}
</Collapsible.Content>
</Collapsible.Root>
|