From 3311f999928964ca1f7870fefb407553197dc2d5 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 25 Oct 2026 15:44:56 +0900
Subject: [PATCH] refac

---
 .../Messages/ContextCompactionLabel.svelte    | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/chat/Messages/ContextCompactionLabel.svelte b/src/lib/components/chat/Messages/ContextCompactionLabel.svelte
index 1c814ed002..ea79af6fb9 100644
--- a/src/lib/components/chat/Messages/ContextCompactionLabel.svelte
+++ b/src/lib/components/chat/Messages/ContextCompactionLabel.svelte
@@ -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>