feat(tools): add description on what function name is

src/routes/tools/ToolEdit.svelte

@@ -15,6 +15,8 @@
 	import { base } from "$app/paths";
 	import ToolInputComponent from "./ToolInputComponent.svelte";
 
+	import CarbonInformation from "~icons/carbon/information";
+
 	type ActionData = {
 		error?: boolean;
 		errors?: {
@@ -334,7 +336,20 @@
 										>
 
 										<label class="ml-auto">
-											<span class="text-sm text-gray-500">AI Name</span>
+											<span
+												class="group relative flex w-max items-center justify-center text-sm font-semibold text-gray-700"
+											>
+												AI Function Name
+												<CarbonInformation class="m-1 align-middle text-xs text-purple-500" />
+												<div
+													class="pointer-events-none absolute -top-16 right-0 w-max rounded-md bg-gray-100 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-800"
+												>
+													<p class="max-w-sm text-sm font-normal text-gray-800 dark:text-gray-200">
+														This is the function name that will be used when prompting the model.
+														Make sure it describes your tool well, is short and unique.
+													</p>
+												</div>
+											</span>
 											<input
 												class="h-fit rounded-lg border-2 border-gray-200 bg-gray-100 p-1"
 												type="text"