feat: add warnings to let people know they should use a tool calling model (#1590)

src/routes/tools/+page.svelte

@@ -20,6 +20,7 @@
 	import { SortKey } from "$lib/types/Assistant";
 	import ToolLogo from "$lib/components/ToolLogo.svelte";
 	import { ReviewStatus } from "$lib/types/Review";
+	import { useSettingsStore } from "$lib/stores/settings";
 
 	export let data: PageData;
 
@@ -31,6 +32,11 @@
 	$: createdByMe = data.user?.username && data.user.username === toolsCreator;
 	$: activeOnly = $page.url.searchParams.get("active") === "true";
 
+	const settings = useSettingsStore();
+
+	$: currentModelSupportTools =
+		data.models.find((m) => m.id === $settings.activeModel)?.tools ?? false;
+
 	const SEARCH_DEBOUNCE_DELAY = 400;
 	let filterInputEl: HTMLInputElement;
 	let filterValue = data.query;
@@ -144,7 +150,7 @@
 			</a>
 		</div>
 
-		<div class="mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm">
+		<div class="mb-4 mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm">
 			{#if toolsCreator && !createdByMe}
 				<div
 					class="flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-50 px-3 py-1 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
@@ -231,7 +237,14 @@
 			</select>
 		</div>
 
-		<div class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 lg:grid-cols-2">
+		{#if !currentModelSupportTools}
+			<div class="mx-auto text-center text-sm text-purple-700 dark:text-purple-300">
+				You are currently not using a model that supports tools. Activate one
+				<a href="{base}/models" class="underline">here</a>.
+			</div>
+		{/if}
+
+		<div class="mt-4 grid grid-cols-1 gap-3 sm:gap-5 lg:grid-cols-2">
 			{#each tools as tool}
 				{@const isActive = ($page.data.settings?.tools ?? []).includes(tool._id.toString())}
 				{@const isOfficial = !tool.createdByName}

src/routes/tools/[toolId]/+page.svelte

@@ -39,6 +39,9 @@
 	$: isActive = $settings.tools?.includes(data.tool?._id.toString());
 
 	let displayReportModal = false;
+
+	$: currentModelSupportTools =
+		data.models.find((m) => m.id === $settings.activeModel)?.tools ?? false;
 </script>
 
 {#if displayReportModal}
@@ -98,25 +101,34 @@
 						class="flex flex-wrap items-center gap-x-4 gap-y-2 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800 max-sm:justify-center"
 					>
 						<div class="w-full sm:w-auto">
-							<button
-								class="{isActive
-									? 'bg-gray-100 text-gray-800'
-									: 'bg-black !text-white'} mx-auto my-2 flex w-min items-center justify-center rounded-full px-3 py-1 text-base"
-								name="Activate model"
-								on:click|stopPropagation={() => {
-									if (isActive) {
-										settings.instantSet({
-											tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
-										});
-									} else {
-										settings.instantSet({
-											tools: [...($settings?.tools ?? []), data.tool._id],
-										});
-									}
-								}}
-							>
-								{isActive ? "Deactivate" : "Activate"}
-							</button>
+							{#if currentModelSupportTools}
+								<button
+									class="{isActive
+										? 'bg-gray-100 text-gray-800'
+										: 'bg-black !text-white'} mx-auto my-2 flex w-min items-center justify-center rounded-full px-3 py-1 text-base"
+									name="Activate model"
+									on:click|stopPropagation={() => {
+										if (isActive) {
+											settings.instantSet({
+												tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
+											});
+										} else {
+											settings.instantSet({
+												tools: [...($settings?.tools ?? []), data.tool._id],
+											});
+										}
+									}}
+								>
+									{isActive ? "Deactivate" : "Activate"}
+								</button>
+							{:else}
+								<button
+									disabled
+									class="mx-auto my-2 flex w-min items-center justify-center rounded-full bg-gray-200 px-3 py-1 text-base text-gray-500"
+								>
+									Activate
+								</button>
+							{/if}
 						</div>
 						{#if data.tool?.createdByMe}
 							<a href="{base}/tools/{data.tool?._id}/edit" class="underline"
@@ -242,9 +254,16 @@
 					</div>
 				</div>
 			</div>
-			<p class="text-sm max-sm:hidden">
-				Tools are applications that the model can choose to call while you are chatting with it.
-			</p>
+			{#if !currentModelSupportTools}
+				<span class="relative text-sm text-gray-500">
+					You are currently not using a model that supports tools. Activate one
+					<a href="{base}/models" class="underline">here</a>.
+				</span>
+			{:else}
+				<p class="text-sm max-sm:hidden">
+					Tools are applications that the model can choose to call while you are chatting with it.
+				</p>
+			{/if}
 			{#if data.tool.description}
 				<div>
 					<h2 class="text-lg font-semibold">Description</h2>