Buckets:
gijl/lv-storage / llama.cpp /tools /ui /src /lib /components /app /content /CollapsibleTerminalBlock.svelte
| <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( | |
| 'min-w-0 overflow-x-auto 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="terminal-body p-3 pt-1"> | |
| {@render children()} | |
| </div> | |
| {/if} | |
| </Collapsible.Content> | |
| </Collapsible.Root> | |
| <style> | |
| /* A body that renders no element (exec block while its args stream) | |
| must not leave its padding as a gap under the title. */ | |
| .terminal-body:not(:has(*)) { | |
| padding: 0; | |
| } | |
| </style> | |
Xet Storage Details
- Size:
- 2.89 kB
- Xet hash:
- 7e83fa7c4cad93a4bd97a6bec1f3e2b7cc973e17bd9bc755b52cabbef73632b1
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.