Feat/custom instruction

src/lib/stores/settings.ts

@@ -15,6 +15,7 @@ type SettingsStore = {
 	customPrompts: Record<string, string>;
 	recentlySaved: boolean;
 	assistants: Array<ObjectId | string>;
+	customInstruction: string;
 };
 
 type SettingsStoreWritable = Writable<SettingsStore> & {

src/lib/types/Settings.ts

@@ -21,6 +21,8 @@ export interface Settings extends Timestamps {
 	customPrompts?: Record<string, string>;
 
 	assistants?: Assistant["_id"][];
+
+	customInstruction?: string;
 }
 
 // TODO: move this to a constant file along with other constants
@@ -30,4 +32,5 @@ export const DEFAULT_SETTINGS = {
 	hideEmojiOnSidebar: false,
 	customPrompts: {},
 	assistants: [],
+	customInstruction: "",
 };

src/routes/+layout.server.ts

@@ -151,6 +151,7 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
 			customPrompts: settings?.customPrompts ?? {},
 			assistants: userAssistants,
+			customInstruction: settings?.customInstruction ?? "",
 		},
 		models: models.map((model) => ({
 			id: model.id,

src/routes/+page.svelte

@@ -34,14 +34,17 @@
 					model = data.models[0].id;
 				}
 			}
+			let customPreprompt = $settings.customPrompts[$settings.activeModel]
+				? $settings.customInstruction + "\n" + $settings.customPrompts[$settings.activeModel]
+				: undefined;
 			const res = await fetch(`${base}/conversation`, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",
 				},
 				body: JSON.stringify({
 					model,
-					preprompt: $settings.customPrompts[$settings.activeModel],
+					preprompt: customPreprompt,
 					assistantId: data.assistant?._id,
 				}),
 			});

src/routes/settings/+layout.svelte

@@ -10,6 +10,7 @@
 	import CarbonCheckmark from "~icons/carbon/checkmark";
 	import CarbonAdd from "~icons/carbon/add";
 
+	import LicenseIcon from "~icons/carbon/license";
 	import UserIcon from "~icons/carbon/user";
 	import { fade, fly } from "svelte/transition";
 	export let data;
@@ -76,6 +77,14 @@
 					{/if}
 				</a>
 			{/each}
+			<a
+				href="{base}/settings/custom"
+				class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
+			{$page.url.pathname === `${base}/settings/custom` ? '!bg-gray-100 !text-gray-800' : ''}"
+			>
+				<LicenseIcon />
+				<div class="truncate">Custom Instructions</div>
+			</a>
 			<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
 			{#if data.enableAssistants}
 				<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">

src/routes/settings/+server.ts

@@ -15,6 +15,7 @@ export async function POST({ request, locals }) {
 			ethicsModalAccepted: z.boolean().optional(),
 			activeModel: z.string().default(DEFAULT_SETTINGS.activeModel),
 			customPrompts: z.record(z.string()).default({}),
+			customInstruction: z.string().default(""),
 		})
 		.parse(body);
 

src/routes/settings/custom/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useSettingsStore } from "$lib/stores/settings";
+
+	const settings = useSettingsStore();
+
+	$: if ($settings.customInstruction === undefined) {
+		$settings.customInstruction = "";
+	}
+
+	$: hasCustomInstruction = $settings.customInstruction !== "";
+</script>
+
+<div class="flex flex-col items-start">
+	<div class="flex w-full flex-col gap-2">
+		<div class="flex w-full flex-row content-between">
+			<h3 class="mb-1.5 text-lg font-semibold text-gray-800">Custom Instructions</h3>
+			{#if hasCustomInstruction}
+				<button
+					class="ml-auto underline decoration-gray-300 hover:decoration-gray-700"
+					on:click|stopPropagation={() => ($settings.customInstruction = "")}
+				>
+					Reset
+				</button>
+			{/if}
+		</div>
+		<textarea
+			rows="10"
+			class="w-full resize-none rounded-md border-2 bg-gray-100 p-2"
+			bind:value={$settings.customInstruction}
+		/>
+	</div>
+</div>

src/routes/settings/custom/+page.ts

@@ -0,0 +1,5 @@
+export async function load({ parent }) {
+	const data = await parent();
+
+	return data;
+}