Fix dev upstream merge conflicts

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -1,39 +1,52 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
 	import { flyAndScale } from '$lib/utils/transitions';
-	import { getContext } from 'svelte';
+	import { getContext, onMount, tick } from 'svelte';
+
+	import { config, user, tools as _tools, mobile } from '$lib/stores';
 	import { createPicker } from '$lib/utils/google-drive-picker';
+	import { getTools } from '$lib/apis/tools';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
-	import { config } from '$lib/stores';
 	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
+	import CameraSolid from '$lib/components/icons/CameraSolid.svelte';
 
 	const i18n = getContext('i18n');
 
+	export let screenCaptureHandler: Function;
 	export let uploadFilesHandler: Function;
 	export let uploadGoogleDriveHandler: Function;
 
 	export let selectedToolIds: string[] = [];
-	export let webSearchEnabled: boolean;
 
-	export let tools = {};
+	export let webSearchEnabled: boolean;
 	export let onClose: Function;
 
-	$: tools = Object.fromEntries(
-		Object.keys(tools).map((toolId) => [
-			toolId,
-			{
-				...tools[toolId],
-				enabled: selectedToolIds.includes(toolId)
-			}
-		])
-	);
-
+	let tools = {};
 	let show = false;
+
+	$: if (show) {
+		init();
+	}
+
+	const init = async () => {
+		if ($_tools === null) {
+			await _tools.set(await getTools(localStorage.token));
+		}
+
+		tools = $_tools.reduce((a, tool, i, arr) => {
+			a[tool.id] = {
+				name: tool.name,
+				description: tool.meta.description,
+				enabled: selectedToolIds.includes(tool.id)
+			};
+			return a;
+		}, {});
+	};
 </script>
 
 <Dropdown
@@ -60,49 +73,75 @@
 			{#if Object.keys(tools).length > 0}
 				<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"
+						<button
+							class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
+							on:click={() => {
+								tools[toolId].enabled = !tools[toolId].enabled;
+							}}
 						>
-							<div class="flex-1">
+							<div class="flex-1 truncate">
 								<Tooltip
 									content={tools[toolId]?.description ?? ''}
 									placement="top-start"
-									className="flex flex-1  gap-2 items-center"
+									className="flex flex-1 gap-2 items-center"
 								>
-									<WrenchSolid />
+									<div class="flex-shrink-0">
+										<WrenchSolid />
+									</div>
 
-									<div class=" line-clamp-1">{tools[toolId].name}</div>
+									<div class=" truncate">{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>
+							<div class=" flex-shrink-0">
+								<Switch
+									state={tools[toolId].enabled}
+									on:change={async (e) => {
+										const state = e.detail;
+										await tick();
+										if (state) {
+											selectedToolIds = [...selectedToolIds, toolId];
+										} else {
+											selectedToolIds = selectedToolIds.filter((id) => id !== toolId);
+										}
+									}}
+								/>
+							</div>
+						</button>
 					{/each}
 				</div>
 
-				<hr class="border-gray-100 dark:border-gray-800 my-1" />
+				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}
 
 			{#if $config?.features?.enable_web_search}
-				<div
-					class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
+				<button
+					class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
+					on:click={() => {
+						webSearchEnabled = !webSearchEnabled;
+					}}
 				>
 					<div class="flex-1 flex items-center gap-2">
 						<GlobeAltSolid />
 						<div class=" line-clamp-1">{$i18n.t('Web Search')}</div>
 					</div>
 
-					<Switch bind:state={webSearchEnabled} />
-				</div>
+					<Switch state={webSearchEnabled} />
+				</button>
 
-				<hr class="border-gray-100 dark:border-gray-800 my-1" />
+				<hr class="border-black/5 dark:border-white/5 my-1" />
+			{/if}
+
+			{#if !$mobile}
+				<DropdownMenu.Item
+					class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+					on:click={() => {
+						screenCaptureHandler();
+					}}
+				>
+					<CameraSolid />
+					<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
+				</DropdownMenu.Item>
 			{/if}
 
 			<DropdownMenu.Item