Dynamic system instructions (#949)

* Dynamic system instructions

* disable tag rendering if the feature is disabled

* make time & date tags bold

* fix bug enabling dynamic prompt on assistant creation

* Move fetching at prompt building time

* get rid of date & time tags

* use `url=` for tags

* add env flag check

* Add more detailed errors in prompt

* wording

* token counter

* modal update

* wording

* hide disabled if dynamic prompt is enabled

* add template variables parsing

* regex update

* same regex

* regex again

* sys prompt max height

* rm unused

* Always use absolute URL in links

* trying something

* Revert "trying something"

This reverts commit e30ab33f801fad31cbcaa7b89c47c79d4aca86a6.

* wording

* remove debug log

* last wording tweak

---------

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/AssistantSettings.svelte

@@ -12,6 +12,7 @@
 
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+	import IconInternet from "./icons/IconInternet.svelte";
 	import TokensCounter from "./TokensCounter.svelte";
 
 	type ActionData = {
@@ -33,6 +34,7 @@
 	let modelId =
 		assistant?.modelId ?? models.find((_model) => _model.id === $settings.activeModel)?.name;
 	let systemPrompt = assistant?.preprompt ?? "";
+	let dynamicPrompt = assistant?.dynamicPrompt ?? false;
 
 	let compress: typeof readAndCompressImage | null = null;
 
@@ -84,6 +86,9 @@
 		: (assistant?.rag?.allowedDomains?.length ?? 0) > 0
 		? "domains"
 		: false;
+
+	const regex = /{{\s?url=(.+?)\s?}}/g;
+	$: templateVariables = [...systemPrompt.matchAll(regex)].map((match) => match[1]);
 </script>
 
 <form
@@ -142,10 +147,10 @@
 >
 	{#if assistant}
 		<h2 class="text-xl font-semibold">
-			Edit {assistant?.name ?? "assistant"}
+			Edit Assistant: {assistant?.name ?? "assistant"}
 		</h2>
 		<p class="mb-6 text-sm text-gray-500">
-			Modifying an existing assistant will propagate those changes to all users.
+			Modifying an existing assistant will propagate the changes to all users.
 		</p>
 	{:else}
 		<h2 class="text-xl font-semibold">Create new assistant</h2>
@@ -222,7 +227,7 @@
 				<input
 					name="name"
 					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-					placeholder="My awesome model"
+					placeholder="Assistant Name"
 					value={assistant?.name ?? ""}
 				/>
 				<p class="text-xs text-red-500">{getError("name", form)}</p>
@@ -260,41 +265,42 @@
 
 			<label>
 				<div class="mb-1 font-semibold">User start messages</div>
-				<div class="flex flex-col gap-2">
+				<div class="grid gap-1.5 text-sm md:grid-cols-2">
 					<input
 						name="exampleInput1"
+						placeholder="Start Message 1"
 						bind:value={inputMessage1}
 						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
 					/>
-					{#if !!inputMessage1 || !!inputMessage2}
-						<input
-							name="exampleInput2"
-							bind:value={inputMessage2}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-						/>
-					{/if}
-					{#if !!inputMessage2 || !!inputMessage3}
-						<input
-							name="exampleInput3"
-							bind:value={inputMessage3}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-						/>
-					{/if}
-					{#if !!inputMessage3 || !!inputMessage4}
-						<input
-							name="exampleInput4"
-							bind:value={inputMessage4}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
-						/>
-					{/if}
+					<input
+						name="exampleInput2"
+						placeholder="Start Message 2"
+						bind:value={inputMessage2}
+						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+					/>
+
+					<input
+						name="exampleInput3"
+						placeholder="Start Message 3"
+						bind:value={inputMessage3}
+						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+					/>
+					<input
+						name="exampleInput4"
+						placeholder="Start Message 4"
+						bind:value={inputMessage4}
+						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+					/>
 				</div>
 				<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
 			</label>
 			{#if $page.data.enableAssistantsRAG}
 				<div class="mb-4 flex flex-col flex-nowrap">
 					<span class="mt-2 text-smd font-semibold"
-						>Internet access <span
-							class="ml-1 rounded bg-gray-100 px-1 py-0.5 text-xxs font-normal text-gray-600"
+						>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
 						>
 
@@ -316,10 +322,11 @@
 							name="ragMode"
 							value={false}
 						/>
-						<span class="my-2 text-sm" class:font-semibold={!ragMode}> Disabled </span>
+						<span class="my-2 text-sm" class:font-semibold={!ragMode}> Default </span>
 						{#if !ragMode}
 							<span class="block text-xs text-gray-500">
-								Assistant won't look for information from Internet and will be faster to answer.
+								Assistant will not use internet to do information retrieval and will respond faster.
+								Recommended for most Assistants.
 							</span>
 						{/if}
 					</label>
@@ -391,16 +398,52 @@
 						/>
 						<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="col-span-1 flex h-full flex-col">
-			<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
-			<div class="relative mb-20 flex min-h-[8lh] flex-1 grow flex-col">
+			<div class="mb-1 flex justify-between text-sm">
+				<span class="font-semibold"> Instructions (System Prompt) </span>
+				{#if dynamicPrompt && templateVariables.length}
+					<div class="relative">
+						<button
+							type="button"
+							class="peer rounded bg-blue-500/20 px-1 text-xs text-blue-600 focus:bg-blue-500/30 focus:text-blue-800 sm:text-sm"
+						>
+							{templateVariables.length} template variable{templateVariables.length > 1 ? "s" : ""}
+						</button>
+						<div
+							class="invisible absolute right-0 top-6 z-10 rounded-lg border bg-white p-2 text-xs shadow-lg peer-focus:visible hover:visible sm:w-96"
+						>
+							Will performs a GET request and injects the response into the prompt. Works better
+							with plain text, csv or json content.
+							{#each templateVariables as match}
+								<a href={match} target="_blank" class="text-gray-500 underline decoration-gray-300"
+									>{match}</a
+								>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+			<div class="relative mb-20 flex h-full flex-col gap-2">
 				<textarea
 					name="preprompt"
-					class="flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
+					class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
 					placeholder="You'll act as..."
 					bind:value={systemPrompt}
 				/>
@@ -408,35 +451,36 @@
 					{@const model = models.find((_model) => _model.id === modelId)}
 					{#if model?.tokenizer && systemPrompt}
 						<TokensCounter
-							classNames="absolute bottom-2 right-2"
+							classNames="absolute bottom-4 right-4"
 							prompt={systemPrompt}
 							modelTokenizer={model.tokenizer}
 							truncate={model?.parameters?.truncate}
 						/>
 					{/if}
 				{/if}
+
+				<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
 			</div>
-			<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
 		</div>
-	</div>
 
-	<div class="fixed bottom-6 right-6 ml-auto mt-6 flex w-fit justify-end gap-2 sm:absolute">
-		<a
-			href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
-			class="flex items-center justify-center rounded-full bg-gray-200 px-5 py-2 font-semibold text-gray-600"
-		>
-			Cancel
-		</a>
-		<button
-			type="submit"
-			disabled={loading}
-			aria-disabled={loading}
-			class="flex items-center justify-center rounded-full bg-black px-8 py-2 font-semibold"
-			class:bg-gray-200={loading}
-			class:text-gray-600={loading}
-			class:text-white={!loading}
-		>
-			{assistant ? "Save" : "Create"}
-		</button>
+		<div class="fixed bottom-6 right-6 ml-auto mt-6 flex w-fit justify-end gap-2 sm:absolute">
+			<a
+				href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
+				class="flex items-center justify-center rounded-full bg-gray-200 px-5 py-2 font-semibold text-gray-600"
+			>
+				Cancel
+			</a>
+			<button
+				type="submit"
+				disabled={loading}
+				aria-disabled={loading}
+				class="flex items-center justify-center rounded-full bg-black px-8 py-2 font-semibold"
+				class:bg-gray-200={loading}
+				class:text-gray-600={loading}
+				class:text-white={!loading}
+			>
+				{assistant ? "Save" : "Create"}
+			</button>
+		</div>
 	</div>
 </form>

src/lib/components/TokensCounter.svelte

@@ -41,8 +41,20 @@
 
 {#if tokenizer}
 	{#await tokenizeText(prompt) then nTokens}
-		<p class="text-sm opacity-60 hover:opacity-80 {classNames}">
-			{nTokens}{truncate ? `/${truncate}` : ""}
-		</p>
+		{@const exceedLimit = nTokens > (truncate || Infinity)}
+		<div class={classNames}>
+			<p
+				class="peer text-sm {exceedLimit
+					? 'text-red-500 opacity-100'
+					: 'opacity-60 hover:opacity-90'}"
+			>
+				{nTokens}{truncate ? `/${truncate}` : ""}
+			</p>
+			<div
+				class="invisible absolute -top-6 right-0 whitespace-nowrap rounded bg-black px-1 text-sm text-white peer-hover:visible"
+			>
+				Tokens usage
+			</div>
+		</div>
 	{/await}
 {/if}

src/lib/components/chat/AssistantIntroduction.svelte

@@ -10,6 +10,7 @@
 		| "avatar"
 		| "name"
 		| "rag"
+		| "dynamicPrompt"
 		| "modelId"
 		| "createdByName"
 		| "exampleInputs"
@@ -22,7 +23,8 @@
 	$: hasRag =
 		assistant?.rag?.allowAllDomains ||
 		(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
-		(assistant?.rag?.allowedLinks?.length ?? 0) > 0;
+		(assistant?.rag?.allowedLinks?.length ?? 0) > 0 ||
+		assistant?.dynamicPrompt;
 </script>
 
 <div class="flex h-full w-full flex-col content-center items-center justify-center pb-52">

src/lib/types/Assistant.ts

@@ -19,5 +19,6 @@ export interface Assistant extends Timestamps {
 		allowedDomains: string[];
 		allowedLinks: string[];
 	};
+	dynamicPrompt?: boolean;
 	searchTokens: string[];
 }

src/routes/assistants/+page.svelte

@@ -205,7 +205,8 @@
 				{@const hasRag =
 					assistant?.rag?.allowAllDomains ||
 					!!assistant?.rag?.allowedDomains?.length ||
-					!!assistant?.rag?.allowedLinks?.length}
+					!!assistant?.rag?.allowedLinks?.length ||
+					!!assistant?.dynamicPrompt}
 
 				<button
 					class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"

src/routes/conversation/+server.ts

@@ -45,22 +45,11 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		throw error(400, "Invalid model");
 	}
 
-	// get preprompt from assistant if it exists
-	const assistant = await collections.assistants.findOne({
-		_id: new ObjectId(values.assistantId),
-	});
-
-	if (assistant) {
-		values.preprompt = assistant.preprompt;
-	} else {
-		values.preprompt ??= model?.preprompt ?? "";
-	}
-
 	let messages: Message[] = [
 		{
 			id: v4(),
 			from: "system",
-			content: values.preprompt,
+			content: values.preprompt ?? "",
 			createdAt: new Date(),
 			updatedAt: new Date(),
 			children: [],
@@ -95,6 +84,17 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		throw error(400, "Can't start a conversation with an unlisted model");
 	}
 
+	// get preprompt from assistant if it exists
+	const assistant = await collections.assistants.findOne({
+		_id: new ObjectId(values.assistantId),
+	});
+
+	if (assistant) {
+		values.preprompt = assistant.preprompt;
+	} else {
+		values.preprompt ??= model?.preprompt ?? "";
+	}
+
 	const res = await collections.conversations.insertOne({
 		_id: new ObjectId(),
 		title: title || "New Chat",

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

@@ -21,6 +21,7 @@ import { addChildren } from "$lib/utils/tree/addChildren.js";
 import { addSibling } from "$lib/utils/tree/addSibling.js";
 import { preprocessMessages } from "$lib/server/preprocessMessages.js";
 import { usageLimits } from "$lib/server/usageLimits";
+import { isURLLocal } from "$lib/server/isURLLocal.js";
 
 export async function POST({ request, locals, params, getClientAddress }) {
 	const id = z.string().parse(params.id);
@@ -336,21 +337,60 @@ export async function POST({ request, locals, params, getClientAddress }) {
 			);
 
 			// check if assistant has a rag
-			const rag = (
-				await collections.assistants.findOne<Pick<Assistant, "rag">>(
-					{ _id: conv.assistantId },
-					{ projection: { rag: 1 } }
-				)
-			)?.rag;
+			const assistant = await collections.assistants.findOne<
+				Pick<Assistant, "rag" | "dynamicPrompt">
+			>({ _id: conv.assistantId }, { projection: { rag: 1, dynamicPrompt: 1 } });
 
 			const assistantHasRAG =
 				ENABLE_ASSISTANTS_RAG === "true" &&
-				rag &&
-				(rag.allowedLinks.length > 0 || rag.allowedDomains.length > 0 || rag.allowAllDomains);
+				assistant &&
+				((assistant.rag &&
+					(assistant.rag.allowedLinks.length > 0 ||
+						assistant.rag.allowedDomains.length > 0 ||
+						assistant.rag.allowAllDomains)) ||
+					assistant.dynamicPrompt);
 
 			// perform websearch if needed
-			if (!isContinue && ((webSearch && !conv.assistantId) || assistantHasRAG)) {
-				messageToWriteTo.webSearch = await runWebSearch(conv, messagesForPrompt, update, rag);
+			if (
+				!isContinue &&
+				((webSearch && !conv.assistantId) || (assistantHasRAG && !assistant.dynamicPrompt))
+			) {
+				messageToWriteTo.webSearch = await runWebSearch(
+					conv,
+					messagesForPrompt,
+					update,
+					assistant?.rag
+				);
+			}
+
+			let preprompt = conv.preprompt;
+
+			if (assistant?.dynamicPrompt && preprompt && ENABLE_ASSISTANTS_RAG === "true") {
+				// process the preprompt
+				const urlRegex = /{{\s?url=(.*?)\s?}}/g;
+				let match;
+				while ((match = urlRegex.exec(preprompt)) !== null) {
+					try {
+						const url = new URL(match[1]);
+						if (await isURLLocal(url)) {
+							throw new Error("URL couldn't be fetched, it resolved to a local address.");
+						}
+
+						const res = await fetch(url.href);
+
+						if (!res.ok) {
+							throw new Error("URL couldn't be fetched, error " + res.status);
+						}
+						const text = await res.text();
+						preprompt = preprompt.replaceAll(match[0], text);
+					} catch (e) {
+						preprompt = preprompt.replaceAll(match[0], (e as Error).message);
+					}
+				}
+
+				if (messagesForPrompt[0].from === "system") {
+					messagesForPrompt[0].content = preprompt;
+				}
 			}
 
 			// inject websearch result & optionally images into the messages
@@ -367,7 +407,7 @@ export async function POST({ request, locals, params, getClientAddress }) {
 				const endpoint = await model.getEndpoint();
 				for await (const output of await endpoint({
 					messages: processedMessages,
-					preprompt: conv.preprompt,
+					preprompt,
 					continueMessage: isContinue,
 				})) {
 					// if not generated_text is here it means the generation is not done

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

@@ -32,7 +32,10 @@
 	$: hasRag =
 		assistant?.rag?.allowAllDomains ||
 		!!assistant?.rag?.allowedDomains?.length ||
-		!!assistant?.rag?.allowedLinks?.length;
+		!!assistant?.rag?.allowedLinks?.length ||
+		!!assistant?.dynamicPrompt;
+
+	$: prepromptTags = assistant?.preprompt?.split(/(\{\{[^{}]*\}\})/) ?? [];
 </script>
 
 {#if displayReportModal}
@@ -164,16 +167,42 @@
 
 	<!-- two columns for big screen, single column for small screen -->
 	<div class="mb-12 mt-3">
-		<h2 class="mb-2 font-semibold">System Instructions</h2>
-		<textarea
-			disabled
-			class="box-border h-full min-h-[8lh] w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 disabled:cursor-not-allowed"
-			>{assistant?.preprompt}</textarea
+		<h2 class="mb-2 inline font-semibold">System Instructions</h2>
+		<div
+			id="System Instructions"
+			class="overlow-y-auto mt-2 box-border h-fit max-h-[240px] w-full overflow-y-auto whitespace-pre-line rounded-lg border-2 border-gray-200 bg-gray-100 p-2 disabled:cursor-not-allowed 2xl:max-h-[310px]"
 		>
+			{#if assistant?.dynamicPrompt}
+				{#each prepromptTags as tag}
+					{#if tag.startsWith("{{") && tag.endsWith("}}") && tag.includes("url=")}
+						{@const url = tag.split("url=")[1].split("}}")[0]}
+						<a
+							target="_blank"
+							href={url.startsWith("http") ? url : `//${url}`}
+							class="break-words rounded-lg bg-blue-100 px-1 py-0.5 text-blue-800 hover:underline"
+						>
+							{tag}</a
+						>
+					{:else}
+						{tag}
+					{/if}
+				{/each}
+			{:else}
+				{assistant?.preprompt}
+			{/if}
+		</div>
 
 		{#if hasRag}
 			<div class="mt-4">
-				<h2 class=" font-semibold">Internet Access</h2>
+				<div class="mb-1 flex items-center gap-1">
+					<span
+						class="inline-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" />
+					</span>
+					<h2 class=" font-semibold">Internet Access</h2>
+				</div>
 				{#if assistant?.rag?.allowAllDomains}
 					<p class="text-sm text-gray-500">
 						This Assistant uses Web Search to find information on Internet.
@@ -203,6 +232,11 @@
 						{/each}
 					</ul>
 				{/if}
+				{#if assistant?.dynamicPrompt}
+					<p class="text-sm text-gray-500">
+						This Assistant has dynamic prompts enabled and can make requests to external services.
+					</p>
+				{/if}
 			</div>
 		{/if}
 	</div>

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

@@ -24,6 +24,7 @@ const newAsssistantSchema = z.object({
 	ragLinkList: z.preprocess(parseStringToList, z.string().url().array().max(10)),
 	ragDomainList: z.preprocess(parseStringToList, z.string().array()),
 	ragAllowAll: z.preprocess((v) => v === "true", z.boolean()),
+	dynamicPrompt: z.preprocess((v) => v === "on", z.boolean()),
 });
 
 const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
@@ -140,6 +141,7 @@ export const actions: Actions = {
 						allowedDomains: parse.data.ragDomainList,
 						allowAllDomains: parse.data.ragAllowAll,
 					},
+					dynamicPrompt: parse.data.dynamicPrompt,
 					searchTokens: generateSearchTokens(parse.data.name),
 				},
 			}

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

@@ -24,6 +24,7 @@ const newAsssistantSchema = z.object({
 	ragLinkList: z.preprocess(parseStringToList, z.string().url().array().max(10)),
 	ragDomainList: z.preprocess(parseStringToList, z.string().array()),
 	ragAllowAll: z.preprocess((v) => v === "true", z.boolean()),
+	dynamicPrompt: z.preprocess((v) => v === "on", z.boolean()),
 });
 
 const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
@@ -122,6 +123,7 @@ export const actions: Actions = {
 				allowedDomains: parse.data.ragDomainList,
 				allowAllDomains: parse.data.ragAllowAll,
 			},
+			dynamicPrompt: parse.data.dynamicPrompt,
 			searchTokens: generateSearchTokens(parse.data.name),
 		});
 

src/routes/settings/+layout.svelte

@@ -31,7 +31,7 @@
 			}
 			goto(previousPage);
 		}}
-		class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[80dvh] xl:w-[1200px] 2xl:h-[70dvh]"
+		class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
 	>
 		<slot />
 		{#if $settings.recentlySaved}