Store preprompt in conversation (#422) (#470)

* Store preprompt in conversation (#422)

* display preprompt at the top

* system prompt modal

* tweaks

---------

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

src/lib/components/SystemPromptModal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonBlockchain from "~icons/carbon/blockchain";
+
+	export let preprompt: string;
+
+	let isOpen = false;
+</script>
+
+<button
+	type="button"
+	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+	on:click={() => (isOpen = !isOpen)}
+	on:keypress={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+>
+	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
+</button>
+
+{#if isOpen}
+	<Modal on:close={() => (isOpen = false)} width="w-full max-w-2xl">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+				<h2>System Prompt</h2>
+				<button type="button" class="group" on:click={() => (isOpen = false)}>
+					<CarbonClose class="mt-auto text-gray-900 group-hover:text-gray-500" />
+				</button>
+			</div>
+			<textarea
+				disabled
+				value={preprompt}
+				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 max-sm:text-sm"
+			/>
+		</div>
+	</Modal>
+{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -10,6 +10,7 @@
 	import ChatMessage from "./ChatMessage.svelte";
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import { browser } from "$app/environment";
+	import SystemPromptModal from "../SystemPromptModal.svelte";
 
 	export let messages: Message[];
 	export let loading: boolean;
@@ -18,6 +19,7 @@
 	export let currentModel: Model;
 	export let settings: LayoutData["settings"];
 	export let models: Model[];
+	export let preprompt: string | undefined;
 	export let readOnly: boolean;
 
 	let chatContainer: HTMLElement;
@@ -42,6 +44,9 @@
 >
 	<div class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
 		{#each messages as message, i}
+			{#if i === 0 && preprompt}
+				<SystemPromptModal {preprompt} />
+			{/if}
 			<ChatMessage
 				loading={loading && i === messages.length - 1}
 				{message}

src/lib/components/chat/ChatWindow.svelte

@@ -24,6 +24,7 @@
 	export let models: Model[];
 	export let settings: LayoutData["settings"];
 	export let webSearchMessages: WebSearchUpdate[] = [];
+	export let preprompt: string | undefined = undefined;
 
 	export let loginRequired = false;
 	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
@@ -59,6 +60,7 @@
 		readOnly={isReadOnly}
 		isAuthor={!shared}
 		{webSearchMessages}
+		{preprompt}
 		on:message
 		on:vote
 		on:retry={(ev) => {

src/lib/types/Conversation.ts

@@ -17,4 +17,6 @@ export interface Conversation extends Timestamps {
 	meta?: {
 		fromShareId?: string;
 	};
+
+	preprompt?: string;
 }

src/lib/types/SharedConversation.ts

@@ -9,4 +9,5 @@ export interface SharedConversation extends Timestamps {
 	model: string;
 	title: string;
 	messages: Message[];
+	preprompt?: string;
 }

src/routes/+page.svelte

@@ -17,7 +17,10 @@
 				headers: {
 					"Content-Type": "application/json",
 				},
-				body: JSON.stringify({ model: data.settings.activeModel }),
+				body: JSON.stringify({
+					model: data.settings.activeModel,
+					preprompt: data.settings.customPrompts[data.settings.activeModel],
+				}),
 			});
 
 			if (!res.ok) {

src/routes/conversation/+server.ts

@@ -18,9 +18,12 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		.object({
 			fromShare: z.string().optional(),
 			model: validateModel(models),
+			preprompt: z.string().optional(),
 		})
 		.parse(JSON.parse(body));
 
+	let preprompt = values.preprompt;
+
 	if (values.fromShare) {
 		const conversation = await collections.sharedConversations.findOne({
 			_id: values.fromShare,
@@ -33,8 +36,11 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		title = conversation.title;
 		messages = conversation.messages;
 		values.model = conversation.model;
+		preprompt = conversation.preprompt;
 	}
 
+	const model = models.find((m) => m.name === values.model);
+
 	const res = await collections.conversations.insertOne({
 		_id: new ObjectId(),
 		title:
@@ -42,6 +48,7 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 			"Untitled " + ((await collections.conversations.countDocuments(authCondition(locals))) + 1),
 		messages,
 		model: values.model,
+		preprompt: preprompt === model?.preprompt ? undefined : preprompt,
 		createdAt: new Date(),
 		updatedAt: new Date(),
 		...(locals.user ? { userId: locals.user._id } : { sessionId: locals.sessionId }),

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

@@ -33,5 +33,6 @@ export const load = async ({ params, depends, locals }) => {
 		messages: conversation.messages,
 		title: conversation.title,
 		model: conversation.model,
+		preprompt: conversation.preprompt,
 	};
 };

src/routes/conversation/[id]/+page.svelte

@@ -218,6 +218,7 @@
 	{loading}
 	{pending}
 	{messages}
+	preprompt={data.preprompt}
 	bind:webSearchMessages
 	on:message={(event) => writeMessage(event.detail)}
 	on:retry={(event) => writeMessage(event.detail.content, event.detail.id)}

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

@@ -70,7 +70,6 @@ export async function POST({ request, fetch, locals, params, getClientAddress })
 
 	// fetch the model
 	const model = models.find((m) => m.id === conv.model);
-	const settings = await collections.settings.findOne(authCondition(locals));
 
 	if (!model) {
 		throw error(410, "Model not available anymore");
@@ -155,7 +154,7 @@ export async function POST({ request, fetch, locals, params, getClientAddress })
 				messages,
 				model,
 				webSearch: webSearchResults,
-				preprompt: settings?.customPrompts?.[model.id] ?? model.preprompt,
+				preprompt: conv.preprompt ?? model.preprompt,
 				locals: locals,
 			});
 

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

@@ -39,6 +39,7 @@ export async function POST({ params, url, locals }) {
 		updatedAt: new Date(),
 		title: conversation.title,
 		model: conversation.model,
+		preprompt: conversation.preprompt,
 	};
 
 	await collections.sharedConversations.insertOne(shared);

src/routes/r/[id]/+page.server.ts

@@ -12,6 +12,7 @@ export const load: PageServerLoad = async ({ params }) => {
 	}
 
 	return {
+		preprompt: conversation.preprompt,
 		messages: conversation.messages,
 		title: conversation.title,
 		model: conversation.model,

src/routes/r/[id]/+page.svelte

@@ -60,6 +60,7 @@
 	{loading}
 	shared={true}
 	messages={data.messages}
+	preprompt={data.preprompt}
 	on:message={(ev) =>
 		createConversation()
 			.then((convId) => {