From db3b0757967518756ef7f7c74ded45032ea1c68f Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 11 Jun 2024 12:16:11 -0700
Subject: [PATCH] refac: input menu tools

---
 .../chat/MessageInput/InputMenu.svelte        | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index f0bebd8c0..6f7061bed 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -46,28 +46,31 @@
 			transition={flyAndScale}
 		>
 			{#if Object.keys(tools).length > 0}
-				{#each Object.keys(tools) as toolId}
-					<div
-						class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
-					>
-						<div class="flex-1 flex items-center gap-2">
-							<WrenchSolid />
+				<div class="  max-h-28 overflow-y-auto scrollbar-hidden">
+					{#each Object.keys(tools) as toolId}
+						<div
+							class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
+						>
+							<div class="flex-1 flex items-center gap-2">
+								<WrenchSolid />
 
-							<Tooltip content={tools[toolId]?.description ?? ''}>
-								<div class="flex items-center line-clamp-1">{tools[toolId].name}</div>
-							</Tooltip>
+								<Tooltip content={tools[toolId]?.description ?? ''}>
+									<div class="flex items-center line-clamp-1">{tools[toolId].name}</div>
+								</Tooltip>
+							</div>
+
+							<Switch
+								bind:state={tools[toolId].enabled}
+								on:change={(e) => {
+									selectedToolIds = e.detail
+										? [...selectedToolIds, toolId]
+										: selectedToolIds.filter((id) => id !== toolId);
+								}}
+							/>
 						</div>
+					{/each}
+				</div>
 
-						<Switch
-							bind:state={tools[toolId].enabled}
-							on:change={(e) => {
-								selectedToolIds = e.detail
-									? [...selectedToolIds, toolId]
-									: selectedToolIds.filter((id) => id !== toolId);
-							}}
-						/>
-					</div>
-				{/each}
 				<hr class="border-gray-100 dark:border-gray-800 my-1" />
 			{/if}