From 28bece53db8228ba2f0ea00bf30c6e87e860e12a Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 4 Jun 2026 11:18:02 -0400
Subject: [PATCH] feat(ui): add compact action toolbar toggle to collapse
 custom action buttons

---
 .../chat/Messages/ResponseMessage.svelte      | 96 +++++++++++++++----
 .../components/chat/Settings/Interface.svelte | 23 +++++
 2 files changed, 101 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 8acec479c6..ac539d9329 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -64,6 +64,8 @@
 	import StatusHistory from './ResponseMessage/StatusHistory.svelte';
 	import FullHeightIframe from '$lib/components/common/FullHeightIframe.svelte';
 	import OutputEditView from './OutputEditView.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 
 	interface MessageType {
 		id: string;
@@ -166,6 +168,7 @@
 	let contentContainerElement: HTMLDivElement;
 	let buttonsContainerElement: HTMLDivElement;
 	let showDeleteConfirm = false;
+	let showActions = false;
 
 	let model = null;
 	$: model = $models.find((m) => m.id === message.model);
@@ -1451,36 +1454,93 @@
 										{/if}
 									{/if}
 
-									{#each model?.actions ?? [] as action}
-										<Tooltip content={action.name} placement="bottom">
+									{#if $settings?.compactToolbar && (model?.actions ?? []).length > 0}
+										<Tooltip
+											content={showActions ? $i18n.t('Hide Actions') : $i18n.t('More Actions')}
+											placement="bottom"
+										>
 											<button
 												type="button"
-												aria-label={action.name}
+												aria-label={showActions ? $i18n.t('Hide Actions') : $i18n.t('More Actions')}
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
 													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 												on:click={() => {
-													actionMessage(action.id, message);
+													showActions = !showActions;
 												}}
 											>
-												{#if action?.icon}
-													<div class="size-4">
-														<img
-															src={action.icon}
-															class="w-4 h-4 {action.icon.includes('data:image/svg')
-																? 'dark:invert-[80%]'
-																: ''}"
-															style="fill: currentColor;"
-															alt={action.name}
-															draggable="false"
-														/>
-													</div>
+												{#if showActions}
+													<ChevronLeft className="size-4" strokeWidth="2.3" />
 												{:else}
-													<Sparkles strokeWidth="2.1" className="size-4" />
+													<ChevronRight className="size-4" strokeWidth="2.3" />
 												{/if}
 											</button>
 										</Tooltip>
-									{/each}
+
+										{#if showActions}
+											{#each model?.actions ?? [] as action}
+												<Tooltip content={action.name} placement="bottom">
+													<button
+														type="button"
+														aria-label={action.name}
+														class="{isLastMessage || ($settings?.highContrastMode ?? false)
+															? 'visible'
+															: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+														on:click={() => {
+															actionMessage(action.id, message);
+														}}
+													>
+														{#if action?.icon}
+															<div class="size-4">
+																<img
+																	src={action.icon}
+																	class="w-4 h-4 {action.icon.includes('data:image/svg')
+																		? 'dark:invert-[80%]'
+																		: ''}"
+																	style="fill: currentColor;"
+																	alt={action.name}
+																	draggable="false"
+																/>
+															</div>
+														{:else}
+															<Sparkles strokeWidth="2.1" className="size-4" />
+														{/if}
+													</button>
+												</Tooltip>
+											{/each}
+										{/if}
+									{:else}
+										{#each model?.actions ?? [] as action}
+											<Tooltip content={action.name} placement="bottom">
+												<button
+													type="button"
+													aria-label={action.name}
+													class="{isLastMessage || ($settings?.highContrastMode ?? false)
+														? 'visible'
+														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+													on:click={() => {
+														actionMessage(action.id, message);
+													}}
+												>
+													{#if action?.icon}
+														<div class="size-4">
+															<img
+																src={action.icon}
+																class="w-4 h-4 {action.icon.includes('data:image/svg')
+																	? 'dark:invert-[80%]'
+																	: ''}"
+																style="fill: currentColor;"
+																alt={action.name}
+																draggable="false"
+															/>
+														</div>
+													{:else}
+														<Sparkles strokeWidth="2.1" className="size-4" />
+													{/if}
+												</button>
+											</Tooltip>
+										{/each}
+									{/if}
 								{/if}
 							{/if}
 						{/if}
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 250c75a9ff..40d470f880 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -78,6 +78,8 @@
 	let showFloatingActionButtons = true;
 	let floatingActionButtons = null;
 
+	let compactToolbar = false;
+
 	let imageCompression = false;
 	let imageCompressionSize = {
 		width: '',
@@ -264,6 +266,8 @@
 		showFloatingActionButtons = $settings?.showFloatingActionButtons ?? true;
 		floatingActionButtons = $settings?.floatingActionButtons ?? null;
 
+		compactToolbar = $settings?.compactToolbar ?? false;
+
 		imageCompression = $settings?.imageCompression ?? false;
 		imageCompressionSize = $settings?.imageCompressionSize ?? { width: '', height: '' };
 		imageCompressionInChannels = $settings?.imageCompressionInChannels ?? true;
@@ -1116,6 +1120,25 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div id="compact-toolbar-label" class=" self-center text-xs">
+						{$i18n.t('Compact Action Toolbar')}
+					</div>
+
+					<div class="flex items-center gap-2 p-1">
+						<Switch
+							ariaLabelledbyId="compact-toolbar-label"
+							tooltip={true}
+							bind:state={compactToolbar}
+							on:change={() => {
+								saveSettings({ compactToolbar });
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div id="web-search-in-chat-label" class=" self-center text-xs">