Merge pull request #13736 from taylorwilsdon/ideas/13702

enh: Improve visibility of overflow / hidden tools when more than 3 are present

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-hidden">
+				<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,7 +142,27 @@
 						</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={() => {
+							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>
+					{/if}
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}