From e41f956b722266a1272f771bfa07cc3155aa07f1 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 18 Feb 2024 15:53:54 -0800
Subject: [PATCH] feat: clone preset

---
 src/routes/(app)/modelfiles/+page.svelte      | 26 ++++++++++++++++++
 .../(app)/modelfiles/create/+page.svelte      | 27 ++++++++++++++++++-
 src/routes/(app)/prompts/+page.svelte         | 26 ++++++++++++++++++
 src/routes/(app)/prompts/create/+page.svelte  | 14 +++++++++-
 4 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index cdcb7ae1..b1038b79 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -12,6 +12,7 @@
 		deleteModelfileByTagName,
 		getModelfiles
 	} from '$lib/apis/modelfiles';
+	import { goto } from '$app/navigation';
 
 	let localModelfiles = [];
 	let importFiles;
@@ -145,6 +146,31 @@
 							</svg>
 						</a>
 
+						<button
+							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+							type="button"
+							on:click={() => {
+								// console.log(modelfile);
+								sessionStorage.modelfile = JSON.stringify(modelfile);
+								goto('/modelfiles/create');
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+								/>
+							</svg>
+						</button>
+
 						<button
 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 							type="button"
diff --git a/src/routes/(app)/modelfiles/create/+page.svelte b/src/routes/(app)/modelfiles/create/+page.svelte
index 5cbf3426..22c52ba6 100644
--- a/src/routes/(app)/modelfiles/create/+page.svelte
+++ b/src/routes/(app)/modelfiles/create/+page.svelte
@@ -209,7 +209,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 		success = false;
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		window.addEventListener('message', async (event) => {
 			if (
 				![
@@ -253,6 +253,31 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 		if (window.opener ?? false) {
 			window.opener.postMessage('loaded', '*');
 		}
+
+		if (sessionStorage.modelfile) {
+			const modelfile = JSON.parse(sessionStorage.modelfile);
+			console.log(modelfile);
+			imageUrl = modelfile.imageUrl;
+			title = modelfile.title;
+			await tick();
+			tagName = modelfile.tagName;
+			desc = modelfile.desc;
+			content = modelfile.content;
+			suggestions =
+				modelfile.suggestionPrompts.length != 0
+					? modelfile.suggestionPrompts
+					: [
+							{
+								content: ''
+							}
+					  ];
+
+			for (const category of modelfile.categories) {
+				categories[category.toLowerCase()] = true;
+			}
+
+			sessionStorage.removeItem('modelfile');
+		}
 	});
 </script>
 
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 4bb43ebe..7cfb5775 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -7,6 +7,7 @@
 	import { prompts } from '$lib/stores';
 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 	import { error } from '@sveltejs/kit';
+	import { goto } from '$app/navigation';
 
 	let importFiles = '';
 	let query = '';
@@ -122,6 +123,31 @@
 								</svg>
 							</a>
 
+							<button
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								on:click={() => {
+									// console.log(modelfile);
+									sessionStorage.prompt = JSON.stringify(prompt);
+									goto('/prompts/create');
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+									/>
+								</svg>
+							</button>
+
 							<button
 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 								type="button"
diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
index 9a85046a..87cf6568 100644
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -50,7 +50,7 @@
 		return regex.test(inputString);
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		window.addEventListener('message', async (event) => {
 			if (
 				![
@@ -74,6 +74,18 @@
 		if (window.opener ?? false) {
 			window.opener.postMessage('loaded', '*');
 		}
+
+		if (sessionStorage.prompt) {
+			const prompt = JSON.parse(sessionStorage.prompt);
+
+			console.log(prompt);
+			title = prompt.title;
+			await tick();
+			content = prompt.content;
+			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
+
+			sessionStorage.removeItem('prompt');
+		}
 	});
 </script>