persistant custom instruction

Author: KartikGS

src/lib/stores/settings.ts

@@ -15,6 +15,7 @@ type SettingsStore = {
 	customPrompts: Record<string, string>;
 	recentlySaved: boolean;
 	assistants: Array<ObjectId | string>;
+	customInstruction: string;
 };
 
 export function useSettingsStore() {

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

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

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,34 @@
+<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,8 @@
+import { base } from "$app/paths";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent, params }) {
+	const data = await parent();
+
+	return data;
+}