✨ Ability to download prompt (#176)

src/lib/components/chat/ChatMessage.svelte

@@ -3,10 +3,12 @@
 	import type { Message } from "$lib/types/Message";
 	import { afterUpdate, createEventDispatcher } from "svelte";
 	import { deepestChild } from "$lib/utils/deepestChild";
+	import { page } from "$app/stores";
 
 	import CodeBlock from "../CodeBlock.svelte";
 	import IconLoading from "../icons/IconLoading.svelte";
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import CarbonDownload from "~icons/carbon/download";
 	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 	import type { Model } from "$lib/types/Model";
 
@@ -76,6 +78,9 @@
 			}, 600);
 		}
 	});
+
+	$: downloadLink =
+		message.from === "user" ? `${$page.url.pathname}/message/${message.id}/prompt` : undefined;
 </script>
 
 {#if message.from === "assistant"}
@@ -112,15 +117,28 @@
 		<div class="whitespace-break-spaces rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400">
 			{message.content.trim()}
 		</div>
-		{#if !loading && message.id}
-			<button
-				class="absolute right-0 top-3.5 cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
-				title="Retry"
-				type="button"
-				on:click={() => dispatch("retry")}
-			>
-				<CarbonRotate360 />
-			</button>
+		{#if !loading}
+			<div class="absolute right-0 top-3.5 flex gap-2 lg:-right-2">
+				{#if downloadLink}
+					<a
+						class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+						title="Download prompt and parameters"
+						type="button"
+						target="_blank"
+						href={downloadLink}
+					>
+						<CarbonDownload />
+					</a>
+				{/if}
+				<button
+					class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
+					title="Retry"
+					type="button"
+					on:click={() => dispatch("retry")}
+				>
+					<CarbonRotate360 />
+				</button>
+			</div>
 		{/if}
 	</div>
 {/if}

src/routes/+layout.server.ts

@@ -1,4 +1,3 @@
-import { base } from "$app/paths";
 import { redirect } from "@sveltejs/kit";
 import type { LayoutServerLoad } from "./$types";
 import { collections } from "$lib/server/database";
@@ -7,7 +6,7 @@ import { UrlDependency } from "$lib/types/UrlDependency";
 import { defaultModel, models } from "$lib/server/models";
 import { validateModel } from "$lib/utils/models";
 
-export const load: LayoutServerLoad = async ({ locals, depends, url, request }) => {
+export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 	const { conversations } = collections;
 	const urlModel = url.searchParams.get("model");
 

src/routes/conversation/[id]/message/[messageId]/prompt/+server.ts

@@ -0,0 +1,51 @@
+import { buildPrompt } from "$lib/buildPrompt.js";
+import { collections } from "$lib/server/database";
+import { models } from "$lib/server/models.js";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+
+export async function GET({ params, locals }) {
+	const convId = new ObjectId(params.id);
+
+	const conv = await collections.conversations.findOne({
+		_id: convId,
+		sessionId: locals.sessionId,
+	});
+
+	if (!conv) {
+		throw error(404, "Conversation not found");
+	}
+
+	const messageId = params.messageId;
+
+	const messageIndex = conv.messages.findIndex((msg) => msg.id === messageId);
+
+	if (messageIndex === -1) {
+		throw error(404, "Message not found");
+	}
+
+	const model = models.find((m) => m.name === conv.model);
+
+	if (!model) {
+		throw error(404, "Conversation model not found");
+	}
+
+	const prompt = buildPrompt(conv.messages.slice(0, messageIndex + 1), model);
+
+	return new Response(
+		JSON.stringify(
+			{
+				note: "This is a preview of the prompt that will be sent to the model when retrying the message. It may differ from what was sent in the past if the parameters have been updated since",
+				prompt,
+				model: model.name,
+				parameters: {
+					...model.parameters,
+					return_full_text: false,
+				},
+			},
+			null,
+			2
+		),
+		{ headers: { "Content-Type": "application/json" } }
+	);
+}