This commit is contained in:
Timothy Jaeryang Baek 2026-10-25 15:44:56 +09:00
parent c8786f426a
commit 3311f99992

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
@ -8,7 +9,7 @@
export let status: 'in_progress' | { error: string } | undefined = undefined;
export let compactPreview = false;
$: rowClass = `flex w-full min-w-0 items-center gap-1.5 py-0.5 ${
$: rowClass = `flex w-full min-w-0 items-center gap-1.5 pt-0.5 pb-1 ${
compactPreview ? 'text-xs' : 'text-[0.9375rem]'
} text-gray-400 dark:text-gray-500`;
</script>
@ -23,22 +24,24 @@
{/if}
</div>
{:else if summary.trim()}
<!-- Only stop the response card's click handler; summary provides keyboard interaction. -->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
<details on:click|stopPropagation>
<summary
class="{rowClass} cursor-pointer outline-offset-4 transition-colors hover:text-gray-500 focus-visible:outline-2 focus-visible:outline-gray-400 dark:hover:text-gray-400 [&::-webkit-details-marker]:hidden"
<!-- Keep expanding the summary from selecting a different model's response. -->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div on:click|stopPropagation>
<Collapsible
title={$i18n.t('Context compacted')}
chevronClassName="hidden"
buttonClassName="{rowClass} cursor-pointer outline-offset-4 transition-colors hover:text-gray-500 focus-visible:outline-2 focus-visible:outline-gray-400 dark:hover:text-gray-400"
>
<span>{$i18n.t('Context compacted')}</span>
</summary>
<div
role="region"
aria-label={$i18n.t('Compaction summary')}
class="my-1.5 max-h-80 overflow-y-auto whitespace-pre-wrap break-words text-xs leading-5 text-gray-600 dark:text-gray-300"
>
{summary}
</div>
</details>
<div
slot="content"
role="region"
aria-label={$i18n.t('Compaction summary')}
class="my-1.5 max-h-80 overflow-y-auto whitespace-pre-wrap break-words text-xs leading-5 text-gray-600 dark:text-gray-300"
>
{summary}
</div>
</Collapsible>
</div>
{:else}
<div class={rowClass}>
<span>{$i18n.t('Context compacted')}</span>