feat(assistants): use community tools in assistants (#1421)

* wip: give assistant tool access

* add api endpoints

* add/delete tools from assistant settings

* make tools work with assistants

* feat(tools): add more tools indicator throughout UI

* formatting

src/lib/components/AssistantSettings.svelte

@@ -11,6 +11,7 @@
 	import CarbonUpload from "~icons/carbon/upload";
 	import CarbonHelpFilled from "~icons/carbon/help";
 	import CarbonSettingsAdjust from "~icons/carbon/settings-adjust";
+	import CarbonTools from "~icons/carbon/tools";
 
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
@@ -18,6 +19,7 @@
 	import TokensCounter from "./TokensCounter.svelte";
 	import HoverTooltip from "./HoverTooltip.svelte";
 	import { findCurrentModel } from "$lib/utils/models";
+	import AssistantToolPicker from "./AssistantToolPicker.svelte";
 
 	type ActionData = {
 		error: boolean;
@@ -93,7 +95,9 @@
 		? "domains"
 		: false;
 
+	let tools = assistant?.tools ?? [];
 	const regex = /{{\s?url=(.+?)\s?}}/g;
+
 	$: templateVariables = [...systemPrompt.matchAll(regex)].map((match) => match[1]);
 	$: selectedModel = models.find((m) => m.id === modelId);
 </script>
@@ -146,6 +150,8 @@
 			formData.set("ragLinkList", "");
 		}
 
+		formData.set("tools", tools.join(","));
+
 		return async ({ result }) => {
 			loading = false;
 			await applyAction(result);
@@ -403,16 +409,27 @@
 				</div>
 				<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
 			</label>
+			{#if $page.data.user?.isEarlyAccess && selectedModel?.tools}
+				<div>
+					<span class="text-smd font-semibold"
+						>Tools
+						<CarbonTools class="inline text-xs text-purple-600" />
+						<span class="ml-1 rounded bg-gray-100 px-1 py-0.5 text-xxs font-normal text-gray-600"
+							>Experimental</span
+						>
+					</span>
+					<p class="text-xs text-gray-500">
+						Choose up to 3 community tools that will be used with this assistant.
+					</p>
+				</div>
+				<AssistantToolPicker bind:toolIds={tools} />
+			{/if}
 			{#if $page.data.enableAssistantsRAG}
-				<div class="mb-4 flex flex-col flex-nowrap">
+				<div class="flex flex-col flex-nowrap pb-4">
 					<span class="mt-2 text-smd font-semibold"
 						>Internet access
 						<IconInternet classNames="inline text-sm text-blue-600" />
 
-						<span class="ml-1 rounded bg-gray-100 px-1 py-0.5 text-xxs font-normal text-gray-600"
-							>Experimental</span
-						>
-
 						{#if isHuggingChat}
 							<a
 								href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/385"
@@ -507,26 +524,13 @@
 						/>
 						<p class="text-xs text-red-500">{getError("ragLinkList", form)}</p>
 					{/if}
-
-					<!-- divider -->
-					<div class="my-3 ml-0 mr-6 w-full border border-gray-200" />
-
-					<label class="text-sm has-[:checked]:font-semibold">
-						<input type="checkbox" name="dynamicPrompt" bind:checked={dynamicPrompt} />
-						Dynamic Prompt
-						<p class="mb-2 text-xs font-normal text-gray-500">
-							Allow the use of template variables {"{{url=https://example.com/path}}"}
-							to insert dynamic content into your prompt by making GET requests to specified URLs on
-							each inference.
-						</p>
-					</label>
 				</div>
 			{/if}
 		</div>
 
 		<div class="relative col-span-1 flex h-full flex-col">
 			<div class="mb-1 flex justify-between text-sm">
-				<span class="font-semibold"> Instructions (System Prompt) </span>
+				<span class="block font-semibold"> Instructions (System Prompt) </span>
 				{#if dynamicPrompt && templateVariables.length}
 					<div class="relative">
 						<button
@@ -549,6 +553,16 @@
 					</div>
 				{/if}
 			</div>
+			<label class="pb-2 text-sm has-[:checked]:font-semibold">
+				<input type="checkbox" name="dynamicPrompt" bind:checked={dynamicPrompt} />
+				Dynamic Prompt
+				<p class="mb-2 text-xs font-normal text-gray-500">
+					Allow the use of template variables {"{{url=https://example.com/path}}"}
+					to insert dynamic content into your prompt by making GET requests to specified URLs on each
+					inference.
+				</p>
+			</label>
+
 			<div class="relative mb-20 flex h-full flex-col gap-2">
 				<textarea
 					name="preprompt"

src/lib/components/AssistantToolPicker.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import type { ToolLogoColor, ToolLogoIcon } from "$lib/types/Tool";
+	import { debounce } from "$lib/utils/debounce";
+	import { onMount } from "svelte";
+	import ToolLogo from "./ToolLogo.svelte";
+
+	import CarbonClose from "~icons/carbon/close";
+
+	interface ToolSuggestion {
+		_id: string;
+		displayName: string;
+		createdByName: string;
+		color: ToolLogoColor;
+		icon: ToolLogoIcon;
+	}
+
+	export let toolIds: string[] = [];
+
+	let selectedValues: ToolSuggestion[] = [];
+
+	onMount(async () => {
+		selectedValues = await Promise.all(
+			toolIds.map(async (id) => await fetch(`${base}/api/tools/${id}`).then((res) => res.json()))
+		);
+
+		await fetchSuggestions("");
+	});
+
+	let inputValue = "";
+	let maxValues = 3;
+
+	let suggestions: ToolSuggestion[] = [];
+
+	async function fetchSuggestions(query: string) {
+		suggestions = (await fetch(`${base}/api/tools/search?q=${query}`).then((res) =>
+			res.json()
+		)) satisfies ToolSuggestion[];
+	}
+
+	const debouncedFetch = debounce((query: string) => fetchSuggestions(query), 300);
+
+	function addValue(value: ToolSuggestion) {
+		if (selectedValues.length < maxValues && !selectedValues.includes(value)) {
+			selectedValues = [...selectedValues, value];
+			toolIds = [...toolIds, value._id];
+			inputValue = "";
+			suggestions = [];
+		}
+	}
+
+	function removeValue(id: ToolSuggestion["_id"]) {
+		selectedValues = selectedValues.filter((v) => v._id !== id);
+		toolIds = selectedValues.map((value) => value._id);
+	}
+</script>
+
+{#if selectedValues.length > 0}
+	<div class="flex flex-wrap items-center justify-center gap-2">
+		{#each selectedValues as value}
+			<div
+				class="flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
+			>
+				<ToolLogo color={value.color} icon={value.icon} size="sm" />
+				<div class="flex flex-col items-center justify-center py-1">
+					<a
+						href={`${base}/tools/${value._id}`}
+						target="_blank"
+						class="line-clamp-1 truncate font-semibold text-blue-600 hover:underline"
+						>{value.displayName}</a
+					>
+					{#if value.createdByName}
+						<p class="text-center text-xs text-gray-500">
+							Created by
+							<a class="underline" href="{base}/tools?user={value.createdByName}" target="_blank"
+								>{value.createdByName}</a
+							>
+						</p>
+					{:else}
+						<p class="text-center text-xs text-gray-500">Official HuggingChat tool</p>
+					{/if}
+				</div>
+				<button
+					on:click|stopPropagation|preventDefault={() => removeValue(value._id)}
+					class="text-lg text-gray-600"
+				>
+					<CarbonClose />
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+{#if selectedValues.length < maxValues}
+	<div class="group relative block">
+		<input
+			type="text"
+			bind:value={inputValue}
+			on:input={(ev) => {
+				inputValue = ev.currentTarget.value;
+				debouncedFetch(inputValue);
+			}}
+			disabled={selectedValues.length >= maxValues}
+			class="w-full rounded border border-gray-200 bg-gray-100 px-3 py-2"
+			class:opacity-50={selectedValues.length >= maxValues}
+			class:bg-gray-100={selectedValues.length >= maxValues}
+			placeholder="Type to search tools..."
+		/>
+		{#if suggestions.length > 0}
+			<div
+				class="invisible absolute z-10 mt-1 w-full rounded border border-gray-300 bg-white shadow-lg group-focus-within:visible"
+			>
+				{#each suggestions as suggestion}
+					<button
+						on:click|stopPropagation|preventDefault={() => addValue(suggestion)}
+						class="w-full cursor-pointer px-3 py-2 text-left hover:bg-blue-500 hover:text-white"
+					>
+						{suggestion.displayName}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/components/ToolBadge.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ToolLogo from "./ToolLogo.svelte";
+	import { base } from "$app/paths";
+	import { browser } from "$app/environment";
+
+	export let toolId: string;
+</script>
+
+<div
+	class="relative flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
+>
+	{#if browser}
+		{#await fetch(`${base}/api/tools/${toolId}`).then((res) => res.json()) then value}
+			<ToolLogo color={value.color} icon={value.icon} size="sm" />
+			<div class="flex flex-col items-center justify-center py-1">
+				<a
+					href={`${base}/tools/${value._id}`}
+					target="_blank"
+					class="line-clamp-1 truncate font-semibold text-blue-600 hover:underline"
+					>{value.displayName}</a
+				>
+				{#if value.createdByName}
+					<p class="text-center text-xs text-gray-500">
+						Created by
+						<a class="underline" href="{base}/tools?user={value.createdByName}" target="_blank"
+							>{value.createdByName}</a
+						>
+					</p>
+				{:else}
+					<p class="text-center text-xs text-gray-500">Official HuggingChat tool</p>
+				{/if}
+			</div>
+		{/await}
+	{/if}
+</div>

src/lib/components/ToolLogo.svelte

@@ -13,7 +13,7 @@
 
 	export let color: string;
 	export let icon: string;
-	export let size: "md" | "lg" = "md";
+	export let size: "sm" | "md" | "lg" = "md";
 
 	$: gradientColor = (() => {
 		switch (color) {
@@ -72,6 +72,8 @@
 
 	$: sizeClass = (() => {
 		switch (size) {
+			case "sm":
+				return "size-8";
 			case "md":
 				return "size-14";
 			case "lg":

src/lib/components/chat/AssistantIntroduction.svelte

@@ -12,6 +12,7 @@
 	import CarbonCheckmark from "~icons/carbon/checkmark";
 	import CarbonRenew from "~icons/carbon/renew";
 	import CarbonUserMultiple from "~icons/carbon/user-multiple";
+	import CarbonTools from "~icons/carbon/tools";
 
 	import { share } from "$lib/utils/share";
 	import { env as envPublic } from "$env/dynamic/public";
@@ -30,6 +31,7 @@
 		| "_id"
 		| "description"
 		| "userCount"
+		| "tools"
 	>;
 
 	const dispatch = createEventDispatcher<{ message: string }>();
@@ -83,6 +85,15 @@
 					</p>
 				{/if}
 
+				{#if assistant?.tools?.length}
+					<div
+						class="flex h-5 w-fit items-center gap-1 rounded-full bg-purple-500/10 pl-1 pr-2 text-xs"
+						title="This assistant uses the websearch."
+					>
+						<CarbonTools class="text-sm text-purple-600" />
+						Has tools
+					</div>
+				{/if}
 				{#if hasRag}
 					<div
 						class="flex h-5 w-fit items-center gap-1 rounded-full bg-blue-500/10 pl-1 pr-2 text-xs"

src/lib/server/models.ts

@@ -110,7 +110,6 @@ async function getChatPromptRender(
 			];
 		}
 
-		logger.info({ formattedMessages });
 		if (toolResults?.length) {
 			// todo: should update the command r+ tokenizer to support system messages at any location
 			// or use the `rag` mode without the citations

src/lib/server/textGeneration/assistant.ts

@@ -31,9 +31,9 @@ export async function processPreprompt(preprompt: string) {
 
 export async function getAssistantById(id?: ObjectId) {
 	return collections.assistants
-		.findOne<Pick<Assistant, "rag" | "dynamicPrompt" | "generateSettings">>(
+		.findOne<Pick<Assistant, "rag" | "dynamicPrompt" | "generateSettings" | "tools">>(
 			{ _id: id },
-			{ projection: { rag: 1, dynamicPrompt: 1, generateSettings: 1 } }
+			{ projection: { rag: 1, dynamicPrompt: 1, generateSettings: 1, tools: 1 } }
 		)
 		.then((a) => a ?? undefined);
 }

src/lib/server/textGeneration/index.ts

@@ -8,7 +8,7 @@ import {
 	getAssistantById,
 	processPreprompt,
 } from "./assistant";
-import { filterToolsOnPreferences, runTools } from "./tools";
+import { getTools, runTools } from "./tools";
 import type { WebSearch } from "$lib/types/WebSearch";
 import {
 	type MessageUpdate,
@@ -77,8 +77,8 @@ async function* textGenerationWithoutTitle(
 
 	let toolResults: ToolResult[] = [];
 
-	if (model.tools && !conv.assistantId) {
-		const tools = await filterToolsOnPreferences(toolsPreference, Boolean(assistant));
+	if (model.tools) {
+		const tools = await getTools(toolsPreference, ctx.assistant);
 		const toolCallsRequired = tools.some((tool) => !toolHasName("directly_answer", tool));
 		if (toolCallsRequired) toolResults = yield* runTools(ctx, tools, preprompt);
 	}

src/lib/server/textGeneration/tools.ts

@@ -20,27 +20,36 @@ import { stringifyError } from "$lib/utils/stringifyError";
 import { collections } from "../database";
 import { ObjectId } from "mongodb";
 import type { Message } from "$lib/types/Message";
+import type { Assistant } from "$lib/types/Assistant";
 
-export async function filterToolsOnPreferences(
+export async function getTools(
 	toolsPreference: Array<string>,
-	isAssistant: boolean
+	assistant: Pick<Assistant, "tools"> | undefined
 ): Promise<Tool[]> {
-	// if it's an assistant, only support websearch for now
-	if (isAssistant) return [directlyAnswer, websearch];
+	let preferences = toolsPreference;
+
+	if (assistant) {
+		if (assistant?.tools?.length) {
+			preferences = assistant.tools;
+		} else {
+			return [directlyAnswer, websearch];
+		}
+	}
 
 	// filter based on tool preferences, add the tools that are on by default
 	const activeConfigTools = toolFromConfigs.filter((el) => {
-		if (el.isLocked && el.isOnByDefault) return true;
-		return toolsPreference?.includes(el._id.toString()) ?? el.isOnByDefault;
+		if (el.isLocked && el.isOnByDefault && !assistant) return true;
+		return preferences?.includes(el._id.toString()) ?? (el.isOnByDefault && !assistant);
 	});
 
-	// find tool where the id is in toolsPreference
+	// find tool where the id is in preferences
 	const activeCommunityTools = await collections.tools
 		.find({
-			_id: { $in: toolsPreference.map((el) => new ObjectId(el)) },
+			_id: { $in: preferences.map((el) => new ObjectId(el)) },
 		})
 		.toArray()
 		.then((el) => el.map((el) => ({ ...el, call: getCallMethod(el) })));
+
 	return [...activeConfigTools, ...activeCommunityTools];
 }
 

src/lib/server/textGeneration/types.ts

@@ -9,7 +9,7 @@ export interface TextGenerationContext {
 	endpoint: Endpoint;
 	conv: Conversation;
 	messages: Message[];
-	assistant?: Pick<Assistant, "rag" | "dynamicPrompt" | "generateSettings">;
+	assistant?: Pick<Assistant, "rag" | "dynamicPrompt" | "generateSettings" | "tools">;
 	isContinue: boolean;
 	webSearch: boolean;
 	toolsPreference: Array<string>;

src/lib/types/Assistant.ts

@@ -28,6 +28,7 @@ export interface Assistant extends Timestamps {
 	dynamicPrompt?: boolean;
 	searchTokens: string[];
 	last24HoursCount: number;
+	tools?: string[];
 }
 
 // eslint-disable-next-line no-shadow

src/routes/api/tools/[toolId]/+server.ts

@@ -0,0 +1,49 @@
+import { collections } from "$lib/server/database.js";
+import { toolFromConfigs } from "$lib/server/tools/index.js";
+import type { CommunityToolDB } from "$lib/types/Tool.js";
+import { ObjectId } from "mongodb";
+
+export async function GET({ params, locals }) {
+	// XXX: feature_flag_tools
+	if (!locals.user?.isEarlyAccess) {
+		return new Response("Not early access", { status: 403 });
+	}
+
+	const toolId = params.toolId;
+
+	try {
+		const configTool = toolFromConfigs.find((el) => el._id.toString() === toolId);
+		if (configTool) {
+			return Response.json({
+				_id: toolId,
+				displayName: configTool.displayName,
+				color: configTool.color,
+				icon: configTool.icon,
+				createdByName: undefined,
+			});
+		} else {
+			// try community tools
+			const tool = await collections.tools
+				.findOne<CommunityToolDB>({ _id: new ObjectId(toolId) })
+				.then((tool) =>
+					tool
+						? {
+								_id: tool._id.toString(),
+								displayName: tool.displayName,
+								color: tool.color,
+								icon: tool.icon,
+								createdByName: tool.createdByName,
+						  }
+						: undefined
+				);
+
+			if (!tool) {
+				return new Response(`Tool "${toolId}" not found`, { status: 404 });
+			}
+
+			return Response.json(tool);
+		}
+	} catch (e) {
+		return new Response(`Tool "${toolId}" not found`, { status: 404 });
+	}
+}

src/routes/api/tools/search/+server.ts

@@ -0,0 +1,57 @@
+import { collections } from "$lib/server/database.js";
+import { toolFromConfigs } from "$lib/server/tools/index.js";
+import type { BaseTool, CommunityToolDB } from "$lib/types/Tool.js";
+import { generateQueryTokens, generateSearchTokens } from "$lib/utils/searchTokens.js";
+import type { Filter } from "mongodb";
+
+export async function GET({ url, locals }) {
+	// XXX: feature_flag_tools
+	if (!locals.user?.isEarlyAccess) {
+		return new Response("Not early access", { status: 403 });
+	}
+
+	const query = url.searchParams.get("q")?.trim() ?? null;
+	const queryTokens = !!query && generateQueryTokens(query);
+
+	const filter: Filter<CommunityToolDB> = {
+		...(queryTokens && { searchTokens: { $all: queryTokens } }),
+		featured: true,
+	};
+
+	const matchingCommunityTools = await collections.tools
+		.find(filter)
+		.project<Pick<BaseTool, "_id" | "displayName" | "color" | "icon">>({
+			_id: 1,
+			displayName: 1,
+			color: 1,
+			icon: 1,
+			createdByName: 1,
+		})
+		.sort({ useCount: -1 })
+		.limit(5)
+		.toArray();
+
+	const matchingConfigTools = toolFromConfigs
+		.filter((tool) => !tool?.isHidden)
+		.filter((tool) => {
+			if (queryTokens) {
+				return generateSearchTokens(tool.displayName).some((token) =>
+					queryTokens.some((queryToken) => queryToken.test(token))
+				);
+			}
+			return true;
+		})
+		.map((tool) => ({
+			_id: tool._id,
+			displayName: tool.displayName,
+			color: tool.color,
+			icon: tool.icon,
+			createdByName: undefined,
+		}));
+
+	const tools = [...matchingConfigTools, ...matchingCommunityTools] satisfies Array<
+		Pick<BaseTool, "_id" | "displayName" | "color" | "icon"> & { createdByName?: string }
+	>;
+
+	return Response.json(tools.map((tool) => ({ ...tool, _id: tool._id.toString() })).slice(0, 5));
+}

src/routes/assistants/+page.svelte

@@ -15,6 +15,8 @@
 	import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
 	import CarbonUserMultiple from "~icons/carbon/user-multiple";
 	import CarbonSearch from "~icons/carbon/search";
+	import CarbonTools from "~icons/carbon/tools";
+
 	import Pagination from "$lib/components/Pagination.svelte";
 	import { formatUserCount } from "$lib/utils/formatUserCount";
 	import { getHref } from "$lib/utils/getHref";
@@ -246,14 +248,24 @@
 						</div>
 					{/if}
 
-					{#if hasRag}
-						<div
-							class="absolute left-3 top-3 grid size-5 place-items-center rounded-full bg-blue-500/10"
-							title="This assistant uses the websearch."
-						>
-							<IconInternet classNames="text-sm text-blue-600" />
-						</div>
-					{/if}
+					<div class="absolute left-3 top-3 flex items-center gap-1 text-xs text-gray-400">
+						{#if assistant.tools?.length}
+							<div
+								class="grid size-5 place-items-center rounded-full bg-purple-500/10"
+								title="This assistant uses the websearch."
+							>
+								<CarbonTools class="text-xs text-purple-600" />
+							</div>
+						{/if}
+						{#if hasRag}
+							<div
+								class="grid size-5 place-items-center rounded-full bg-blue-500/10"
+								title="This assistant uses the websearch."
+							>
+								<IconInternet classNames="text-sm text-blue-600" />
+							</div>
+						{/if}
+					</div>
 
 					{#if assistant.avatar}
 						<img

src/routes/conversation/[id]/+server.ts

@@ -422,6 +422,7 @@ export async function POST({ request, locals, params, getClientAddress }) {
 
 			let hasError = false;
 			const initialMessageContent = messageToWriteTo.content;
+
 			try {
 				const ctx: TextGenerationContext = {
 					model,

src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

@@ -12,9 +12,11 @@
 	import CarbonFlag from "~icons/carbon/flag";
 	import CarbonLink from "~icons/carbon/link";
 	import CarbonStar from "~icons/carbon/star";
+	import CarbonTools from "~icons/carbon/tools";
 	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
 	import ReportModal from "./ReportModal.svelte";
 	import IconInternet from "$lib/components/icons/IconInternet.svelte";
+	import ToolBadge from "$lib/components/ToolBadge.svelte";
 
 	export let data: PageData;
 
@@ -214,6 +216,27 @@
 			{/if}
 		</div>
 
+		{#if assistant?.tools?.length}
+			<div class="mt-4">
+				<div class="mb-1 flex items-center gap-1">
+					<span
+						class="inline-grid size-5 place-items-center rounded-full bg-purple-500/10"
+						title="This assistant uses the websearch."
+					>
+						<CarbonTools class="text-xs text-purple-600" />
+					</span>
+					<h2 class="font-semibold">Tools</h2>
+				</div>
+				<p class="w-full text-sm text-gray-500">
+					This Assistant has access to the following tools:
+				</p>
+				<ul class="mr-2 mt-2 flex flex-wrap gap-2.5 text-sm text-gray-800">
+					{#each assistant.tools as tool}
+						<ToolBadge toolId={tool} />
+					{/each}
+				</ul>
+			</div>
+		{/if}
 		{#if hasRag}
 			<div class="mt-4">
 				<div class="mb-1 flex items-center gap-1">

src/routes/settings/(nav)/assistants/[assistantId]/edit/+page.server.ts

@@ -10,6 +10,7 @@ import { sha256 } from "$lib/utils/sha256";
 import sharp from "sharp";
 import { parseStringToList } from "$lib/utils/parseStringToList";
 import { generateSearchTokens } from "$lib/utils/searchTokens";
+import { toolFromConfigs } from "$lib/server/tools";
 
 const newAsssistantSchema = z.object({
 	name: z.string().min(1),
@@ -39,6 +40,21 @@ const newAsssistantSchema = z.object({
 	top_k: z
 		.union([z.literal(""), z.coerce.number().min(5).max(100)])
 		.transform((v) => (v === "" ? undefined : v)),
+	tools: z
+		.string()
+		.optional()
+		.transform((v) => (v ? v.split(",") : []))
+		.transform(async (v) => [
+			...(await collections.tools
+				.find({ _id: { $in: v.map((toolId) => new ObjectId(toolId)) } })
+				.project({ _id: 1 })
+				.toArray()
+				.then((tools) => tools.map((tool) => tool._id.toString()))),
+			...toolFromConfigs
+				.filter((el) => (v ?? []).includes(el._id.toString()))
+				.map((el) => el._id.toString()),
+		])
+		.optional(),
 });
 
 const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
@@ -74,7 +90,7 @@ export const actions: Actions = {
 
 		const formData = Object.fromEntries(await request.formData());
 
-		const parse = newAsssistantSchema.safeParse(formData);
+		const parse = await newAsssistantSchema.safeParseAsync(formData);
 
 		if (!parse.success) {
 			// Loop through the errors array and create a custom errors array
@@ -155,6 +171,8 @@ export const actions: Actions = {
 						allowedDomains: parse.data.ragDomainList,
 						allowAllDomains: parse.data.ragAllowAll,
 					},
+					// XXX: feature_flag_tools
+					tools: locals.user?.isEarlyAccess ? parse.data.tools : undefined,
 					dynamicPrompt: parse.data.dynamicPrompt,
 					searchTokens: generateSearchTokens(parse.data.name),
 					generateSettings: {

src/routes/settings/(nav)/assistants/[assistantId]/edit/[email protected]

@@ -6,7 +6,7 @@
 	export let data: PageData;
 	export let form: ActionData;
 
-	$: assistant = data.assistants.find((el) => el._id.toString() === $page.params.assistantId);
+	let assistant = data.assistants.find((el) => el._id.toString() === $page.params.assistantId);
 </script>
 
 <AssistantSettings bind:form {assistant} models={data.models} />

src/routes/settings/(nav)/assistants/new/+page.server.ts

@@ -10,6 +10,7 @@ import sharp from "sharp";
 import { parseStringToList } from "$lib/utils/parseStringToList";
 import { usageLimits } from "$lib/server/usageLimits";
 import { generateSearchTokens } from "$lib/utils/searchTokens";
+import { toolFromConfigs } from "$lib/server/tools";
 
 const newAsssistantSchema = z.object({
 	name: z.string().min(1),
@@ -39,6 +40,21 @@ const newAsssistantSchema = z.object({
 	top_k: z
 		.union([z.literal(""), z.coerce.number().min(5).max(100)])
 		.transform((v) => (v === "" ? undefined : v)),
+	tools: z
+		.string()
+		.optional()
+		.transform((v) => (v ? v.split(",") : []))
+		.transform(async (v) => [
+			...(await collections.tools
+				.find({ _id: { $in: v.map((toolId) => new ObjectId(toolId)) } })
+				.project({ _id: 1 })
+				.toArray()
+				.then((tools) => tools.map((tool) => tool._id.toString()))),
+			...toolFromConfigs
+				.filter((el) => (v ?? []).includes(el._id.toString()))
+				.map((el) => el._id.toString()),
+		])
+		.optional(),
 });
 
 const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
@@ -62,7 +78,7 @@ export const actions: Actions = {
 	default: async ({ request, locals }) => {
 		const formData = Object.fromEntries(await request.formData());
 
-		const parse = newAsssistantSchema.safeParse(formData);
+		const parse = await newAsssistantSchema.safeParseAsync(formData);
 
 		if (!parse.success) {
 			// Loop through the errors array and create a custom errors array
@@ -126,6 +142,8 @@ export const actions: Actions = {
 			createdById,
 			createdByName: locals.user?.username ?? locals.user?.name,
 			...parse.data,
+			// XXX: feature_flag_tools
+			tools: locals.user?.isEarlyAccess ? parse.data.tools : undefined,
 			exampleInputs,
 			avatar: hash,
 			createdAt: new Date(),