From ccbc46fbbeb09e7a143a7a13d210982064a58ddf Mon Sep 17 00:00:00 2001
From: Taylor Wilsdon <tbarrett@yelp.com>
Date: Fri, 9 May 2025 10:20:17 -0400
Subject: [PATCH 1/3] implement visible scrollbar for tools overflow, add show
 all toggle

---
 .../components/chat/MessageInput/InputMenu.svelte   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index 2447c3aa5..b3918b93d 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -102,7 +102,7 @@
 			transition={flyAndScale}
 		>
 			{#if Object.keys(tools).length > 0}
-				<div class="  max-h-28 overflow-y-auto scrollbar-hidden">
+				<div class="max-h-28 overflow-y-auto scrollbar-thin">
 					{#each Object.keys(tools) as toolId}
 						<button
 							class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
@@ -141,6 +141,17 @@
 						</button>
 					{/each}
 				</div>
+<button
+						class="flex w-full justify-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+						on:click={() => {
+							const element = document.querySelector('.max-h-28');
+							if (element) {
+								element.classList.remove('max-h-28');
+							}
+						}}
+					>
+						^
+					</button>
 
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}

From 628a10e34adf89c9ca9f6bf6bb8dcc31cbdab613 Mon Sep 17 00:00:00 2001
From: Taylor Wilsdon <tbarrett@yelp.com>
Date: Fri, 9 May 2025 10:26:48 -0400
Subject: [PATCH 2/3] make the collapse toggle more subtle & compact

---
 .../chat/MessageInput/InputMenu.svelte        | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index b3918b93d..bbfc20e18 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -33,6 +33,7 @@
 
 	let tools = {};
 	let show = false;
+	let showAllTools = false;
 
 	$: if (show) {
 		init();
@@ -102,7 +103,7 @@
 			transition={flyAndScale}
 		>
 			{#if Object.keys(tools).length > 0}
-				<div class="max-h-28 overflow-y-auto scrollbar-thin">
+				<div class="{showAllTools ? '' : 'max-h-28'} overflow-y-auto scrollbar-thin">
 					{#each Object.keys(tools) as toolId}
 						<button
 							class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
@@ -141,18 +142,25 @@
 						</button>
 					{/each}
 				</div>
-<button
-						class="flex w-full justify-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+					<button
+						class="flex w-full justify-center items-center text-sm font-medium cursor-pointer rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
 						on:click={() => {
-							const element = document.querySelector('.max-h-28');
-							if (element) {
-								element.classList.remove('max-h-28');
-							}
+							showAllTools = !showAllTools;
 						}}
+						title={showAllTools ? $i18n.t('Show Less') : $i18n.t('Show All')}
 					>
-						^
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2.5"
+							stroke="currentColor"
+							class="size-3 transition-transform duration-200 {showAllTools ? 'rotate-180' : ''} text-gray-300 dark:text-gray-600"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"
+							></path>
+						</svg>
 					</button>
-
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}
 

From 1299c11650300036ea9463932a8a2a9499e98183 Mon Sep 17 00:00:00 2001
From: Taylor Wilsdon <tbarrett@yelp.com>
Date: Fri, 9 May 2025 10:30:45 -0400
Subject: [PATCH 3/3] only show tools toggle if overflow present

---
 src/lib/components/chat/MessageInput/InputMenu.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index bbfc20e18..829c4c87f 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -142,6 +142,7 @@
 						</button>
 					{/each}
 				</div>
+					{#if Object.keys(tools).length > 3}
 					<button
 						class="flex w-full justify-center items-center text-sm font-medium cursor-pointer rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
 						on:click={() => {
@@ -161,6 +162,7 @@
 							></path>
 						</svg>
 					</button>
+					{/if}
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}