From dcfe064949abb252a532b661dc8b18997ffbfc98 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 1 Jan 2024 16:39:02 -0800
Subject: [PATCH 01/32] =?UTF-8?q?Add=20Ros=C3=A9=20Pine=20Dawn=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/chat/SettingsModal.svelte |   3 +-
 src/routes/+layout.svelte                    |   1 +
 static/themes/rosepine-dawn.css              | 126 +++++++++++++++++++
 static/themes/rosepine.css                   |  32 +++++
 4 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 static/themes/rosepine-dawn.css

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index dc4a5989..06a95870 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -34,7 +34,7 @@
 
 	// General
 	let API_BASE_URL = OLLAMA_API_BASE_URL;
-	let themes = ['dark', 'light', 'rose-pine'];
+	let themes = ['dark', 'light', 'rose-pine', 'rose-pine-dawn'];
 	let theme = 'dark';
 	let notificationEnabled = false;
 	let system = '';
@@ -1009,6 +1009,7 @@
 										<option value="dark">Dark</option>
 										<option value="light">Light</option>
 										<option value="rose-pine">Rosé Pine</option>
+										<option value="rose-pine-dawn">Rosé Pine Dawn</option>
 									</select>
 								</div>
 							</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 92f09f64..63687c18 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -57,6 +57,7 @@
 	<title>Ollama</title>
 
 	<link rel="stylesheet" type="text/css" href="/themes/rosepine.css" />
+	<link rel="stylesheet" type="text/css" href="/themes/rosepine-dawn.css" />
 </svelte:head>
 
 {#if loaded}
diff --git a/static/themes/rosepine-dawn.css b/static/themes/rosepine-dawn.css
new file mode 100644
index 00000000..ed44db3e
--- /dev/null
+++ b/static/themes/rosepine-dawn.css
@@ -0,0 +1,126 @@
+.rose-pine-dawn * {
+    color: #575279 !important;
+    stroke: #d7827e !important;
+}
+
+.rose-pine-dawn .app>* {
+    background-color: #faf4ed !important;
+}
+
+.rose-pine-dawn #nav {
+    background-color: #fffaf3;
+}
+
+.rose-pine-dawn .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen {
+    background: #f2e9e1;
+}
+
+.rose-pine-dawn .bg-white.dark\:bg-gray-800 {
+    background: #f2e9e1;
+}
+
+.rose-pine-dawn .w-4.h-4 {
+    fill: #ebbcba;
+}
+
+.rose-pine-dawn #chat-textarea {
+    background: #cecacd;
+    margin: 0.3rem;
+    padding: 0.5rem;
+}
+
+.rose-pine-dawn .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 {
+    background: #f2e9e1 !important;
+    padding-top: 0.6rem;
+}
+
+.rose-pine-dawn .text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
+    background-color: #6e6a86;
+    transition: background 0.2s ease-out linear;
+}
+
+.rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
+    background-color: #286983;
+    transition: background 0.2s ease-out linear;
+}
+
+.rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center>* {
+    fill: #56949f !important;
+    transition: fill 0.2s ease-out linear;
+}
+
+.rose-pine-dawn .w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
+    background-color: #56526e;
+    font-weight: bold;
+}
+
+.rose-pine-dawn .hover\:bg-gray-900:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(152 147 165 / var(--tw-bg-opacity));
+}
+
+.rose-pine-dawn .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 {
+    background-color: #403d52;
+}
+
+.rose-pine-dawn .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz {
+    border-radius: 16px 16px 0 0;
+}
+
+.rose-pine-dawn .base.enter.svelte-ug60r4 {
+    background-color: #286983;
+}
+
+.rose-pine-dawn .message.svelte-1nauejd {
+    color: #e0def4 !important;
+}
+
+#dropdownDots {
+    background-color: #dfdad9;
+}
+
+.flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
+    background: #cecacd;
+}
+
+.rose-pine-dawn #dropdownDots {
+    background-color: #dfdad9;
+}
+
+.rose-pine-dawn .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
+    background: #cecacd;
+}
+
+.rose-pine-dawn .m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
+    background-color: #f2e9e1;
+}
+
+.rose-pine-dawn .w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
+    background-color: #cecacd;
+}
+
+.rose-pine-dawn .w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
+    background-color: #cecacd;
+}
+
+.rose-pine-dawn .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
+    background-color: #dfdad9;
+}
+
+.rose-pine-dawn .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
+    background-color: #cecacd;
+}
+
+.rose-pine-dawn .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
+    background-color: #56949f;
+}
+
+.rose-pine-dawn .svelte-1ee93ns {
+    --primary: #b4637a !important;
+    --secondary: #fffaf3 !important;
+}
+
+.rose-pine-dawn .svelte-11kvm4p {
+    --primary: #56949f !important;
+    --secondary: #fffaf3 !important;
+}
\ No newline at end of file
diff --git a/static/themes/rosepine.css b/static/themes/rosepine.css
index 352f06c3..2f4acd03 100644
--- a/static/themes/rosepine.css
+++ b/static/themes/rosepine.css
@@ -80,6 +80,38 @@
 	color: #e0def4 !important;
 }
 
+.rose-pine #dropdownDots {
+    background-color: #403d52;
+}
+
+.rose-pine .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
+    background: #524f67;
+}
+
+.rose-pine .m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
+    background-color: #26233a;
+}
+
+.rose-pine .w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
+    background-color: #524f67;
+}
+
+.rose-pine .w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
+    background-color: #524f67;
+}
+
+.rose-pine .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
+    background-color: #403d52;
+}
+
+.rose-pine .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
+    background-color: #524f67;
+}
+
+.rose-pine .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
+    background-color: #31748f;
+}
+
 .rose-pine .svelte-1ee93ns {
 	--primary: #eb6f92 !important;
 	--secondary: #e0def4 !important;

From 3cac26aa037648da2f859789760fa908801baaf9 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jan 2024 19:22:25 -0800
Subject: [PATCH 02/32] fix: dark theme as base for custom themes

---
 src/lib/components/chat/SettingsModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 06a95870..963e616f 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -999,7 +999,7 @@
 
 											document.documentElement.classList.add(theme);
 
-											if (theme === 'rose-pine') {
+											if (!['light', 'dark'].includes(theme)) {
 												document.documentElement.classList.add('dark');
 											}
 

From 78f120566f62bed600fe2742523b95fbff5a40c3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jan 2024 19:25:26 -0800
Subject: [PATCH 03/32] feat: id added to chat search

---
 src/lib/components/layout/Sidebar.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 18b4f5fb..352ead75 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -149,6 +149,7 @@
 				</div>
 
 				<input
+					id="chat-search-input"
 					class="w-full rounded-r py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
 					placeholder="Search"
 					bind:value={search}

From 6a92652ca1fa6dd203c326d6dc2ca5c3080a0921 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jan 2024 19:36:09 -0800
Subject: [PATCH 04/32] fix: custom theme light/dark support

---
 src/app.html                                 |  5 +++--
 src/lib/components/chat/SettingsModal.svelte | 18 +++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app.html b/src/app.html
index c2268851..642a570e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,8 +15,9 @@
 			} else if (localStorage.theme === 'dark') {
 				document.documentElement.classList.add('dark');
 			} else {
-				document.documentElement.classList.add('dark');
-				document.documentElement.classList.add(localStorage.theme);
+				localStorage.theme.split(' ').forEach((e) => {
+					document.documentElement.classList.add(e);
+				});
 			}
 		</script>
 
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 963e616f..a220bd4e 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -34,7 +34,7 @@
 
 	// General
 	let API_BASE_URL = OLLAMA_API_BASE_URL;
-	let themes = ['dark', 'light', 'rose-pine', 'rose-pine-dawn'];
+	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
 	let theme = 'dark';
 	let notificationEnabled = false;
 	let system = '';
@@ -994,22 +994,22 @@
 											themes
 												.filter((e) => e !== theme)
 												.forEach((e) => {
-													document.documentElement.classList.remove(e);
+													e.split(' ').forEach((e) => {
+														document.documentElement.classList.remove(e);
+													});
 												});
 
-											document.documentElement.classList.add(theme);
-
-											if (!['light', 'dark'].includes(theme)) {
-												document.documentElement.classList.add('dark');
-											}
+											theme.split(' ').forEach((e) => {
+												document.documentElement.classList.add(e);
+											});
 
 											console.log(theme);
 										}}
 									>
 										<option value="dark">Dark</option>
 										<option value="light">Light</option>
-										<option value="rose-pine">Rosé Pine</option>
-										<option value="rose-pine-dawn">Rosé Pine Dawn</option>
+										<option value="rose-pine dark">Rosé Pine</option>
+										<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
 									</select>
 								</div>
 							</div>

From 2113c8bed00bcdd5a29c40ec48a8db75d4dd778a Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 1 Jan 2024 19:50:56 -0800
Subject: [PATCH 05/32] fix searchbox

---
 src/lib/components/layout/Sidebar.svelte |  3 +--
 static/themes/rosepine-dawn.css          | 10 +++++++---
 static/themes/rosepine.css               |  8 ++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 352ead75..76bdf7e5 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -132,7 +132,7 @@
 		{/if}
 
 		<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
-			<div class="flex w-full">
+			<div class="flex w-full" id="chat-search">
 				<div class="self-center pl-3 py-2 rounded-l bg-gray-950">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -149,7 +149,6 @@
 				</div>
 
 				<input
-					id="chat-search-input"
 					class="w-full rounded-r py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
 					placeholder="Search"
 					bind:value={search}
diff --git a/static/themes/rosepine-dawn.css b/static/themes/rosepine-dawn.css
index ed44db3e..4265321c 100644
--- a/static/themes/rosepine-dawn.css
+++ b/static/themes/rosepine-dawn.css
@@ -35,13 +35,13 @@
 }
 
 .rose-pine-dawn .text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
-    background-color: #6e6a86;
-    transition: background 0.2s ease-out linear;
+    background-color: #cecacd;
+    transition: background-color 0.2s ease-out linear;
 }
 
 .rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
     background-color: #286983;
-    transition: background 0.2s ease-out linear;
+    transition: background-color 0.2s ease-out linear;
 }
 
 .rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center>* {
@@ -115,6 +115,10 @@
     background-color: #56949f;
 }
 
+#chat-search > * {
+	background-color: #dfdad9 !important;
+}
+
 .rose-pine-dawn .svelte-1ee93ns {
     --primary: #b4637a !important;
     --secondary: #fffaf3 !important;
diff --git a/static/themes/rosepine.css b/static/themes/rosepine.css
index 2f4acd03..b2202e65 100644
--- a/static/themes/rosepine.css
+++ b/static/themes/rosepine.css
@@ -37,13 +37,13 @@
 .rose-pine
 	.text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
 	background-color: #6e6a86;
-	transition: background 0.2s ease-out linear;
+	transition: background-color 0.2s ease-out linear;
 }
 
 .rose-pine
 	.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
 	background-color: #286983;
-	transition: background 0.2s ease-out linear;
+	transition: background-color 0.2s ease-out linear;
 }
 
 .rose-pine
@@ -112,6 +112,10 @@
     background-color: #31748f;
 }
 
+#chat-search > * {
+	background-color: #403d52 !important;
+}
+
 .rose-pine .svelte-1ee93ns {
 	--primary: #eb6f92 !important;
 	--secondary: #e0def4 !important;

From 5e92b043a6463a16a4254eb358c7a82a002f72ef Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jan 2024 19:53:44 -0800
Subject: [PATCH 06/32] fix: formatting

---
 static/themes/rosepine-dawn.css | 114 +++++++++++++++++---------------
 static/themes/rosepine.css      |  30 +++++----
 2 files changed, 79 insertions(+), 65 deletions(-)

diff --git a/static/themes/rosepine-dawn.css b/static/themes/rosepine-dawn.css
index 4265321c..dc393019 100644
--- a/static/themes/rosepine-dawn.css
+++ b/static/themes/rosepine-dawn.css
@@ -1,130 +1,140 @@
 .rose-pine-dawn * {
-    color: #575279 !important;
-    stroke: #d7827e !important;
+	color: #575279 !important;
+	stroke: #d7827e !important;
 }
 
-.rose-pine-dawn .app>* {
-    background-color: #faf4ed !important;
+.rose-pine-dawn .app > * {
+	background-color: #faf4ed !important;
 }
 
 .rose-pine-dawn #nav {
-    background-color: #fffaf3;
+	background-color: #fffaf3;
 }
 
 .rose-pine-dawn .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen {
-    background: #f2e9e1;
+	background: #f2e9e1;
 }
 
 .rose-pine-dawn .bg-white.dark\:bg-gray-800 {
-    background: #f2e9e1;
+	background: #f2e9e1;
 }
 
 .rose-pine-dawn .w-4.h-4 {
-    fill: #ebbcba;
+	fill: #ebbcba;
 }
 
 .rose-pine-dawn #chat-textarea {
-    background: #cecacd;
-    margin: 0.3rem;
-    padding: 0.5rem;
+	background: #cecacd;
+	margin: 0.3rem;
+	padding: 0.5rem;
 }
 
 .rose-pine-dawn .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 {
-    background: #f2e9e1 !important;
-    padding-top: 0.6rem;
+	background: #f2e9e1 !important;
+	padding-top: 0.6rem;
 }
 
-.rose-pine-dawn .text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
-    background-color: #cecacd;
-    transition: background-color 0.2s ease-out linear;
+.rose-pine-dawn
+	.text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
+	background-color: #cecacd;
+	transition: background-color 0.2s ease-out linear;
 }
 
-.rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
-    background-color: #286983;
-    transition: background-color 0.2s ease-out linear;
+.rose-pine-dawn
+	.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
+	background-color: #286983;
+	transition: background-color 0.2s ease-out linear;
 }
 
-.rose-pine-dawn .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center>* {
-    fill: #56949f !important;
-    transition: fill 0.2s ease-out linear;
+.rose-pine-dawn
+	.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center
+	> * {
+	fill: #56949f !important;
+	transition: fill 0.2s ease-out linear;
 }
 
-.rose-pine-dawn .w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
-    background-color: #56526e;
-    font-weight: bold;
+.rose-pine-dawn
+	.w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
+	background-color: #56526e;
+	font-weight: bold;
 }
 
 .rose-pine-dawn .hover\:bg-gray-900:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(152 147 165 / var(--tw-bg-opacity));
+	--tw-bg-opacity: 1;
+	background-color: rgb(152 147 165 / var(--tw-bg-opacity));
 }
 
 .rose-pine-dawn .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 {
-    background-color: #403d52;
+	background-color: #403d52;
 }
 
 .rose-pine-dawn .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz {
-    border-radius: 16px 16px 0 0;
+	border-radius: 16px 16px 0 0;
 }
 
 .rose-pine-dawn .base.enter.svelte-ug60r4 {
-    background-color: #286983;
+	background-color: #286983;
 }
 
 .rose-pine-dawn .message.svelte-1nauejd {
-    color: #e0def4 !important;
+	color: #e0def4 !important;
 }
 
 #dropdownDots {
-    background-color: #dfdad9;
+	background-color: #dfdad9;
 }
 
 .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
-    background: #cecacd;
+	background: #cecacd;
 }
 
 .rose-pine-dawn #dropdownDots {
-    background-color: #dfdad9;
+	background-color: #dfdad9;
 }
 
 .rose-pine-dawn .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
-    background: #cecacd;
+	background: #cecacd;
 }
 
-.rose-pine-dawn .m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
-    background-color: #f2e9e1;
+.rose-pine-dawn
+	.m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
+	background-color: #f2e9e1;
 }
 
-.rose-pine-dawn .w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
-    background-color: #cecacd;
+.rose-pine-dawn
+	.w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
+	background-color: #cecacd;
 }
 
-.rose-pine-dawn .w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
-    background-color: #cecacd;
+.rose-pine-dawn
+	.w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
+	background-color: #cecacd;
 }
 
-.rose-pine-dawn .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
-    background-color: #dfdad9;
+.rose-pine-dawn
+	.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
+	background-color: #dfdad9;
 }
 
-.rose-pine-dawn .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
-    background-color: #cecacd;
+.rose-pine-dawn
+	.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
+	background-color: #cecacd;
 }
 
 .rose-pine-dawn .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
-    background-color: #56949f;
+	background-color: #56949f;
 }
 
-#chat-search > * {
+.rose-pine-dawn #chat-search > * {
 	background-color: #dfdad9 !important;
 }
 
 .rose-pine-dawn .svelte-1ee93ns {
-    --primary: #b4637a !important;
-    --secondary: #fffaf3 !important;
+	--primary: #b4637a !important;
+	--secondary: #fffaf3 !important;
 }
 
 .rose-pine-dawn .svelte-11kvm4p {
-    --primary: #56949f !important;
-    --secondary: #fffaf3 !important;
-}
\ No newline at end of file
+	--primary: #56949f !important;
+	--secondary: #fffaf3 !important;
+}
diff --git a/static/themes/rosepine.css b/static/themes/rosepine.css
index b2202e65..c98ee5c6 100644
--- a/static/themes/rosepine.css
+++ b/static/themes/rosepine.css
@@ -81,38 +81,42 @@
 }
 
 .rose-pine #dropdownDots {
-    background-color: #403d52;
+	background-color: #403d52;
 }
 
 .rose-pine .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
-    background: #524f67;
+	background: #524f67;
 }
 
 .rose-pine .m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
-    background-color: #26233a;
+	background-color: #26233a;
 }
 
-.rose-pine .w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
-    background-color: #524f67;
+.rose-pine
+	.w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
+	background-color: #524f67;
 }
 
-.rose-pine .w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
-    background-color: #524f67;
+.rose-pine
+	.w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
+	background-color: #524f67;
 }
 
-.rose-pine .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
-    background-color: #403d52;
+.rose-pine
+	.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
+	background-color: #403d52;
 }
 
-.rose-pine .px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
-    background-color: #524f67;
+.rose-pine
+	.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
+	background-color: #524f67;
 }
 
 .rose-pine .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
-    background-color: #31748f;
+	background-color: #31748f;
 }
 
-#chat-search > * {
+.rose-pine #chat-search > * {
 	background-color: #403d52 !important;
 }
 

From 936bad455f4227ac4f865bf87c8c33856d22f059 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 1 Jan 2024 19:59:50 -0800
Subject: [PATCH 07/32] fix: default theme should be dark

---
 src/app.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app.html b/src/app.html
index 642a570e..9b1099b0 100644
--- a/src/app.html
+++ b/src/app.html
@@ -12,12 +12,12 @@
 				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
 			) {
 				document.documentElement.classList.add('light');
-			} else if (localStorage.theme === 'dark') {
-				document.documentElement.classList.add('dark');
-			} else {
+			} else if (localStorage.theme) {
 				localStorage.theme.split(' ').forEach((e) => {
 					document.documentElement.classList.add(e);
 				});
+			} else {
+				document.documentElement.classList.add('dark');
 			}
 		</script>
 

From 69a037257e61fb74dfa012a62ad4933dd2dc44e9 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 00:55:28 -0800
Subject: [PATCH 08/32] feat: prompt preset support

---
 .gitignore                                    |   1 -
 src/lib/components/chat/MessageInput.svelte   | 110 ++++++++++++----
 .../chat/MessageInput/PromptCommands.svelte   | 121 ++++++++++++++++++
 src/lib/utils/index.ts                        |  16 +++
 4 files changed, 220 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/chat/MessageInput/PromptCommands.svelte

diff --git a/.gitignore b/.gitignore
index 1250aef9..528e1f83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index d2fe8ca2..b55d4192 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -3,6 +3,8 @@
 	import toast from 'svelte-french-toast';
 	import Suggestions from './MessageInput/Suggestions.svelte';
 	import { onMount } from 'svelte';
+	import Prompts from './MessageInput/PromptCommands.svelte';
+	import { findWordIndices } from '$lib/utils';
 
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
@@ -11,6 +13,8 @@
 	export let autoScroll = true;
 
 	let filesInputElement;
+	let promptsElement;
+
 	let inputFiles;
 	let dragged = false;
 
@@ -154,36 +158,42 @@
 
 <div class="fixed bottom-0 w-full">
 	<div class="px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
-		{#if messages.length == 0 && suggestionPrompts.length !== 0}
-			<div class="max-w-3xl w-full">
-				<Suggestions {suggestionPrompts} {submitPrompt} />
+		<div class="flex flex-col max-w-3xl w-full">
+			<div>
+				{#if autoScroll === false && messages.length > 0}
+					<div class=" flex justify-center mb-4">
+						<button
+							class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full"
+							on:click={() => {
+								autoScroll = true;
+								window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-5 h-5"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</button>
+					</div>
+				{/if}
 			</div>
-		{/if}
 
-		{#if autoScroll === false && messages.length > 0}
-			<div class=" flex justify-center mb-4">
-				<button
-					class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full"
-					on:click={() => {
-						autoScroll = true;
-						window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-5 h-5"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</button>
+			<div class="w-full">
+				{#if prompt.charAt(0) === '/'}
+					<Prompts bind:this={promptsElement} bind:prompt />
+				{:else if messages.length == 0 && suggestionPrompts.length !== 0}
+					<Suggestions {suggestionPrompts} {submitPrompt} />
+				{/if}
 			</div>
-		{/if}
+		</div>
 	</div>
 	<div class="bg-white dark:bg-gray-800">
 		<div class="max-w-3xl px-2.5 -mb-0.5 mx-auto inset-x-0">
@@ -315,6 +325,52 @@
 									userMessageElement.scrollIntoView({ block: 'center' });
 									editButton?.click();
 								}
+
+								if (prompt.charAt(0) === '/' && e.key === 'Tab') {
+									e.preventDefault();
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+
+									commandOptionButton?.click();
+								}
+
+								if (prompt.charAt(0) === '/' && e.key === 'ArrowUp') {
+									promptsElement.selectUp();
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+									commandOptionButton.scrollIntoView({ block: 'center' });
+								}
+
+								if (prompt.charAt(0) === '/' && e.key === 'ArrowDown') {
+									promptsElement.selectDown();
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+									commandOptionButton.scrollIntoView({ block: 'center' });
+								}
+
+								if (prompt.charAt(0) === '/' && e.key === 'Enter') {
+									e.preventDefault();
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+
+									commandOptionButton?.click();
+								}
+
+								const words = findWordIndices(prompt);
+
+								if (words.length > 0 && e.key === 'Tab') {
+									const word = words.at(0);
+									e.preventDefault();
+									e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
+								}
 							}}
 							rows="1"
 							on:input={(e) => {
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
new file mode 100644
index 00000000..91e5f1aa
--- /dev/null
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { findWordIndices } from '$lib/utils';
+	import { tick } from 'svelte';
+
+	export let prompt = '';
+
+	let selectedCommandIdx = 0;
+
+	let promptCommands = [
+		{
+			command: '/article',
+			title: 'Article Generator',
+			content: `Write an article about [topic]
+
+include relevant statistics (add the links of the sources you use) and consider diverse perspectives. Write it in a [X_tone] and mention the source links in the end.`
+		},
+		{
+			command: '/backlink',
+
+			title: 'Backlink Outreach Email',
+			content: `Write a link-exchange outreach email on behalf of [your name] from [your_company] to ask for a backlink from their [website_url] to [your website url].`
+		},
+		{
+			command: '/faq',
+
+			title: 'FAQ Generator',
+			content: `Create a list of [10] frequently asked questions about [keyword] and provide answers for each one of them considering the SERP and rich result guidelines.`
+		},
+		{
+			command: '/headline',
+
+			title: 'Headline Generator',
+			content: `Generate 10 attention-grabbing headlines for an article about [your topic]`
+		},
+		{
+			command: '/product',
+
+			title: 'Product Description',
+			content: `Craft an irresistible product description that highlights the benefits of [your product]`
+		},
+		{
+			command: '/seo',
+
+			title: 'SEO Content Brief',
+			content: `Create a SEO content brief for [keyword].`
+		}
+	];
+
+	let filteredPromptCommands = [];
+
+	$: filteredPromptCommands = promptCommands.filter((p) => p.command.includes(prompt));
+
+	$: if (prompt) {
+		selectedCommandIdx = 0;
+	}
+
+	export const selectUp = () => {
+		selectedCommandIdx = Math.max(0, selectedCommandIdx - 1);
+	};
+
+	export const selectDown = () => {
+		selectedCommandIdx = Math.min(selectedCommandIdx + 1, filteredPromptCommands.length - 1);
+	};
+
+	const confirmCommand = async (command) => {
+		prompt = command.content;
+
+		const chatInputElement = document.getElementById('chat-textarea');
+
+		await tick();
+
+		chatInputElement.style.height = '';
+		chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px';
+
+		chatInputElement?.focus();
+
+		await tick();
+
+		const words = findWordIndices(prompt);
+
+		if (words.length > 0) {
+			const word = words.at(0);
+			chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
+		}
+	};
+</script>
+
+{#if filteredPromptCommands.length > 0}
+	<div class="md:px-2 mb-3 text-left w-full">
+		<div class="flex w-full rounded-lg border border-gray-100 dark:border-gray-700">
+			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
+				<div class=" text-lg font-medium mt-2">/</div>
+			</div>
+			<div class=" max-h-60 overflow-y-auto bg-white w-full p-2 rounded-r-lg space-y-0.5">
+				{#each filteredPromptCommands as command, commandIdx}
+					<button
+						class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
+							? ' bg-gray-100 selected-command-option-button'
+							: ''}"
+						type="button"
+						on:click={() => {
+							confirmCommand(command);
+						}}
+						on:mousemove={() => {
+							selectedCommandIdx = commandIdx;
+						}}
+						on:focus={() => {}}
+					>
+						<div class=" font-medium text-black">
+							{command.command}
+						</div>
+
+						<div class=" text-xs text-gray-600">
+							{command.title}
+						</div>
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 8f7e711b..344672da 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -111,3 +111,19 @@ export const checkVersion = (required, current) => {
 				caseFirst: 'upper'
 		  }) < 0;
 };
+
+export const findWordIndices = (text) => {
+	const regex = /\[([^\]]+)\]/g;
+	let matches = [];
+	let match;
+
+	while ((match = regex.exec(text)) !== null) {
+		matches.push({
+			word: match[1],
+			startIndex: match.index,
+			endIndex: regex.lastIndex - 1
+		});
+	}
+
+	return matches;
+};

From e02b06a0bf841035f568f5c0ca922e2ae9484c34 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 01:12:49 -0800
Subject: [PATCH 09/32] feat: more prompt presets added

---
 src/lib/components/chat/MessageInput.svelte   |  43 ++++---
 .../chat/MessageInput/PromptCommands.svelte   | 108 +++++++++++++++++-
 2 files changed, 133 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index b55d4192..89cea47f 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -2,7 +2,7 @@
 	import { settings } from '$lib/stores';
 	import toast from 'svelte-french-toast';
 	import Suggestions from './MessageInput/Suggestions.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import Prompts from './MessageInput/PromptCommands.svelte';
 	import { findWordIndices } from '$lib/utils';
 
@@ -308,7 +308,7 @@
 									submitPrompt(prompt);
 								}
 							}}
-							on:keydown={(e) => {
+							on:keydown={async (e) => {
 								if (prompt === '' && e.key == 'ArrowUp') {
 									e.preventDefault();
 
@@ -326,16 +326,6 @@
 									editButton?.click();
 								}
 
-								if (prompt.charAt(0) === '/' && e.key === 'Tab') {
-									e.preventDefault();
-
-									const commandOptionButton = [
-										...document.getElementsByClassName('selected-command-option-button')
-									]?.at(-1);
-
-									commandOptionButton?.click();
-								}
-
 								if (prompt.charAt(0) === '/' && e.key === 'ArrowUp') {
 									promptsElement.selectUp();
 
@@ -364,12 +354,31 @@
 									commandOptionButton?.click();
 								}
 
-								const words = findWordIndices(prompt);
-
-								if (words.length > 0 && e.key === 'Tab') {
-									const word = words.at(0);
+								if (prompt.charAt(0) === '/' && e.key === 'Tab') {
 									e.preventDefault();
-									e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+
+									commandOptionButton?.click();
+								} else if (e.key === 'Tab') {
+									const words = findWordIndices(prompt);
+
+									if (words.length > 0) {
+										const word = words.at(0);
+										const fullPrompt = prompt;
+
+										prompt = prompt.substring(0, word?.endIndex + 1);
+										await tick();
+
+										e.target.scrollTop = e.target.scrollHeight;
+										prompt = fullPrompt;
+										await tick();
+
+										e.preventDefault();
+										e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
+									}
 								}
 							}}
 							rows="1"
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 91e5f1aa..2b41bac0 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -43,12 +43,118 @@ include relevant statistics (add the links of the sources you use) and consider
 
 			title: 'SEO Content Brief',
 			content: `Create a SEO content brief for [keyword].`
+		},
+		{
+			command: '/seo-ideas',
+
+			title: 'SEO Keyword Ideas',
+			content: `Generate a list of 20 keyword ideas on [topic].
+
+Cluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.`
+		},
+		{
+			command: '/summary',
+
+			title: 'Short Summary',
+			content: `Write a summary in 50 words that summarizes [topic or keyword].`
+		},
+		{
+			command: '/email-subject',
+
+			title: 'Email Subject Line',
+			content: `Develop [5] subject lines for a cold email offering your [product or service] to a potential client.`
+		},
+		{
+			command: '/facebook-ads',
+
+			title: 'Facebook Ads',
+			content: `Create 3 variations of effective ad copy to promote [product] for [audience].
+
+Make sure they are [persuasive/playful/emotional] and mention these benefits:
+
+[Benefit 1]
+
+[Benefit 2]
+
+[Benefit 3]
+
+Finish with a call to action saying [CTA].
+
+Add 3 emojis to it.`
+		},
+		{
+			command: '/google-ads',
+
+			title: 'Google Ads',
+			content: `Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].
+
+The headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.`
+		},
+		{
+			command: '/insta-caption',
+
+			title: 'Instagram Caption',
+			content: `Write 5 variations of Instagram captions for [product].
+
+Use friendly, human-like language that appeals to [target audience].
+
+Emphasize the unique qualities of [product],
+
+use ample emojis, and don't sound too promotional.`
+		},
+		{
+			command: '/linkedin-post',
+
+			title: 'LinkedIn Post',
+			content: `Create a narrative Linkedin post using immersive writing about [topic].
+
+Details:
+
+[give details in bullet point format]
+
+Use a mix of short and long sentences. Make it punchy and dramatic.`
+		},
+		{
+			command: '/youtube-desc',
+
+			title: 'YouTube Video',
+			content: `Write a 100-word YouTube video description that compels [audience]
+
+to watch a video on [topic]
+
+and mentions the following keywords
+
+[keyword 1]
+
+[keyword 2]
+
+[keyword 3].`
+		},
+		{
+			command: '/seo-meta',
+
+			title: 'SEO Meta',
+			content: `Suggest a meta description for the content above, make it user-friendly and with a call to action, include the keyword [keyword].`
+		},
+		{
+			command: '/eli5',
+
+			title: 'ELI5',
+			content: `You are an expert teacher with the ability to explain complex topics in simpler terms. Explain the concept of [topic] in simple terms, so that my [grade level/subject] class can understand [this concept/specific example]?`
+		},
+		{
+			command: '/emoji-translate',
+
+			title: 'Emoji Translation',
+			content: `You are an emoji expert. Using only emojis, translate the following text to emojis. [insert numbered sentences].`
 		}
 	];
 
 	let filteredPromptCommands = [];
 
-	$: filteredPromptCommands = promptCommands.filter((p) => p.command.includes(prompt));
+	$: filteredPromptCommands = promptCommands
+		.filter((p) => p.command.includes(prompt))
+		.sort((a, b) => a.title.localeCompare(b.title));
 
 	$: if (prompt) {
 		selectedCommandIdx = 0;

From 96b198b27be9d4e608f096ff59fa9d033154caaa Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 01:18:14 -0800
Subject: [PATCH 10/32] fix: formatting

---
 src/lib/components/chat/MessageInput.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 89cea47f..55683329 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { settings } from '$lib/stores';
 	import toast from 'svelte-french-toast';
-	import Suggestions from './MessageInput/Suggestions.svelte';
 	import { onMount, tick } from 'svelte';
-	import Prompts from './MessageInput/PromptCommands.svelte';
+	import { settings } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
 
+	import Prompts from './MessageInput/PromptCommands.svelte';
+	import Suggestions from './MessageInput/Suggestions.svelte';
+
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
 

From 7eaec7e354fb89ce4883eb3d09bb2b15cef9cf66 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 01:36:30 -0800
Subject: [PATCH 11/32] fix: theme

---
 static/themes/rosepine-dawn.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/themes/rosepine-dawn.css b/static/themes/rosepine-dawn.css
index dc393019..08445138 100644
--- a/static/themes/rosepine-dawn.css
+++ b/static/themes/rosepine-dawn.css
@@ -80,11 +80,11 @@
 	color: #e0def4 !important;
 }
 
-#dropdownDots {
+.rose-pine-dawn #dropdownDots {
 	background-color: #dfdad9;
 }
 
-.flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
+.rose-pine-dawn .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
 	background: #cecacd;
 }
 

From 092884fec54c1957532e5bbb415e89e768a1a32f Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 16:06:11 -0800
Subject: [PATCH 12/32] fix: chat general

---
 src/lib/components/chat/MessageInput.svelte  | 2 +-
 src/lib/components/chat/ModelSelector.svelte | 7 +++++++
 src/routes/(app)/+page.svelte                | 8 ++++++--
 src/routes/(app)/c/[id]/+page.svelte         | 9 ++++++---
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 55683329..1468310d 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -298,7 +298,7 @@
 							id="chat-textarea"
 							class=" dark:bg-gray-800 dark:text-gray-100 outline-none w-full py-3 px-2 {fileUploadEnabled
 								? ''
-								: ' pl-4'} rounded-xl resize-none"
+								: ' pl-4'} rounded-xl resize-none h-[48px]"
 							placeholder={speechRecognitionListening ? 'Listening...' : 'Send a message'}
 							bind:value={prompt}
 							on:keypress={(e) => {
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index b4a0f47c..9e7ff4dd 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { models, showSettings, settings } from '$lib/stores';
+	import { onMount, tick } from 'svelte';
 	import toast from 'svelte-french-toast';
 
 	export let selectedModels = [''];
@@ -15,6 +16,12 @@
 		localStorage.setItem('settings', JSON.stringify($settings));
 		toast.success('Default model updated');
 	};
+
+	$: if (selectedModels.length > 0 && $models.length > 0) {
+		selectedModels = selectedModels.map((model) =>
+			$models.map((m) => m.name).includes(model) ? model : ''
+		);
+	}
 </script>
 
 <div class="flex flex-col my-2">
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index b62a9caa..4e3347ff 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -109,10 +109,14 @@
 		await Promise.all(
 			selectedModels.map(async (model) => {
 				console.log(model);
-				if ($models.filter((m) => m.name === model)[0].external) {
+				const modelTag = $models.filter((m) => m.name === model).at(0);
+
+				if (modelTag?.external) {
 					await sendPromptOpenAI(model, prompt, parentId, _chatId);
-				} else {
+				} else if (modelTag) {
 					await sendPromptOllama(model, prompt, parentId, _chatId);
+				} else {
+					toast.error(`Model ${model} not found`);
 				}
 			})
 		);
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 48bc86ca..62c271bf 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -136,17 +136,20 @@
 		await Promise.all(
 			selectedModels.map(async (model) => {
 				console.log(model);
-				if ($models.filter((m) => m.name === model)[0].external) {
+				const modelTag = $models.filter((m) => m.name === model).at(0);
+
+				if (modelTag?.external) {
 					await sendPromptOpenAI(model, prompt, parentId, _chatId);
-				} else {
+				} else if (modelTag) {
 					await sendPromptOllama(model, prompt, parentId, _chatId);
+				} else {
+					toast.error(`Model ${model} not found`);
 				}
 			})
 		);
 
 		await chats.set(await getChatList(localStorage.token));
 	};
-
 	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
 		// Create response message
 		let responseMessageId = uuidv4();

From d8754b4486130c7f73e953622f50e3e6e0b905aa Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 16:22:48 -0800
Subject: [PATCH 13/32] feat/fix: email format validation

---
 backend/apps/web/routers/auths.py | 56 +++++++++++++++++--------------
 backend/constants.py              |  1 +
 backend/utils/misc.py             |  7 ++++
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/backend/apps/web/routers/auths.py b/backend/apps/web/routers/auths.py
index fb113989..714982e3 100644
--- a/backend/apps/web/routers/auths.py
+++ b/backend/apps/web/routers/auths.py
@@ -8,6 +8,7 @@ from pydantic import BaseModel
 import time
 import uuid
 
+
 from apps.web.models.auths import (
     SigninForm,
     SignupForm,
@@ -20,7 +21,7 @@ from apps.web.models.users import Users
 
 
 from utils.utils import get_password_hash, get_current_user, create_token
-from utils.misc import get_gravatar_url
+from utils.misc import get_gravatar_url, validate_email_format
 from constants import ERROR_MESSAGES
 
 
@@ -95,33 +96,38 @@ async def signin(form_data: SigninForm):
 @router.post("/signup", response_model=SigninResponse)
 async def signup(request: Request, form_data: SignupForm):
     if request.app.state.ENABLE_SIGNUP:
-        if not Users.get_user_by_email(form_data.email.lower()):
-            try:
-                role = "admin" if Users.get_num_users() == 0 else "pending"
-                hashed = get_password_hash(form_data.password)
-                user = Auths.insert_new_auth(
-                    form_data.email.lower(), hashed, form_data.name, role
-                )
+        if validate_email_format(form_data.email.lower()):
+            if not Users.get_user_by_email(form_data.email.lower()):
+                try:
+                    role = "admin" if Users.get_num_users() == 0 else "pending"
+                    hashed = get_password_hash(form_data.password)
+                    user = Auths.insert_new_auth(
+                        form_data.email.lower(), hashed, form_data.name, role
+                    )
 
-                if user:
-                    token = create_token(data={"email": user.email})
-                    # response.set_cookie(key='token', value=token, httponly=True)
+                    if user:
+                        token = create_token(data={"email": user.email})
+                        # response.set_cookie(key='token', value=token, httponly=True)
 
-                    return {
-                        "token": token,
-                        "token_type": "Bearer",
-                        "id": user.id,
-                        "email": user.email,
-                        "name": user.name,
-                        "role": user.role,
-                        "profile_image_url": user.profile_image_url,
-                    }
-                else:
-                    raise HTTPException(500, detail=ERROR_MESSAGES.CREATE_USER_ERROR)
-            except Exception as err:
-                raise HTTPException(500, detail=ERROR_MESSAGES.DEFAULT(err))
+                        return {
+                            "token": token,
+                            "token_type": "Bearer",
+                            "id": user.id,
+                            "email": user.email,
+                            "name": user.name,
+                            "role": user.role,
+                            "profile_image_url": user.profile_image_url,
+                        }
+                    else:
+                        raise HTTPException(
+                            500, detail=ERROR_MESSAGES.CREATE_USER_ERROR
+                        )
+                except Exception as err:
+                    raise HTTPException(500, detail=ERROR_MESSAGES.DEFAULT(err))
+            else:
+                raise HTTPException(400, detail=ERROR_MESSAGES.EMAIL_TAKEN)
         else:
-            raise HTTPException(400, detail=ERROR_MESSAGES.EMAIL_TAKEN)
+            raise HTTPException(400, detail=ERROR_MESSAGES.INVALID_EMAIL_FORMAT)
     else:
         raise HTTPException(400, detail=ERROR_MESSAGES.ACCESS_PROHIBITED)
 
diff --git a/backend/constants.py b/backend/constants.py
index 761507f2..ec3ce337 100644
--- a/backend/constants.py
+++ b/backend/constants.py
@@ -21,6 +21,7 @@ class ERROR_MESSAGES(str, Enum):
         "Your session has expired or the token is invalid. Please sign in again."
     )
     INVALID_CRED = "The email or password provided is incorrect. Please check for typos and try logging in again."
+    INVALID_EMAIL_FORMAT = "The email format you entered is invalid. Please double-check and make sure you're using a valid email address (e.g., yourname@example.com)."
     INVALID_PASSWORD = (
         "The password provided is incorrect. Please check for typos and try again."
     )
diff --git a/backend/utils/misc.py b/backend/utils/misc.py
index c6508487..5635c57a 100644
--- a/backend/utils/misc.py
+++ b/backend/utils/misc.py
@@ -1,4 +1,5 @@
 import hashlib
+import re
 
 
 def get_gravatar_url(email):
@@ -21,3 +22,9 @@ def calculate_sha256(file):
     for chunk in iter(lambda: file.read(8192), b""):
         sha256.update(chunk)
     return sha256.hexdigest()
+
+
+def validate_email_format(email: str) -> bool:
+    if not re.match(r"[^@]+@[^@]+\.[^@]+", email):
+        return False
+    return True

From 7bc0c09b25e27baf06d3956a46b47bdb7edc5f0c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 16:48:10 -0800
Subject: [PATCH 14/32] fix: openai issue

---
 backend/apps/web/main.py             | 12 ++++++--
 backend/apps/web/routers/configs.py  | 41 ++++++++++++++++++++++++++++
 src/lib/apis/configs/index.ts        | 31 +++++++++++++++++++++
 src/routes/(app)/+page.svelte        | 31 +++++++++++++--------
 src/routes/(app)/c/[id]/+page.svelte | 14 +++++-----
 5 files changed, 108 insertions(+), 21 deletions(-)
 create mode 100644 backend/apps/web/routers/configs.py
 create mode 100644 src/lib/apis/configs/index.ts

diff --git a/backend/apps/web/main.py b/backend/apps/web/main.py
index f62857b7..078ae2a3 100644
--- a/backend/apps/web/main.py
+++ b/backend/apps/web/main.py
@@ -1,7 +1,7 @@
 from fastapi import FastAPI, Depends
 from fastapi.routing import APIRoute
 from fastapi.middleware.cors import CORSMiddleware
-from apps.web.routers import auths, users, chats, modelfiles, utils
+from apps.web.routers import auths, users, chats, modelfiles, configs, utils
 from config import WEBUI_VERSION, WEBUI_AUTH
 
 app = FastAPI()
@@ -9,6 +9,7 @@ app = FastAPI()
 origins = ["*"]
 
 app.state.ENABLE_SIGNUP = True
+app.state.DEFAULT_MODELS = "llava:13b"
 
 app.add_middleware(
     CORSMiddleware,
@@ -19,13 +20,18 @@ app.add_middleware(
 )
 
 app.include_router(auths.router, prefix="/auths", tags=["auths"])
-
 app.include_router(users.router, prefix="/users", tags=["users"])
 app.include_router(chats.router, prefix="/chats", tags=["chats"])
 app.include_router(modelfiles.router, prefix="/modelfiles", tags=["modelfiles"])
+app.include_router(configs.router, prefix="/configs", tags=["configs"])
 app.include_router(utils.router, prefix="/utils", tags=["utils"])
 
 
 @app.get("/")
 async def get_status():
-    return {"status": True, "version": WEBUI_VERSION, "auth": WEBUI_AUTH}
+    return {
+        "status": True,
+        "version": WEBUI_VERSION,
+        "auth": WEBUI_AUTH,
+        "default_models": app.state.DEFAULT_MODELS,
+    }
diff --git a/backend/apps/web/routers/configs.py b/backend/apps/web/routers/configs.py
new file mode 100644
index 00000000..b57fae3d
--- /dev/null
+++ b/backend/apps/web/routers/configs.py
@@ -0,0 +1,41 @@
+from fastapi import Response, Request
+from fastapi import Depends, FastAPI, HTTPException, status
+from datetime import datetime, timedelta
+from typing import List, Union
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+import time
+import uuid
+
+from apps.web.models.users import Users
+
+
+from utils.utils import get_password_hash, get_current_user, create_token
+from utils.misc import get_gravatar_url, validate_email_format
+from constants import ERROR_MESSAGES
+
+router = APIRouter()
+
+
+class SetDefaultModelsForm(BaseModel):
+    models: str
+
+
+############################
+# SetDefaultModels
+############################
+
+
+@router.post("/default/models", response_model=str)
+async def set_global_default_models(
+    request: Request, form_data: SetDefaultModelsForm, user=Depends(get_current_user)
+):
+    if user.role == "admin":
+        request.app.state.DEFAULT_MODELS = form_data.models
+        return request.app.state.DEFAULT_MODELS
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
diff --git a/src/lib/apis/configs/index.ts b/src/lib/apis/configs/index.ts
new file mode 100644
index 00000000..9762c41f
--- /dev/null
+++ b/src/lib/apis/configs/index.ts
@@ -0,0 +1,31 @@
+import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+export const setDefaultModels = async (token: string, models: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/default/models`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			models: models
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 4e3347ff..30920140 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -6,7 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	import { models, modelfiles, user, settings, chats, chatId } from '$lib/stores';
+	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
 	import { OLLAMA_API_BASE_URL } from '$lib/constants';
 
 	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
@@ -90,9 +90,18 @@
 			messages: {},
 			currentId: null
 		};
-		selectedModels = $page.url.searchParams.get('models')
-			? $page.url.searchParams.get('models')?.split(',')
-			: $settings.models ?? [''];
+
+		console.log($config);
+
+		if ($page.url.searchParams.get('models')) {
+			selectedModels = $page.url.searchParams.get('models')?.split(',');
+		} else if ($settings?.models) {
+			selectedModels = $settings?.models;
+		} else if ($config?.default_models) {
+			selectedModels = $config?.default_models.split(',');
+		} else {
+			selectedModels = [''];
+		}
 
 		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 		settings.set({
@@ -383,13 +392,13 @@
 										  }
 										: { content: message.content })
 								})),
-							seed: $settings.options.seed ?? undefined,
-							stop: $settings.options.stop ?? undefined,
-							temperature: $settings.options.temperature ?? undefined,
-							top_p: $settings.options.top_p ?? undefined,
-							num_ctx: $settings.options.num_ctx ?? undefined,
-							frequency_penalty: $settings.options.repeat_penalty ?? undefined,
-							max_tokens: $settings.options.num_predict ?? undefined
+							seed: $settings?.options?.seed ?? undefined,
+							stop: $settings?.options?.stop ?? undefined,
+							temperature: $settings?.options?.temperature ?? undefined,
+							top_p: $settings?.options?.top_p ?? undefined,
+							num_ctx: $settings?.options?.num_ctx ?? undefined,
+							frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+							max_tokens: $settings?.options?.num_predict ?? undefined
 						})
 					}
 				).catch((err) => {
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 62c271bf..e3a70ca2 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -409,13 +409,13 @@
 										  }
 										: { content: message.content })
 								})),
-							seed: $settings.options.seed ?? undefined,
-							stop: $settings.options.stop ?? undefined,
-							temperature: $settings.options.temperature ?? undefined,
-							top_p: $settings.options.top_p ?? undefined,
-							num_ctx: $settings.options.num_ctx ?? undefined,
-							frequency_penalty: $settings.options.repeat_penalty ?? undefined,
-							max_tokens: $settings.options.num_predict ?? undefined
+							seed: $settings?.options?.seed ?? undefined,
+							stop: $settings?.options?.stop ?? undefined,
+							temperature: $settings?.options?.temperature ?? undefined,
+							top_p: $settings?.options?.top_p ?? undefined,
+							num_ctx: $settings?.options?.num_ctx ?? undefined,
+							frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
+							max_tokens: $settings?.options?.num_predict ?? undefined
 						})
 					}
 				).catch((err) => {

From 09e1458d592799df798819ed3cf294357c934884 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 16:48:49 -0800
Subject: [PATCH 15/32] fix: default models value should be None

---
 backend/apps/web/main.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/apps/web/main.py b/backend/apps/web/main.py
index 078ae2a3..23b39224 100644
--- a/backend/apps/web/main.py
+++ b/backend/apps/web/main.py
@@ -9,7 +9,7 @@ app = FastAPI()
 origins = ["*"]
 
 app.state.ENABLE_SIGNUP = True
-app.state.DEFAULT_MODELS = "llava:13b"
+app.state.DEFAULT_MODELS = None
 
 app.add_middleware(
     CORSMiddleware,

From a60fbac8a5d63794068435f05a03d0f7931f1be7 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 17:08:35 -0800
Subject: [PATCH 16/32] feat: set title auto generate model support

---
 src/lib/components/chat/SettingsModal.svelte | 72 ++++++++++++++++----
 src/routes/(app)/+page.svelte                |  2 +-
 2 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index a220bd4e..84e95d39 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -74,17 +74,20 @@
 
 	let deleteModelTag = '';
 
+	// External
+
+	let OPENAI_API_KEY = '';
+	let OPENAI_API_BASE_URL = '';
+
 	// Addons
 	let titleAutoGenerate = true;
 	let speechAutoSend = false;
 	let responseAutoCopy = false;
 
 	let gravatarEmail = '';
-	let OPENAI_API_KEY = '';
-	let OPENAI_API_BASE_URL = '';
+	let titleAutoGenerateModel = '';
 
 	// Chats
-
 	let importFiles;
 	let showDeleteConfirm = false;
 
@@ -656,13 +659,14 @@
 		options = { ...options, ...settings.options };
 		options.stop = (settings?.options?.stop ?? []).join(',');
 
+		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
+		OPENAI_API_BASE_URL = settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1';
+
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		speechAutoSend = settings.speechAutoSend ?? false;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
-
+		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 		gravatarEmail = settings.gravatarEmail ?? '';
-		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
-		OPENAI_API_BASE_URL = settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1';
 
 		authEnabled = settings.authHeader !== undefined ? true : false;
 		if (authEnabled) {
@@ -1548,10 +1552,6 @@
 					<form
 						class="flex flex-col h-full justify-between space-y-3 text-sm"
 						on:submit|preventDefault={() => {
-							saveSettings({
-								gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
-								gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined
-							});
 							show = false;
 						}}
 					>
@@ -1561,7 +1561,7 @@
 
 								<div>
 									<div class=" py-0.5 flex w-full justify-between">
-										<div class=" self-center text-xs font-medium">Title Auto Generation</div>
+										<div class=" self-center text-xs font-medium">Title Auto-Generation</div>
 
 										<button
 											class="p-1 px-3 text-xs flex rounded transition"
@@ -1623,6 +1623,54 @@
 							</div>
 
 							<hr class=" dark:border-gray-700" />
+
+							<div>
+								<div class=" mb-2.5 text-sm font-medium">Set Title Auto-Generation Model</div>
+								<div class="flex w-full">
+									<div class="flex-1 mr-2">
+										<select
+											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
+											bind:value={titleAutoGenerateModel}
+											placeholder="Select a model"
+										>
+											<option value="" selected>Default</option>
+											{#each $models.filter((m) => m.size != null) as model}
+												<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
+													>{model.name +
+														' (' +
+														(model.size / 1024 ** 3).toFixed(1) +
+														' GB)'}</option
+												>
+											{/each}
+										</select>
+									</div>
+									<button
+										class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
+										on:click={() => {
+											saveSettings({
+												titleAutoGenerateModel:
+													titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined
+											});
+										}}
+										type="button"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="w-3.5 h-3.5"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+								</div>
+							</div>
+
+							<!-- <hr class=" dark:border-gray-700" />
 							<div>
 								<div class=" mb-2.5 text-sm font-medium">
 									Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
@@ -1645,7 +1693,7 @@
 										target="_blank">Gravatar.</a
 									>
 								</div>
-							</div>
+							</div> -->
 						</div>
 
 						<div class="flex justify-end pt-3 text-sm font-medium">
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 30920140..9638861b 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -597,7 +597,7 @@
 			const title = await generateTitle(
 				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
 				localStorage.token,
-				selectedModels[0],
+				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);
 

From dfde45d365613766fb29b563eacfc1ac77636bf9 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 17:26:19 -0800
Subject: [PATCH 17/32] feat: set default models globally

---
 src/lib/apis/configs/index.ts                |  2 +-
 src/lib/components/chat/ModelSelector.svelte | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/apis/configs/index.ts b/src/lib/apis/configs/index.ts
index 9762c41f..76256f4d 100644
--- a/src/lib/apis/configs/index.ts
+++ b/src/lib/apis/configs/index.ts
@@ -4,7 +4,7 @@ export const setDefaultModels = async (token: string, models: string) => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/configs/default/models`, {
-		method: 'GET',
+		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
 			Authorization: `Bearer ${token}`
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 9e7ff4dd..47afbbe1 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { models, showSettings, settings } from '$lib/stores';
+	import { setDefaultModels } from '$lib/apis/configs';
+	import { models, showSettings, settings, user } from '$lib/stores';
 	import { onMount, tick } from 'svelte';
 	import toast from 'svelte-french-toast';
 
 	export let selectedModels = [''];
 	export let disabled = false;
 
-	const saveDefaultModel = () => {
+	const saveDefaultModel = async () => {
 		const hasEmptyModel = selectedModels.filter((it) => it === '');
 		if (hasEmptyModel.length) {
 			toast.error('Choose a model before saving...');
@@ -14,6 +15,11 @@
 		}
 		settings.set({ ...$settings, models: selectedModels });
 		localStorage.setItem('settings', JSON.stringify($settings));
+
+		if ($user.role === 'admin') {
+			console.log('admin');
+			await setDefaultModels(localStorage.token, selectedModels.join(','));
+		}
 		toast.success('Default model updated');
 	};
 

From 5133ec75e38e9bbec2d215b6c256e231630214c4 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 17:30:09 -0800
Subject: [PATCH 18/32] fix: log message

---
 src/lib/components/chat/ModelSelector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 47afbbe1..2ff638a6 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -17,7 +17,7 @@
 		localStorage.setItem('settings', JSON.stringify($settings));
 
 		if ($user.role === 'admin') {
-			console.log('admin');
+			console.log('setting default models globally');
 			await setDefaultModels(localStorage.token, selectedModels.join(','));
 		}
 		toast.success('Default model updated');

From d7d4d44489df96491a38ce88f2184c2b6a24cba0 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 17:31:57 -0800
Subject: [PATCH 19/32] feat: disable users from accesing models setting

---
 src/lib/components/chat/SettingsModal.svelte | 52 ++++++++++----------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 84e95d39..8ba3b1e0 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -761,31 +761,33 @@
 					<div class=" self-center">Advanced</div>
 				</button>
 
-				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
-					'models'
-						? 'bg-gray-200 dark:bg-gray-700'
-						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
-					on:click={() => {
-						selectedTab = 'models';
-					}}
-				>
-					<div class=" self-center mr-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center">Models</div>
-				</button>
+				{#if $user?.role === 'admin'}
+					<button
+						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+						'models'
+							? 'bg-gray-200 dark:bg-gray-700'
+							: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
+						on:click={() => {
+							selectedTab = 'models';
+						}}
+					>
+						<div class=" self-center mr-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+						<div class=" self-center">Models</div>
+					</button>
+				{/if}
 
 				<button
 					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===

From 22c210e8f67e996e2816835786393d298e69db6e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 20:41:37 -0800
Subject: [PATCH 20/32] feat: custom prompt support

---
 backend/apps/web/models/modelfiles.py         |   2 +-
 backend/apps/web/models/prompts.py            | 117 ++++
 .../chat/MessageInput/PromptCommands.svelte   | 222 ++------
 src/lib/components/layout/Sidebar.svelte      |  30 +-
 src/lib/stores/index.ts                       |   3 +
 src/routes/(app)/modelfiles/+page.svelte      |  26 +
 src/routes/(app)/prompts/+page.svelte         | 396 +++++++++++++
 src/routes/(app)/prompts/create/+page.svelte  | 224 ++++++++
 src/routes/(app)/prompts/edit/+page.svelte    | 520 ++++++++++++++++++
 9 files changed, 1368 insertions(+), 172 deletions(-)
 create mode 100644 backend/apps/web/models/prompts.py
 create mode 100644 src/routes/(app)/prompts/+page.svelte
 create mode 100644 src/routes/(app)/prompts/create/+page.svelte
 create mode 100644 src/routes/(app)/prompts/edit/+page.svelte

diff --git a/backend/apps/web/models/modelfiles.py b/backend/apps/web/models/modelfiles.py
index 4d8202db..8231d8df 100644
--- a/backend/apps/web/models/modelfiles.py
+++ b/backend/apps/web/models/modelfiles.py
@@ -12,7 +12,7 @@ from apps.web.internal.db import DB
 import json
 
 ####################
-# User DB Schema
+# Modelfile DB Schema
 ####################
 
 
diff --git a/backend/apps/web/models/prompts.py b/backend/apps/web/models/prompts.py
new file mode 100644
index 00000000..bb0710b6
--- /dev/null
+++ b/backend/apps/web/models/prompts.py
@@ -0,0 +1,117 @@
+from pydantic import BaseModel
+from peewee import *
+from playhouse.shortcuts import model_to_dict
+from typing import List, Union, Optional
+import time
+
+from utils.utils import decode_token
+from utils.misc import get_gravatar_url
+
+from apps.web.internal.db import DB
+
+import json
+
+####################
+# Prompts DB Schema
+####################
+
+
+class Prompt(Model):
+    command = CharField(unique=True)
+    user_id = CharField()
+    title = CharField()
+    content = TextField()
+    timestamp = DateField()
+
+    class Meta:
+        database = DB
+
+
+class PromptModel(BaseModel):
+    command: str
+    user_id: str
+    title: str
+    content: str
+    timestamp: int  # timestamp in epoch
+
+
+####################
+# Forms
+####################
+
+
+class PromptForm(BaseModel):
+    command: str
+    title: str
+    content: str
+
+
+class PromptsTable:
+    def __init__(self, db):
+        self.db = db
+        self.db.create_tables([Prompt])
+
+    def insert_new_prompt(
+        self, user_id: str, form_data: PromptForm
+    ) -> Optional[PromptModel]:
+        prompt = PromptModel(
+            **{
+                "user_id": user_id,
+                "command": form_data.command,
+                "title": form_data.title,
+                "content": form_data.content,
+                "timestamp": int(time.time()),
+            }
+        )
+
+        try:
+            result = Prompt.create(**prompt.model_dump())
+            if result:
+                return prompt
+            else:
+                return None
+        except:
+            return None
+
+    def get_prompt_by_command(self, command: str) -> Optional[PromptModel]:
+        try:
+            prompt = Prompt.get(Prompt.command == command)
+            return PromptModel(**model_to_dict(prompt))
+        except:
+            return None
+
+    def get_prompts(self) -> List[PromptModel]:
+        return [
+            PromptModel(**model_to_dict(prompt))
+            for prompt in Prompt.select()
+            # .limit(limit).offset(skip)
+        ]
+
+    def update_prompt_by_command(
+        self, command: str, form_data: PromptForm
+    ) -> Optional[PromptModel]:
+        try:
+            query = Prompt.update(
+                title=form_data.title,
+                content=form_data.content,
+                timestamp=int(time.time()),
+            ).where(Prompt.command == command)
+
+            query.execute()
+
+            prompt = Prompt.get(Prompt.command == command)
+            return PromptModel(**model_to_dict(prompt))
+        except:
+            return None
+
+    def delete_prompt_by_command(self, command: str) -> bool:
+        try:
+            query = Prompt.delete().where((Prompt.command == command))
+            query.execute()  # Remove the rows, return number of rows removed.
+
+            return True
+        except:
+            return False
+
+
+Prompts = PromptsTable(DB)
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 2b41bac0..865dc36a 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -1,158 +1,13 @@
 <script lang="ts">
+	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
 	import { tick } from 'svelte';
 
 	export let prompt = '';
-
 	let selectedCommandIdx = 0;
-
-	let promptCommands = [
-		{
-			command: '/article',
-			title: 'Article Generator',
-			content: `Write an article about [topic]
-
-include relevant statistics (add the links of the sources you use) and consider diverse perspectives. Write it in a [X_tone] and mention the source links in the end.`
-		},
-		{
-			command: '/backlink',
-
-			title: 'Backlink Outreach Email',
-			content: `Write a link-exchange outreach email on behalf of [your name] from [your_company] to ask for a backlink from their [website_url] to [your website url].`
-		},
-		{
-			command: '/faq',
-
-			title: 'FAQ Generator',
-			content: `Create a list of [10] frequently asked questions about [keyword] and provide answers for each one of them considering the SERP and rich result guidelines.`
-		},
-		{
-			command: '/headline',
-
-			title: 'Headline Generator',
-			content: `Generate 10 attention-grabbing headlines for an article about [your topic]`
-		},
-		{
-			command: '/product',
-
-			title: 'Product Description',
-			content: `Craft an irresistible product description that highlights the benefits of [your product]`
-		},
-		{
-			command: '/seo',
-
-			title: 'SEO Content Brief',
-			content: `Create a SEO content brief for [keyword].`
-		},
-		{
-			command: '/seo-ideas',
-
-			title: 'SEO Keyword Ideas',
-			content: `Generate a list of 20 keyword ideas on [topic].
-
-Cluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.`
-		},
-		{
-			command: '/summary',
-
-			title: 'Short Summary',
-			content: `Write a summary in 50 words that summarizes [topic or keyword].`
-		},
-		{
-			command: '/email-subject',
-
-			title: 'Email Subject Line',
-			content: `Develop [5] subject lines for a cold email offering your [product or service] to a potential client.`
-		},
-		{
-			command: '/facebook-ads',
-
-			title: 'Facebook Ads',
-			content: `Create 3 variations of effective ad copy to promote [product] for [audience].
-
-Make sure they are [persuasive/playful/emotional] and mention these benefits:
-
-[Benefit 1]
-
-[Benefit 2]
-
-[Benefit 3]
-
-Finish with a call to action saying [CTA].
-
-Add 3 emojis to it.`
-		},
-		{
-			command: '/google-ads',
-
-			title: 'Google Ads',
-			content: `Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].
-
-The headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.`
-		},
-		{
-			command: '/insta-caption',
-
-			title: 'Instagram Caption',
-			content: `Write 5 variations of Instagram captions for [product].
-
-Use friendly, human-like language that appeals to [target audience].
-
-Emphasize the unique qualities of [product],
-
-use ample emojis, and don't sound too promotional.`
-		},
-		{
-			command: '/linkedin-post',
-
-			title: 'LinkedIn Post',
-			content: `Create a narrative Linkedin post using immersive writing about [topic].
-
-Details:
-
-[give details in bullet point format]
-
-Use a mix of short and long sentences. Make it punchy and dramatic.`
-		},
-		{
-			command: '/youtube-desc',
-
-			title: 'YouTube Video',
-			content: `Write a 100-word YouTube video description that compels [audience]
-
-to watch a video on [topic]
-
-and mentions the following keywords
-
-[keyword 1]
-
-[keyword 2]
-
-[keyword 3].`
-		},
-		{
-			command: '/seo-meta',
-
-			title: 'SEO Meta',
-			content: `Suggest a meta description for the content above, make it user-friendly and with a call to action, include the keyword [keyword].`
-		},
-		{
-			command: '/eli5',
-
-			title: 'ELI5',
-			content: `You are an expert teacher with the ability to explain complex topics in simpler terms. Explain the concept of [topic] in simple terms, so that my [grade level/subject] class can understand [this concept/specific example]?`
-		},
-		{
-			command: '/emoji-translate',
-
-			title: 'Emoji Translation',
-			content: `You are an emoji expert. Using only emojis, translate the following text to emojis. [insert numbered sentences].`
-		}
-	];
-
 	let filteredPromptCommands = [];
 
-	$: filteredPromptCommands = promptCommands
+	$: filteredPromptCommands = $prompts
 		.filter((p) => p.command.includes(prompt))
 		.sort((a, b) => a.title.localeCompare(b.title));
 
@@ -197,30 +52,57 @@ and mentions the following keywords
 			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
 				<div class=" text-lg font-medium mt-2">/</div>
 			</div>
-			<div class=" max-h-60 overflow-y-auto bg-white w-full p-2 rounded-r-lg space-y-0.5">
-				{#each filteredPromptCommands as command, commandIdx}
-					<button
-						class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
-							? ' bg-gray-100 selected-command-option-button'
-							: ''}"
-						type="button"
-						on:click={() => {
-							confirmCommand(command);
-						}}
-						on:mousemove={() => {
-							selectedCommandIdx = commandIdx;
-						}}
-						on:focus={() => {}}
-					>
-						<div class=" font-medium text-black">
-							{command.command}
-						</div>
 
-						<div class=" text-xs text-gray-600">
-							{command.title}
-						</div>
-					</button>
-				{/each}
+			<div class="max-h-60 flex flex-col w-full">
+				<div class=" overflow-y-auto bg-white p-2 rounded-r-lg space-y-0.5">
+					{#each filteredPromptCommands as command, commandIdx}
+						<button
+							class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
+								? ' bg-gray-100 selected-command-option-button'
+								: ''}"
+							type="button"
+							on:click={() => {
+								confirmCommand(command);
+							}}
+							on:mousemove={() => {
+								selectedCommandIdx = commandIdx;
+							}}
+							on:focus={() => {}}
+						>
+							<div class=" font-medium text-black">
+								{command.command}
+							</div>
+
+							<div class=" text-xs text-gray-600">
+								{command.title}
+							</div>
+						</button>
+					{/each}
+				</div>
+
+				<div class=" px-2 py-0.5 text-xs text-gray-600 flex items-center space-x-1">
+					<div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="w-3 h-3"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+							/>
+						</svg>
+					</div>
+
+					<div class="line-clamp-1">
+						Tip: Update multiple prompt variables by pressing the tab key in the chat input
+						consecutively after each replacement.
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 76bdf7e5..b0eb35b2 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -100,7 +100,7 @@
 		</div>
 
 		{#if $user?.role === 'admin'}
-			<div class="px-2.5 flex justify-center my-1">
+			<div class="px-2.5 flex justify-center mt-1">
 				<button
 					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
 					on:click={async () => {
@@ -129,6 +129,34 @@
 					</div>
 				</button>
 			</div>
+
+			<div class="px-2.5 flex justify-center mb-1">
+				<button
+					class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
+					on:click={async () => {
+						goto('/prompts');
+					}}
+				>
+					<div class="self-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+
+					<div class="flex self-center">
+						<div class=" self-center font-medium text-sm">Prompts</div>
+					</div>
+				</button>
+			</div>
 		{/if}
 
 		<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 66d1c088..55c83b25 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -6,10 +6,13 @@ export const user = writable(undefined);
 
 // Frontend
 export const theme = writable('dark');
+
 export const chatId = writable('');
+
 export const chats = writable([]);
 export const models = writable([]);
 export const modelfiles = writable([]);
+export const prompts = writable([]);
 
 export const settings = writable({});
 export const showSettings = writable(false);
diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index d3c0b098..f9619fe2 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -254,6 +254,32 @@
 							</svg>
 						</div>
 					</button>
+
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							// document.getElementById('modelfiles-import-input')?.click();
+
+							saveModelfiles($modelfiles);
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Export Modelfiles</div>
+
+						<div class=" self-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-3.5 h-3.5"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</button>
 				</div>
 
 				{#if localModelfiles.length > 0}
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
new file mode 100644
index 00000000..60d53c35
--- /dev/null
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -0,0 +1,396 @@
+<script lang="ts">
+	import toast from 'svelte-french-toast';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { onMount } from 'svelte';
+	import { prompts } from '$lib/stores';
+
+	let query = '';
+
+	let defaultPrompts = [
+		{
+			command: '/article',
+			title: 'Article Generator',
+			content: `Write an article about [topic]
+
+include relevant statistics (add the links of the sources you use) and consider diverse perspectives. Write it in a [X_tone] and mention the source links in the end.`
+		},
+		{
+			command: '/backlink',
+
+			title: 'Backlink Outreach Email',
+			content: `Write a link-exchange outreach email on behalf of [your name] from [your_company] to ask for a backlink from their [website_url] to [your website url].`
+		},
+		{
+			command: '/faq',
+
+			title: 'FAQ Generator',
+			content: `Create a list of [10] frequently asked questions about [keyword] and provide answers for each one of them considering the SERP and rich result guidelines.`
+		},
+		{
+			command: '/headline',
+
+			title: 'Headline Generator',
+			content: `Generate 10 attention-grabbing headlines for an article about [your topic]`
+		},
+		{
+			command: '/product',
+
+			title: 'Product Description',
+			content: `Craft an irresistible product description that highlights the benefits of [your product]`
+		},
+		{
+			command: '/seo',
+
+			title: 'SEO Content Brief',
+			content: `Create a SEO content brief for [keyword].`
+		},
+		{
+			command: '/seo-ideas',
+
+			title: 'SEO Keyword Ideas',
+			content: `Generate a list of 20 keyword ideas on [topic].
+
+Cluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.`
+		},
+		{
+			command: '/summary',
+
+			title: 'Short Summary',
+			content: `Write a summary in 50 words that summarizes [topic or keyword].`
+		},
+		{
+			command: '/email-subject',
+
+			title: 'Email Subject Line',
+			content: `Develop [5] subject lines for a cold email offering your [product or service] to a potential client.`
+		},
+		{
+			command: '/facebook-ads',
+
+			title: 'Facebook Ads',
+			content: `Create 3 variations of effective ad copy to promote [product] for [audience].
+
+Make sure they are [persuasive/playful/emotional] and mention these benefits:
+
+[Benefit 1]
+
+[Benefit 2]
+
+[Benefit 3]
+
+Finish with a call to action saying [CTA].
+
+Add 3 emojis to it.`
+		},
+		{
+			command: '/google-ads',
+
+			title: 'Google Ads',
+			content: `Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].
+
+The headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.`
+		},
+		{
+			command: '/insta-caption',
+
+			title: 'Instagram Caption',
+			content: `Write 5 variations of Instagram captions for [product].
+
+Use friendly, human-like language that appeals to [target audience].
+
+Emphasize the unique qualities of [product],
+
+use ample emojis, and don't sound too promotional.`
+		},
+		{
+			command: '/linkedin-post',
+
+			title: 'LinkedIn Post',
+			content: `Create a narrative Linkedin post using immersive writing about [topic].
+
+Details:
+
+[give details in bullet point format]
+
+Use a mix of short and long sentences. Make it punchy and dramatic.`
+		},
+		{
+			command: '/youtube-desc',
+
+			title: 'YouTube Video',
+			content: `Write a 100-word YouTube video description that compels [audience]
+
+to watch a video on [topic]
+
+and mentions the following keywords
+
+[keyword 1]
+
+[keyword 2]
+
+[keyword 3].`
+		},
+		{
+			command: '/seo-meta',
+
+			title: 'SEO Meta',
+			content: `Suggest a meta description for the content above, make it user-friendly and with a call to action, include the keyword [keyword].`
+		},
+		{
+			command: '/eli5',
+
+			title: 'ELI5',
+			content: `You are an expert teacher with the ability to explain complex topics in simpler terms. Explain the concept of [topic] in simple terms, so that my [grade level/subject] class can understand [this concept/specific example]?`
+		},
+		{
+			command: '/emoji-translate',
+
+			title: 'Emoji Translation',
+			content: `You are an emoji expert. Using only emojis, translate the following text to emojis. [insert numbered sentences].`
+		}
+	];
+
+	const loadDefaultPrompts = () => {
+		prompts.set(defaultPrompts);
+	};
+</script>
+
+<div class="min-h-screen w-full flex justify-center dark:text-white">
+	<div class=" py-2.5 flex flex-col justify-between w-full">
+		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
+			<div class="mb-6 flex justify-between items-center">
+				<div class=" text-2xl font-semibold self-center">My Prompts</div>
+			</div>
+
+			<div class=" flex w-full space-x-2">
+				<div class="flex flex-1">
+					<div class=" self-center ml-1 mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<input
+						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+						bind:value={query}
+						placeholder="Search Prompt"
+					/>
+				</div>
+
+				<div>
+					<a
+						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+						href="/prompts/create"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			{#if $prompts.length === 0}
+				<div />
+			{:else}
+				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
+					<hr class=" dark:border-gray-700 my-2.5" />
+					<div class=" flex space-x-4 cursor-pointer w-full mb-3">
+						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
+							<div class=" flex-1 self-center">
+								<div class=" font-bold">{prompt.command}</div>
+								<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
+									{prompt.title}
+								</div>
+							</div>
+						</div>
+						<div class="flex flex-row space-x-1 self-center">
+							<a
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}
+							>
+								<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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+									/>
+								</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={() => {
+								shareModelfile(modelfile);
+							}}
+						>
+							<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="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+								/>
+							</svg>
+						</button> -->
+
+							<button
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								on:click={() => {
+									// deleteModelfile(modelfile.tagName);
+								}}
+							>
+								<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+				{/each}
+			{/if}
+
+			<hr class=" dark:border-gray-700 my-2.5" />
+
+			<div class=" flex justify-between w-full mb-3">
+				<div class="flex space-x-2">
+					<!-- <button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							// document.getElementById('modelfiles-import-input')?.click();
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Import Prompts</div>
+
+						<div class=" self-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</button> -->
+
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							// document.getElementById('modelfiles-import-input')?.click();
+							let blob = new Blob([JSON.stringify($prompts)], {
+								type: 'application/json'
+							});
+							saveAs(blob, `prompts-export-${Date.now()}.json`);
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Export Prompts</div>
+
+						<div class=" self-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</button>
+
+					<!-- <button
+						on:click={() => {
+							loadDefaultPrompts();
+						}}
+					>
+						dd
+					</button> -->
+				</div>
+			</div>
+
+			<div class=" my-16">
+				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>
+
+				<a
+					class=" flex space-x-4 cursor-pointer w-full mb-3"
+					href="https://ollamahub.com/"
+					target="_blank"
+				>
+					<div class=" self-center w-10">
+						<div
+							class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="currentColor"
+								class="w-6"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</div>
+
+					<div class=" self-center">
+						<div class=" font-bold">Discover a prompt</div>
+						<div class=" text-sm">Discover, download, and explore custom Prompts</div>
+					</div>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
new file mode 100644
index 00000000..5cdf5940
--- /dev/null
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -0,0 +1,224 @@
+<script>
+	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
+	import { onMount, tick } from 'svelte';
+	import toast from 'svelte-french-toast';
+
+	let loading = false;
+
+	// ///////////
+	// Modelfile
+	// ///////////
+
+	let title = '';
+	let command = '';
+	let content = '';
+
+	$: command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
+
+	const submitHandler = async () => {
+		console.log(validateCommandString(command));
+		if (validateCommandString(command)) {
+			console.log('valid');
+			console.log('submit');
+		} else {
+			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
+		}
+	};
+
+	const validateCommandString = (inputString) => {
+		// Regular expression to match only alphanumeric characters and hyphen
+		const regex = /^[a-zA-Z0-9-]+$/;
+
+		// Test the input string against the regular expression
+		return regex.test(inputString);
+	};
+
+	onMount(() => {
+		window.addEventListener('message', async (event) => {
+			if (
+				!['https://ollamahub.com', 'https://www.ollamahub.com', 'http://localhost:5173'].includes(
+					event.origin
+				)
+			)
+				return;
+			const modelfile = JSON.parse(event.data);
+			console.log(modelfile);
+
+			imageUrl = modelfile.imageUrl;
+			title = modelfile.title;
+			await tick();
+			tagName = `${modelfile.user.username === 'hub' ? '' : `hub/`}${modelfile.user.username}/${
+				modelfile.tagName
+			}`;
+			desc = modelfile.desc;
+			content = modelfile.content;
+			suggestions =
+				modelfile.suggestionPrompts.length != 0
+					? modelfile.suggestionPrompts
+					: [
+							{
+								content: ''
+							}
+					  ];
+
+			modelfileCreator = {
+				username: modelfile.user.username,
+				name: modelfile.user.name
+			};
+			for (const category of modelfile.categories) {
+				categories[category.toLowerCase()] = true;
+			}
+		});
+
+		if (window.opener ?? false) {
+			window.opener.postMessage('loaded', '*');
+		}
+	});
+</script>
+
+<div class="min-h-screen w-full flex justify-center dark:text-white">
+	<div class=" py-2.5 flex flex-col justify-between w-full">
+		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
+			<div class=" text-2xl font-semibold mb-6">My Prompts</div>
+
+			<button
+				class="flex space-x-1"
+				on:click={() => {
+					history.back();
+				}}
+			>
+				<div class=" self-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-4 h-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center font-medium text-sm">Back</div>
+			</button>
+			<hr class="my-3 dark:border-gray-700" />
+
+			<form
+				class="flex flex-col"
+				on:submit|preventDefault={() => {
+					submitHandler();
+				}}
+			>
+				<div class="my-2">
+					<div class=" text-sm font-semibold mb-2">Title*</div>
+
+					<div>
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+							placeholder="Add a short title for this prompt"
+							bind:value={title}
+							required
+						/>
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class=" text-sm font-semibold mb-2">Command*</div>
+
+					<div class="flex items-center mb-1">
+						<div
+							class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+						>
+							/
+						</div>
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-r-lg"
+							placeholder="short-summary"
+							bind:value={command}
+							required
+						/>
+					</div>
+
+					<div class="text-xs text-gray-400 dark:text-gray-500">
+						Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
+							>alphanumeric characters and hyphens</span
+						>
+						are allowed; Activate this command by typing "<span
+							class=" text-gray-600 dark:text-gray-300 font-medium"
+						>
+							/{command}
+						</span>" to chat input.
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class="flex w-full justify-between">
+						<div class=" self-center text-sm font-semibold">Prompt</div>
+					</div>
+
+					<div class="mt-2">
+						<div class=" text-xs font-semibold mb-2">Content*</div>
+
+						<div>
+							<textarea
+								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+								placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
+								rows="6"
+								bind:value={content}
+								required
+							/>
+						</div>
+
+						<div class="text-xs text-gray-400 dark:text-gray-500">
+							Format your variables using square brackets like this: <span
+								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
+							> . Remember to enclose them with '[' and ']'.
+						</div>
+					</div>
+				</div>
+
+				<div class="my-2 flex justify-end">
+					<button
+						class=" text-sm px-3 py-2 transition rounded-xl {loading
+							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+						type="submit"
+						disabled={loading}
+					>
+						<div class=" self-center font-medium">Save & Create</div>
+
+						{#if loading}
+							<div class="ml-1.5 self-center">
+								<svg
+									class=" w-4 h-4"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									xmlns="http://www.w3.org/2000/svg"
+									><style>
+										.spinner_ajPY {
+											transform-origin: center;
+											animation: spinner_AtaB 0.75s infinite linear;
+										}
+										@keyframes spinner_AtaB {
+											100% {
+												transform: rotate(360deg);
+											}
+										}
+									</style><path
+										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+										opacity=".25"
+									/><path
+										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+										class="spinner_ajPY"
+									/></svg
+								>
+							</div>
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(app)/prompts/edit/+page.svelte b/src/routes/(app)/prompts/edit/+page.svelte
new file mode 100644
index 00000000..11dec182
--- /dev/null
+++ b/src/routes/(app)/prompts/edit/+page.svelte
@@ -0,0 +1,520 @@
+<script>
+	import { v4 as uuidv4 } from 'uuid';
+	import { toast } from 'svelte-french-toast';
+	import { goto } from '$app/navigation';
+
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+
+	import { settings, user, config, modelfiles } from '$lib/stores';
+
+	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { splitStream } from '$lib/utils';
+
+	import { createModel } from '$lib/apis/ollama';
+	import { getModelfiles, updateModelfileByTagName } from '$lib/apis/modelfiles';
+
+	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
+
+	let loading = false;
+
+	let filesInputElement;
+	let inputFiles;
+	let imageUrl = null;
+	let digest = '';
+	let pullProgress = null;
+	let success = false;
+
+	let modelfile = null;
+	// ///////////
+	// Modelfile
+	// ///////////
+
+	let title = '';
+	let tagName = '';
+	let desc = '';
+
+	// Raw Mode
+	let content = '';
+
+	let suggestions = [
+		{
+			content: ''
+		}
+	];
+
+	let categories = {
+		character: false,
+		assistant: false,
+		writing: false,
+		productivity: false,
+		programming: false,
+		'data analysis': false,
+		lifestyle: false,
+		education: false,
+		business: false
+	};
+
+	onMount(() => {
+		tagName = $page.url.searchParams.get('tag');
+
+		if (tagName) {
+			modelfile = $modelfiles.filter((modelfile) => modelfile.tagName === tagName)[0];
+
+			console.log(modelfile);
+
+			imageUrl = modelfile.imageUrl;
+			title = modelfile.title;
+			desc = modelfile.desc;
+			content = modelfile.content;
+			suggestions =
+				modelfile.suggestionPrompts.length != 0
+					? modelfile.suggestionPrompts
+					: [
+							{
+								content: ''
+							}
+					  ];
+
+			for (const category of modelfile.categories) {
+				categories[category.toLowerCase()] = true;
+			}
+		} else {
+			goto('/modelfiles');
+		}
+	});
+
+	const updateModelfile = async (modelfile) => {
+		await updateModelfileByTagName(localStorage.token, modelfile.tagName, modelfile);
+		await modelfiles.set(await getModelfiles(localStorage.token));
+	};
+
+	const updateHandler = async () => {
+		loading = true;
+
+		if (Object.keys(categories).filter((category) => categories[category]).length == 0) {
+			toast.error(
+				'Uh-oh! It looks like you missed selecting a category. Please choose one to complete your modelfile.'
+			);
+		}
+
+		if (
+			title !== '' &&
+			desc !== '' &&
+			content !== '' &&
+			Object.keys(categories).filter((category) => categories[category]).length > 0
+		) {
+			const res = await createModel(
+				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
+				localStorage.token,
+				tagName,
+				content
+			);
+
+			if (res) {
+				const reader = res.body
+					.pipeThrough(new TextDecoderStream())
+					.pipeThrough(splitStream('\n'))
+					.getReader();
+
+				while (true) {
+					const { value, done } = await reader.read();
+					if (done) break;
+
+					try {
+						let lines = value.split('\n');
+
+						for (const line of lines) {
+							if (line !== '') {
+								console.log(line);
+								let data = JSON.parse(line);
+								console.log(data);
+
+								if (data.error) {
+									throw data.error;
+								}
+								if (data.detail) {
+									throw data.detail;
+								}
+
+								if (data.status) {
+									if (
+										!data.digest &&
+										!data.status.includes('writing') &&
+										!data.status.includes('sha256')
+									) {
+										toast.success(data.status);
+
+										if (data.status === 'success') {
+											success = true;
+										}
+									} else {
+										if (data.digest) {
+											digest = data.digest;
+
+											if (data.completed) {
+												pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
+											} else {
+												pullProgress = 100;
+											}
+										}
+									}
+								}
+							}
+						}
+					} catch (error) {
+						console.log(error);
+						toast.error(error);
+					}
+				}
+			}
+
+			if (success) {
+				await updateModelfile({
+					tagName: tagName,
+					imageUrl: imageUrl,
+					title: title,
+					desc: desc,
+					content: content,
+					suggestionPrompts: suggestions.filter((prompt) => prompt.content !== ''),
+					categories: Object.keys(categories).filter((category) => categories[category])
+				});
+				await goto('/modelfiles');
+			}
+		}
+		loading = false;
+		success = false;
+	};
+</script>
+
+<div class="min-h-screen w-full flex justify-center dark:text-white">
+	<div class=" py-2.5 flex flex-col justify-between w-full">
+		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
+			<input
+				bind:this={filesInputElement}
+				bind:files={inputFiles}
+				type="file"
+				hidden
+				accept="image/*"
+				on:change={() => {
+					let reader = new FileReader();
+					reader.onload = (event) => {
+						let originalImageUrl = `${event.target.result}`;
+
+						const img = new Image();
+						img.src = originalImageUrl;
+
+						img.onload = function () {
+							const canvas = document.createElement('canvas');
+							const ctx = canvas.getContext('2d');
+
+							// Calculate the aspect ratio of the image
+							const aspectRatio = img.width / img.height;
+
+							// Calculate the new width and height to fit within 100x100
+							let newWidth, newHeight;
+							if (aspectRatio > 1) {
+								newWidth = 100 * aspectRatio;
+								newHeight = 100;
+							} else {
+								newWidth = 100;
+								newHeight = 100 / aspectRatio;
+							}
+
+							// Set the canvas size
+							canvas.width = 100;
+							canvas.height = 100;
+
+							// Calculate the position to center the image
+							const offsetX = (100 - newWidth) / 2;
+							const offsetY = (100 - newHeight) / 2;
+
+							// Draw the image on the canvas
+							ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
+
+							// Get the base64 representation of the compressed image
+							const compressedSrc = canvas.toDataURL('image/jpeg');
+
+							// Display the compressed image
+							imageUrl = compressedSrc;
+
+							inputFiles = null;
+						};
+					};
+
+					if (
+						inputFiles &&
+						inputFiles.length > 0 &&
+						['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
+					) {
+						reader.readAsDataURL(inputFiles[0]);
+					} else {
+						console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
+						inputFiles = null;
+					}
+				}}
+			/>
+
+			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
+
+			<button
+				class="flex space-x-1"
+				on:click={() => {
+					history.back();
+				}}
+			>
+				<div class=" self-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-4 h-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center font-medium text-sm">Back</div>
+			</button>
+			<hr class="my-3 dark:border-gray-700" />
+
+			<form
+				class="flex flex-col"
+				on:submit|preventDefault={() => {
+					updateHandler();
+				}}
+			>
+				<div class="flex justify-center my-4">
+					<div class="self-center">
+						<button
+							class=" {imageUrl
+								? ''
+								: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
+							type="button"
+							on:click={() => {
+								filesInputElement.click();
+							}}
+						>
+							{#if imageUrl}
+								<img
+									src={imageUrl}
+									alt="modelfile profile"
+									class=" rounded-full w-20 h-20 object-cover"
+								/>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									class="w-8"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
+				</div>
+
+				<div class="my-2 flex space-x-2">
+					<div class="flex-1">
+						<div class=" text-sm font-semibold mb-2">Name*</div>
+
+						<div>
+							<input
+								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+								placeholder="Name your modelfile"
+								bind:value={title}
+								required
+							/>
+						</div>
+					</div>
+
+					<div class="flex-1">
+						<div class=" text-sm font-semibold mb-2">Model Tag Name*</div>
+
+						<div>
+							<input
+								class="px-3 py-1.5 text-sm w-full bg-transparent disabled:text-gray-500 border dark:border-gray-600 outline-none rounded-lg"
+								placeholder="Add a model tag name"
+								value={tagName}
+								disabled
+								required
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class=" text-sm font-semibold mb-2">Description*</div>
+
+					<div>
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+							placeholder="Add a short description about what this modelfile does"
+							bind:value={desc}
+							required
+						/>
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class="flex w-full justify-between">
+						<div class=" self-center text-sm font-semibold">Modelfile</div>
+					</div>
+
+					<!-- <div class=" text-sm font-semibold mb-2"></div> -->
+
+					<div class="mt-2">
+						<div class=" text-xs font-semibold mb-2">Content*</div>
+
+						<div>
+							<textarea
+								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+								placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
+								rows="6"
+								bind:value={content}
+								required
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class="flex w-full justify-between mb-2">
+						<div class=" self-center text-sm font-semibold">Prompt suggestions</div>
+
+						<button
+							class="p-1 px-3 text-xs flex rounded transition"
+							type="button"
+							on:click={() => {
+								if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
+									suggestions = [...suggestions, { content: '' }];
+								}
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+								/>
+							</svg>
+						</button>
+					</div>
+					<div class="flex flex-col space-y-1">
+						{#each suggestions as prompt, promptIdx}
+							<div class=" flex border dark:border-gray-600 rounded-lg">
+								<input
+									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
+									placeholder="Write a prompt suggestion (e.g. Who are you?)"
+									bind:value={prompt.content}
+								/>
+
+								<button
+									class="px-2"
+									type="button"
+									on:click={() => {
+										suggestions.splice(promptIdx, 1);
+										suggestions = suggestions;
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class=" text-sm font-semibold mb-2">Categories</div>
+
+					<div class="grid grid-cols-4">
+						{#each Object.keys(categories) as category}
+							<div class="flex space-x-2 text-sm">
+								<input type="checkbox" bind:checked={categories[category]} />
+
+								<div class=" capitalize">{category}</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+
+				{#if pullProgress !== null}
+					<div class="my-2">
+						<div class=" text-sm font-semibold mb-2">Pull Progress</div>
+						<div class="w-full rounded-full dark:bg-gray-800">
+							<div
+								class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
+								style="width: {Math.max(15, pullProgress ?? 0)}%"
+							>
+								{pullProgress ?? 0}%
+							</div>
+						</div>
+						<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
+							{digest}
+						</div>
+					</div>
+				{/if}
+
+				<div class="my-2 flex justify-end">
+					<button
+						class=" text-sm px-3 py-2 transition rounded-xl {loading
+							? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
+							: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
+						type="submit"
+						disabled={loading}
+					>
+						<div class=" self-center font-medium">Save & Update</div>
+
+						{#if loading}
+							<div class="ml-1.5 self-center">
+								<svg
+									class=" w-4 h-4"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									xmlns="http://www.w3.org/2000/svg"
+									><style>
+										.spinner_ajPY {
+											transform-origin: center;
+											animation: spinner_AtaB 0.75s infinite linear;
+										}
+										@keyframes spinner_AtaB {
+											100% {
+												transform: rotate(360deg);
+											}
+										}
+									</style><path
+										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+										opacity=".25"
+									/><path
+										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+										class="spinner_ajPY"
+									/></svg
+								>
+							</div>
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>

From 247414743b330501294c067fdd0c71f24749973e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 20:51:19 -0800
Subject: [PATCH 21/32] feat: prompts backend support

---
 backend/apps/web/routers/prompts.py | 108 ++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 backend/apps/web/routers/prompts.py

diff --git a/backend/apps/web/routers/prompts.py b/backend/apps/web/routers/prompts.py
new file mode 100644
index 00000000..e62ddda2
--- /dev/null
+++ b/backend/apps/web/routers/prompts.py
@@ -0,0 +1,108 @@
+from fastapi import Depends, FastAPI, HTTPException, status
+from datetime import datetime, timedelta
+from typing import List, Union, Optional
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+import json
+
+
+from apps.web.models.prompts import Prompts, PromptForm, PromptModel
+
+from utils.utils import get_current_user
+from constants import ERROR_MESSAGES
+
+router = APIRouter()
+
+############################
+# GetPrompts
+############################
+
+
+@router.get("/", response_model=List[PromptModel])
+async def get_prompts(user=Depends(get_current_user)):
+    return Prompts.get_prompts()
+
+
+############################
+# CreateNewPrompt
+############################
+
+
+@router.post("/create", response_model=Optional[PromptModel])
+async def create_new_prompt(form_data: PromptForm, user=Depends(get_current_user)):
+    if user.role != "admin":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
+
+    prompt = Prompts.insert_new_prompt(user.id, form_data)
+
+    if prompt:
+        return prompt
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.DEFAULT(),
+        )
+
+
+############################
+# GetPromptByCommand
+############################
+
+
+@router.get("/{command}", response_model=Optional[PromptModel])
+async def get_prompt_by_command(command: str, user=Depends(get_current_user)):
+    prompt = Prompts.get_prompt_by_command(command)
+
+    if prompt:
+        return prompt
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.NOT_FOUND,
+        )
+
+
+############################
+# UpdatePromptByCommand
+############################
+
+
+@router.post("/{command}/update", response_model=Optional[PromptModel])
+async def update_prompt_by_command(
+    command: str, form_data: PromptForm, user=Depends(get_current_user)
+):
+    if user.role != "admin":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
+
+    prompt = Prompts.update_prompt_by_command(command, form_data)
+    if prompt:
+        return prompt
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
+
+
+############################
+# DeletePromptByCommand
+############################
+
+
+@router.delete("/{command}/delete", response_model=bool)
+async def delete_prompt_by_command(command: str, user=Depends(get_current_user)):
+    if user.role != "admin":
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
+
+    result = Prompts.delete_prompt_by_command(command)
+    return result

From 69ff59604531a744a07c163953f61c19521a74f4 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 21:00:50 -0800
Subject: [PATCH 22/32] feat: prompts backend frontend integration

---
 backend/apps/web/main.py        |   5 +-
 src/lib/apis/prompts/index.ts   | 176 ++++++++++++++++++++++++++++++++
 src/routes/(app)/+layout.svelte |   6 +-
 3 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/apis/prompts/index.ts

diff --git a/backend/apps/web/main.py b/backend/apps/web/main.py
index 23b39224..153b5dcb 100644
--- a/backend/apps/web/main.py
+++ b/backend/apps/web/main.py
@@ -1,7 +1,7 @@
 from fastapi import FastAPI, Depends
 from fastapi.routing import APIRoute
 from fastapi.middleware.cors import CORSMiddleware
-from apps.web.routers import auths, users, chats, modelfiles, configs, utils
+from apps.web.routers import auths, users, chats, modelfiles, prompts, configs, utils
 from config import WEBUI_VERSION, WEBUI_AUTH
 
 app = FastAPI()
@@ -23,6 +23,9 @@ app.include_router(auths.router, prefix="/auths", tags=["auths"])
 app.include_router(users.router, prefix="/users", tags=["users"])
 app.include_router(chats.router, prefix="/chats", tags=["chats"])
 app.include_router(modelfiles.router, prefix="/modelfiles", tags=["modelfiles"])
+app.include_router(prompts.router, prefix="/prompts", tags=["prompts"])
+
+
 app.include_router(configs.router, prefix="/configs", tags=["configs"])
 app.include_router(utils.router, prefix="/utils", tags=["utils"])
 
diff --git a/src/lib/apis/prompts/index.ts b/src/lib/apis/prompts/index.ts
new file mode 100644
index 00000000..deee6de8
--- /dev/null
+++ b/src/lib/apis/prompts/index.ts
@@ -0,0 +1,176 @@
+import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+export const createNewPrompt = async (
+	token: string,
+	command: string,
+	title: string,
+	content: string
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/create`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			command: command,
+			title: title,
+			content: content
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getPrompts = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getPromptByCommand = async (token: string, command: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/${command}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const updatePromptByCommand = async (
+	token: string,
+	command: string,
+	title: string,
+	content: string
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/${command}/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			command: command,
+			title: title,
+			content: content
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const deletePromptByCommand = async (token: string, command: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/${command}/delete`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 222a7d84..dca6912f 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -9,10 +9,11 @@
 
 	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
 	import { getModelfiles } from '$lib/apis/modelfiles';
+	import { getPrompts } from '$lib/apis/prompts';
 
 	import { getOpenAIModels } from '$lib/apis/openai';
 
-	import { user, showSettings, settings, models, modelfiles } from '$lib/stores';
+	import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
 	import { OLLAMA_API_BASE_URL, REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 
 	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
@@ -101,6 +102,9 @@
 			console.log();
 			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
 			await modelfiles.set(await getModelfiles(localStorage.token));
+
+			await prompts.set(await getPrompts(localStorage.token));
+
 			console.log($modelfiles);
 
 			modelfiles.subscribe(async () => {

From 7fc1d7c2c7b691f9ebca859f9c12b92cbbdbadf3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 21:35:47 -0800
Subject: [PATCH 23/32] feat: prompt crud

---
 backend/apps/web/routers/prompts.py           |  23 +-
 backend/constants.py                          |   2 +-
 src/lib/apis/prompts/index.ts                 |  14 +-
 .../chat/MessageInput/PromptCommands.svelte   |   8 +-
 src/routes/(app)/prompts/+page.svelte         |  19 +-
 src/routes/(app)/prompts/create/+page.svelte  |  69 ++-
 src/routes/(app)/prompts/edit/+page.svelte    | 483 ++++--------------
 7 files changed, 167 insertions(+), 451 deletions(-)

diff --git a/backend/apps/web/routers/prompts.py b/backend/apps/web/routers/prompts.py
index e62ddda2..5a002c94 100644
--- a/backend/apps/web/routers/prompts.py
+++ b/backend/apps/web/routers/prompts.py
@@ -37,14 +37,21 @@ async def create_new_prompt(form_data: PromptForm, user=Depends(get_current_user
             detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
         )
 
-    prompt = Prompts.insert_new_prompt(user.id, form_data)
+    prompt = Prompts.get_prompt_by_command(form_data.command)
+    if prompt == None:
+        prompt = Prompts.insert_new_prompt(user.id, form_data)
 
-    if prompt:
-        return prompt
+        if prompt:
+            return prompt
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail=ERROR_MESSAGES.DEFAULT(),
+            )
     else:
         raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            detail=ERROR_MESSAGES.DEFAULT(),
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=ERROR_MESSAGES.COMMAND_TAKEN,
         )
 
 
@@ -55,7 +62,7 @@ async def create_new_prompt(form_data: PromptForm, user=Depends(get_current_user
 
 @router.get("/{command}", response_model=Optional[PromptModel])
 async def get_prompt_by_command(command: str, user=Depends(get_current_user)):
-    prompt = Prompts.get_prompt_by_command(command)
+    prompt = Prompts.get_prompt_by_command(f"/{command}")
 
     if prompt:
         return prompt
@@ -81,7 +88,7 @@ async def update_prompt_by_command(
             detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
         )
 
-    prompt = Prompts.update_prompt_by_command(command, form_data)
+    prompt = Prompts.update_prompt_by_command(f"/{command}", form_data)
     if prompt:
         return prompt
     else:
@@ -104,5 +111,5 @@ async def delete_prompt_by_command(command: str, user=Depends(get_current_user))
             detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
         )
 
-    result = Prompts.delete_prompt_by_command(command)
+    result = Prompts.delete_prompt_by_command(f"/{command}")
     return result
diff --git a/backend/constants.py b/backend/constants.py
index ec3ce337..0817445b 100644
--- a/backend/constants.py
+++ b/backend/constants.py
@@ -17,6 +17,7 @@ class ERROR_MESSAGES(str, Enum):
     USERNAME_TAKEN = (
         "Uh-oh! This username is already registered. Please choose another username."
     )
+    COMMAND_TAKEN = "Uh-oh! This command is already registered. Please choose another command string."
     INVALID_TOKEN = (
         "Your session has expired or the token is invalid. Please sign in again."
     )
@@ -32,5 +33,4 @@ class ERROR_MESSAGES(str, Enum):
     )
     NOT_FOUND = "We could not find what you're looking for :/"
     USER_NOT_FOUND = "We could not find what you're looking for :/"
-
     MALICIOUS = "Unusual activities detected, please try again in a few minutes."
diff --git a/src/lib/apis/prompts/index.ts b/src/lib/apis/prompts/index.ts
index deee6de8..7ed303b3 100644
--- a/src/lib/apis/prompts/index.ts
+++ b/src/lib/apis/prompts/index.ts
@@ -16,7 +16,7 @@ export const createNewPrompt = async (
 			authorization: `Bearer ${token}`
 		},
 		body: JSON.stringify({
-			command: command,
+			command: `/${command}`,
 			title: title,
 			content: content
 		})
@@ -57,7 +57,7 @@ export const getPrompts = async (token: string = '') => {
 			return json;
 		})
 		.catch((err) => {
-			error = err;
+			error = err.detail;
 			console.log(err);
 			return null;
 		});
@@ -88,7 +88,7 @@ export const getPromptByCommand = async (token: string, command: string) => {
 			return json;
 		})
 		.catch((err) => {
-			error = err;
+			error = err.detail;
 
 			console.log(err);
 			return null;
@@ -117,7 +117,7 @@ export const updatePromptByCommand = async (
 			authorization: `Bearer ${token}`
 		},
 		body: JSON.stringify({
-			command: command,
+			command: `/${command}`,
 			title: title,
 			content: content
 		})
@@ -130,7 +130,7 @@ export const updatePromptByCommand = async (
 			return json;
 		})
 		.catch((err) => {
-			error = err;
+			error = err.detail;
 
 			console.log(err);
 			return null;
@@ -146,6 +146,8 @@ export const updatePromptByCommand = async (
 export const deletePromptByCommand = async (token: string, command: string) => {
 	let error = null;
 
+	command = command.charAt(0) === '/' ? command.slice(1) : command;
+
 	const res = await fetch(`${WEBUI_API_BASE_URL}/prompts/${command}/delete`, {
 		method: 'DELETE',
 		headers: {
@@ -162,7 +164,7 @@ export const deletePromptByCommand = async (token: string, command: string) => {
 			return json;
 		})
 		.catch((err) => {
-			error = err;
+			error = err.detail;
 
 			console.log(err);
 			return null;
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 865dc36a..203bf9cd 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -53,8 +53,8 @@
 				<div class=" text-lg font-medium mt-2">/</div>
 			</div>
 
-			<div class="max-h-60 flex flex-col w-full">
-				<div class=" overflow-y-auto bg-white p-2 rounded-r-lg space-y-0.5">
+			<div class="max-h-60 flex flex-col w-full rounded-r-lg">
+				<div class=" overflow-y-auto bg-white p-2 rounded-t-lg space-y-0.5">
 					{#each filteredPromptCommands as command, commandIdx}
 						<button
 							class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
@@ -80,7 +80,9 @@
 					{/each}
 				</div>
 
-				<div class=" px-2 py-0.5 text-xs text-gray-600 flex items-center space-x-1">
+				<div
+					class=" px-2 py-0.5 text-xs text-gray-600 bg-white rounded-b-lg flex items-center space-x-1"
+				>
 					<div>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 60d53c35..48d7542d 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -5,6 +5,7 @@
 
 	import { onMount } from 'svelte';
 	import { prompts } from '$lib/stores';
+	import { deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 
 	let query = '';
 
@@ -152,6 +153,10 @@ and mentions the following keywords
 		}
 	];
 
+	const deletePrompt = async (command) => {
+		await deletePromptByCommand(localStorage.token, command);
+		await prompts.set(await getPrompts(localStorage.token));
+	};
 	const loadDefaultPrompts = () => {
 		prompts.set(defaultPrompts);
 	};
@@ -213,12 +218,14 @@ and mentions the following keywords
 					<hr class=" dark:border-gray-700 my-2.5" />
 					<div class=" flex space-x-4 cursor-pointer w-full mb-3">
 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-							<div class=" flex-1 self-center">
-								<div class=" font-bold">{prompt.command}</div>
-								<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
-									{prompt.title}
+							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
+								<div class=" flex-1 self-center">
+									<div class=" font-bold">{prompt.command}</div>
+									<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
+										{prompt.title}
+									</div>
 								</div>
-							</div>
+							</a>
 						</div>
 						<div class="flex flex-row space-x-1 self-center">
 							<a
@@ -269,7 +276,7 @@ and mentions the following keywords
 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 								type="button"
 								on:click={() => {
-									// deleteModelfile(modelfile.tagName);
+									deletePrompt(prompt.command);
 								}}
 							>
 								<svg
diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
index 5cdf5940..d8025c53 100644
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -1,12 +1,16 @@
 <script>
-	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
-	import { onMount, tick } from 'svelte';
 	import toast from 'svelte-french-toast';
 
+	import { goto } from '$app/navigation';
+	import { prompts } from '$lib/stores';
+	import { onMount, tick } from 'svelte';
+
+	import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
+
 	let loading = false;
 
 	// ///////////
-	// Modelfile
+	// Prompt
 	// ///////////
 
 	let title = '';
@@ -16,13 +20,26 @@
 	$: command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
 
 	const submitHandler = async () => {
-		console.log(validateCommandString(command));
+		loading = true;
+
 		if (validateCommandString(command)) {
-			console.log('valid');
-			console.log('submit');
+			const prompt = await createNewPrompt(localStorage.token, command, title, content).catch(
+				(error) => {
+					toast.error(error);
+
+					return null;
+				}
+			);
+
+			if (prompt) {
+				await prompts.set(await getPrompts(localStorage.token));
+				await goto('/prompts');
+			}
 		} else {
 			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
 		}
+
+		loading = false;
 	};
 
 	const validateCommandString = (inputString) => {
@@ -41,33 +58,12 @@
 				)
 			)
 				return;
-			const modelfile = JSON.parse(event.data);
-			console.log(modelfile);
+			const prompt = JSON.parse(event.data);
+			console.log(prompt);
 
-			imageUrl = modelfile.imageUrl;
-			title = modelfile.title;
-			await tick();
-			tagName = `${modelfile.user.username === 'hub' ? '' : `hub/`}${modelfile.user.username}/${
-				modelfile.tagName
-			}`;
-			desc = modelfile.desc;
-			content = modelfile.content;
-			suggestions =
-				modelfile.suggestionPrompts.length != 0
-					? modelfile.suggestionPrompts
-					: [
-							{
-								content: ''
-							}
-					  ];
-
-			modelfileCreator = {
-				username: modelfile.user.username,
-				name: modelfile.user.name
-			};
-			for (const category of modelfile.categories) {
-				categories[category.toLowerCase()] = true;
-			}
+			title = prompt.title;
+			content = prompt.content;
+			command = prompt.command;
 		});
 
 		if (window.opener ?? false) {
@@ -155,12 +151,10 @@
 
 				<div class="my-2">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Prompt</div>
+						<div class=" self-center text-sm font-semibold">Prompt Content*</div>
 					</div>
 
 					<div class="mt-2">
-						<div class=" text-xs font-semibold mb-2">Content*</div>
-
 						<div>
 							<textarea
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
@@ -174,7 +168,10 @@
 						<div class="text-xs text-gray-400 dark:text-gray-500">
 							Format your variables using square brackets like this: <span
 								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
-							> . Remember to enclose them with '[' and ']'.
+							>
+							. Make sure to enclose them with
+							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
+							and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span> .
 						</div>
 					</div>
 				</div>
diff --git a/src/routes/(app)/prompts/edit/+page.svelte b/src/routes/(app)/prompts/edit/+page.svelte
index 11dec182..12d1e7e4 100644
--- a/src/routes/(app)/prompts/edit/+page.svelte
+++ b/src/routes/(app)/prompts/edit/+page.svelte
@@ -1,261 +1,80 @@
 <script>
-	import { v4 as uuidv4 } from 'uuid';
-	import { toast } from 'svelte-french-toast';
+	import toast from 'svelte-french-toast';
+
 	import { goto } from '$app/navigation';
+	import { prompts } from '$lib/stores';
+	import { onMount, tick } from 'svelte';
 
-	import { onMount } from 'svelte';
+	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
 	import { page } from '$app/stores';
 
-	import { settings, user, config, modelfiles } from '$lib/stores';
-
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
-	import { splitStream } from '$lib/utils';
-
-	import { createModel } from '$lib/apis/ollama';
-	import { getModelfiles, updateModelfileByTagName } from '$lib/apis/modelfiles';
-
-	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
-
 	let loading = false;
 
-	let filesInputElement;
-	let inputFiles;
-	let imageUrl = null;
-	let digest = '';
-	let pullProgress = null;
-	let success = false;
-
-	let modelfile = null;
 	// ///////////
-	// Modelfile
+	// Prompt
 	// ///////////
 
 	let title = '';
-	let tagName = '';
-	let desc = '';
-
-	// Raw Mode
+	let command = '';
 	let content = '';
 
-	let suggestions = [
-		{
-			content: ''
-		}
-	];
-
-	let categories = {
-		character: false,
-		assistant: false,
-		writing: false,
-		productivity: false,
-		programming: false,
-		'data analysis': false,
-		lifestyle: false,
-		education: false,
-		business: false
-	};
-
-	onMount(() => {
-		tagName = $page.url.searchParams.get('tag');
-
-		if (tagName) {
-			modelfile = $modelfiles.filter((modelfile) => modelfile.tagName === tagName)[0];
-
-			console.log(modelfile);
-
-			imageUrl = modelfile.imageUrl;
-			title = modelfile.title;
-			desc = modelfile.desc;
-			content = modelfile.content;
-			suggestions =
-				modelfile.suggestionPrompts.length != 0
-					? modelfile.suggestionPrompts
-					: [
-							{
-								content: ''
-							}
-					  ];
-
-			for (const category of modelfile.categories) {
-				categories[category.toLowerCase()] = true;
-			}
-		} else {
-			goto('/modelfiles');
-		}
-	});
-
-	const updateModelfile = async (modelfile) => {
-		await updateModelfileByTagName(localStorage.token, modelfile.tagName, modelfile);
-		await modelfiles.set(await getModelfiles(localStorage.token));
-	};
-
 	const updateHandler = async () => {
 		loading = true;
 
-		if (Object.keys(categories).filter((category) => categories[category]).length == 0) {
-			toast.error(
-				'Uh-oh! It looks like you missed selecting a category. Please choose one to complete your modelfile.'
-			);
-		}
-
-		if (
-			title !== '' &&
-			desc !== '' &&
-			content !== '' &&
-			Object.keys(categories).filter((category) => categories[category]).length > 0
-		) {
-			const res = await createModel(
-				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
-				localStorage.token,
-				tagName,
-				content
-			);
-
-			if (res) {
-				const reader = res.body
-					.pipeThrough(new TextDecoderStream())
-					.pipeThrough(splitStream('\n'))
-					.getReader();
-
-				while (true) {
-					const { value, done } = await reader.read();
-					if (done) break;
-
-					try {
-						let lines = value.split('\n');
-
-						for (const line of lines) {
-							if (line !== '') {
-								console.log(line);
-								let data = JSON.parse(line);
-								console.log(data);
-
-								if (data.error) {
-									throw data.error;
-								}
-								if (data.detail) {
-									throw data.detail;
-								}
-
-								if (data.status) {
-									if (
-										!data.digest &&
-										!data.status.includes('writing') &&
-										!data.status.includes('sha256')
-									) {
-										toast.success(data.status);
-
-										if (data.status === 'success') {
-											success = true;
-										}
-									} else {
-										if (data.digest) {
-											digest = data.digest;
-
-											if (data.completed) {
-												pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
-											} else {
-												pullProgress = 100;
-											}
-										}
-									}
-								}
-							}
-						}
-					} catch (error) {
-						console.log(error);
-						toast.error(error);
-					}
+		if (validateCommandString(command)) {
+			const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
+				(error) => {
+					toast.error(error);
+					return null;
 				}
-			}
+			);
 
-			if (success) {
-				await updateModelfile({
-					tagName: tagName,
-					imageUrl: imageUrl,
-					title: title,
-					desc: desc,
-					content: content,
-					suggestionPrompts: suggestions.filter((prompt) => prompt.content !== ''),
-					categories: Object.keys(categories).filter((category) => categories[category])
-				});
-				await goto('/modelfiles');
+			if (prompt) {
+				await prompts.set(await getPrompts(localStorage.token));
+				await goto('/prompts');
 			}
+		} else {
+			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
 		}
+
 		loading = false;
-		success = false;
 	};
+
+	const validateCommandString = (inputString) => {
+		// Regular expression to match only alphanumeric characters and hyphen
+		const regex = /^[a-zA-Z0-9-]+$/;
+
+		// Test the input string against the regular expression
+		return regex.test(inputString);
+	};
+
+	onMount(async () => {
+		command = $page.url.searchParams.get('command');
+		if (command) {
+			const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
+
+			if (prompt) {
+				console.log(prompt);
+
+				console.log(prompt.command);
+
+				title = prompt.title;
+				await tick();
+				command = prompt.command.slice(1);
+				content = prompt.content;
+			} else {
+				goto('/prompts');
+			}
+		} else {
+			goto('/prompts');
+		}
+	});
 </script>
 
 <div class="min-h-screen w-full flex justify-center dark:text-white">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<input
-				bind:this={filesInputElement}
-				bind:files={inputFiles}
-				type="file"
-				hidden
-				accept="image/*"
-				on:change={() => {
-					let reader = new FileReader();
-					reader.onload = (event) => {
-						let originalImageUrl = `${event.target.result}`;
-
-						const img = new Image();
-						img.src = originalImageUrl;
-
-						img.onload = function () {
-							const canvas = document.createElement('canvas');
-							const ctx = canvas.getContext('2d');
-
-							// Calculate the aspect ratio of the image
-							const aspectRatio = img.width / img.height;
-
-							// Calculate the new width and height to fit within 100x100
-							let newWidth, newHeight;
-							if (aspectRatio > 1) {
-								newWidth = 100 * aspectRatio;
-								newHeight = 100;
-							} else {
-								newWidth = 100;
-								newHeight = 100 / aspectRatio;
-							}
-
-							// Set the canvas size
-							canvas.width = 100;
-							canvas.height = 100;
-
-							// Calculate the position to center the image
-							const offsetX = (100 - newWidth) / 2;
-							const offsetY = (100 - newHeight) / 2;
-
-							// Draw the image on the canvas
-							ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
-
-							// Get the base64 representation of the compressed image
-							const compressedSrc = canvas.toDataURL('image/jpeg');
-
-							// Display the compressed image
-							imageUrl = compressedSrc;
-
-							inputFiles = null;
-						};
-					};
-
-					if (
-						inputFiles &&
-						inputFiles.length > 0 &&
-						['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type'])
-					) {
-						reader.readAsDataURL(inputFiles[0]);
-					} else {
-						console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`);
-						inputFiles = null;
-					}
-				}}
-			/>
-
-			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
+			<div class=" text-2xl font-semibold mb-6">My Prompts</div>
 
 			<button
 				class="flex space-x-1"
@@ -287,193 +106,75 @@
 					updateHandler();
 				}}
 			>
-				<div class="flex justify-center my-4">
-					<div class="self-center">
-						<button
-							class=" {imageUrl
-								? ''
-								: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
-							type="button"
-							on:click={() => {
-								filesInputElement.click();
-							}}
-						>
-							{#if imageUrl}
-								<img
-									src={imageUrl}
-									alt="modelfile profile"
-									class=" rounded-full w-20 h-20 object-cover"
-								/>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 24 24"
-									fill="currentColor"
-									class="w-8"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							{/if}
-						</button>
-					</div>
-				</div>
-
-				<div class="my-2 flex space-x-2">
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Name*</div>
-
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Name your modelfile"
-								bind:value={title}
-								required
-							/>
-						</div>
-					</div>
-
-					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Model Tag Name*</div>
-
-						<div>
-							<input
-								class="px-3 py-1.5 text-sm w-full bg-transparent disabled:text-gray-500 border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Add a model tag name"
-								value={tagName}
-								disabled
-								required
-							/>
-						</div>
-					</div>
-				</div>
-
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Description*</div>
+					<div class=" text-sm font-semibold mb-2">Title*</div>
 
 					<div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder="Add a short description about what this modelfile does"
-							bind:value={desc}
+							placeholder="Add a short title for this prompt"
+							bind:value={title}
 							required
 						/>
 					</div>
 				</div>
 
 				<div class="my-2">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Modelfile</div>
+					<div class=" text-sm font-semibold mb-2">Command*</div>
+
+					<div class="flex items-center mb-1">
+						<div
+							class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+						>
+							/
+						</div>
+						<input
+							class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
+							placeholder="short-summary"
+							bind:value={command}
+							disabled
+							required
+						/>
 					</div>
 
-					<!-- <div class=" text-sm font-semibold mb-2"></div> -->
+					<div class="text-xs text-gray-400 dark:text-gray-500">
+						Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
+							>alphanumeric characters and hyphens</span
+						>
+						are allowed; Activate this command by typing "<span
+							class=" text-gray-600 dark:text-gray-300 font-medium"
+						>
+							/{command}
+						</span>" to chat input.
+					</div>
+				</div>
+
+				<div class="my-2">
+					<div class="flex w-full justify-between">
+						<div class=" self-center text-sm font-semibold">Prompt Content*</div>
+					</div>
 
 					<div class="mt-2">
-						<div class=" text-xs font-semibold mb-2">Content*</div>
-
 						<div>
 							<textarea
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={`FROM llama2\nPARAMETER temperature 1\nSYSTEM """\nYou are Mario from Super Mario Bros, acting as an assistant.\n"""`}
+								placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
 								rows="6"
 								bind:value={content}
 								required
 							/>
 						</div>
-					</div>
-				</div>
 
-				<div class="my-2">
-					<div class="flex w-full justify-between mb-2">
-						<div class=" self-center text-sm font-semibold">Prompt suggestions</div>
-
-						<button
-							class="p-1 px-3 text-xs flex rounded transition"
-							type="button"
-							on:click={() => {
-								if (suggestions.length === 0 || suggestions.at(-1).content !== '') {
-									suggestions = [...suggestions, { content: '' }];
-								}
-							}}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="w-4 h-4"
+						<div class="text-xs text-gray-400 dark:text-gray-500">
+							Format your variables using square brackets like this: <span
+								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
 							>
-								<path
-									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-								/>
-							</svg>
-						</button>
-					</div>
-					<div class="flex flex-col space-y-1">
-						{#each suggestions as prompt, promptIdx}
-							<div class=" flex border dark:border-gray-600 rounded-lg">
-								<input
-									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
-									placeholder="Write a prompt suggestion (e.g. Who are you?)"
-									bind:value={prompt.content}
-								/>
-
-								<button
-									class="px-2"
-									type="button"
-									on:click={() => {
-										suggestions.splice(promptIdx, 1);
-										suggestions = suggestions;
-									}}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-										class="w-4 h-4"
-									>
-										<path
-											d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-										/>
-									</svg>
-								</button>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Categories</div>
-
-					<div class="grid grid-cols-4">
-						{#each Object.keys(categories) as category}
-							<div class="flex space-x-2 text-sm">
-								<input type="checkbox" bind:checked={categories[category]} />
-
-								<div class=" capitalize">{category}</div>
-							</div>
-						{/each}
-					</div>
-				</div>
-
-				{#if pullProgress !== null}
-					<div class="my-2">
-						<div class=" text-sm font-semibold mb-2">Pull Progress</div>
-						<div class="w-full rounded-full dark:bg-gray-800">
-							<div
-								class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-								style="width: {Math.max(15, pullProgress ?? 0)}%"
-							>
-								{pullProgress ?? 0}%
-							</div>
-						</div>
-						<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
-							{digest}
+							. Make sure to enclose them with
+							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
+							and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span> .
 						</div>
 					</div>
-				{/if}
+				</div>
 
 				<div class="my-2 flex justify-end">
 					<button

From 5436c2c0719efe2884c106b2e3b4811c390583b6 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 21:40:22 -0800
Subject: [PATCH 24/32] chore: comment removed

---
 src/routes/(app)/modelfiles/+page.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index f9619fe2..7f666c56 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -258,8 +258,6 @@
 					<button
 						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
 						on:click={async () => {
-							// document.getElementById('modelfiles-import-input')?.click();
-
 							saveModelfiles($modelfiles);
 						}}
 					>

From 6f262db676af0210bacd095fee9377e1200af06e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 2 Jan 2024 21:44:15 -0800
Subject: [PATCH 25/32] feat: tip message update

---
 .../components/chat/MessageInput/PromptCommands.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 203bf9cd..ddf35360 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -50,11 +50,11 @@
 	<div class="md:px-2 mb-3 text-left w-full">
 		<div class="flex w-full rounded-lg border border-gray-100 dark:border-gray-700">
 			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
-				<div class=" text-lg font-medium mt-2">/</div>
+				<div class=" text-lg font-semibold mt-2">/</div>
 			</div>
 
 			<div class="max-h-60 flex flex-col w-full rounded-r-lg">
-				<div class=" overflow-y-auto bg-white p-2 rounded-t-lg space-y-0.5">
+				<div class=" overflow-y-auto bg-white p-2 rounded-tr-lg space-y-0.5">
 					{#each filteredPromptCommands as command, commandIdx}
 						<button
 							class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
@@ -81,7 +81,7 @@
 				</div>
 
 				<div
-					class=" px-2 py-0.5 text-xs text-gray-600 bg-white rounded-b-lg flex items-center space-x-1"
+					class=" px-2 pb-1 text-xs text-gray-600 bg-white rounded-br-lg flex items-center space-x-1"
 				>
 					<div>
 						<svg
@@ -101,8 +101,8 @@
 					</div>
 
 					<div class="line-clamp-1">
-						Tip: Update multiple prompt variables by pressing the tab key in the chat input
-						consecutively after each replacement.
+						Tip: Update multiple variable slots consecutively by pressing the tab key in the chat
+						input after each replacement.
 					</div>
 				</div>
 			</div>

From 4a7c85ade5977735bb2610edb612eaf382b1b09a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 00:53:10 -0500
Subject: [PATCH 26/32] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index cd655838..19942cc9 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,8 @@ Also check our sibling project, [OllamaHub](https://ollamahub.com/), where you c
 
 - ✒️🔢 **Full Markdown and LaTeX Support**: Elevate your LLM experience with comprehensive Markdown and LaTeX capabilities for enriched interaction.
 
+- 📜 **Prompt Preset Support**: Instantly access preset prompts using the '/' command in the chat input. Load predefined conversation starters effortlessly and expedite your interactions. Seamlessly edit variables by pressing 'tab' for enhanced control and flexibility.
+
 - 📥🗑️ **Download/Delete Models**: Easily download or remove models directly from the web UI.
 
 - ⬆️ **GGUF File Model Creation**: Effortlessly create Ollama models by uploading GGUF files directly from the web UI. Streamlined process with options to upload from your machine or download GGUF files from Hugging Face.

From 08d8ce4215f69421cb02da91d75b1476690f6bb3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 00:23:25 -0800
Subject: [PATCH 27/32] fix: styling

---
 src/routes/(app)/prompts/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 48d7542d..9719dd3d 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -219,9 +219,9 @@ and mentions the following keywords
 					<div class=" flex space-x-4 cursor-pointer w-full mb-3">
 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
 							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
-								<div class=" flex-1 self-center">
+								<div class=" flex-1 self-center pl-5">
 									<div class=" font-bold">{prompt.command}</div>
-									<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1">
+									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
 										{prompt.title}
 									</div>
 								</div>
@@ -370,7 +370,7 @@ and mentions the following keywords
 
 				<a
 					class=" flex space-x-4 cursor-pointer w-full mb-3"
-					href="https://ollamahub.com/"
+					href="https://ollamahub.com/?type=prompts"
 					target="_blank"
 				>
 					<div class=" self-center w-10">

From 63d380231a91a814e350bef71201696d6f8f063f Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 03:16:31 -0800
Subject: [PATCH 28/32] fix: await content load

---
 src/routes/(app)/prompts/create/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
index d8025c53..f384e762 100644
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -62,6 +62,7 @@
 			console.log(prompt);
 
 			title = prompt.title;
+			await tick();
 			content = prompt.content;
 			command = prompt.command;
 		});

From 22864d759897c654b58e8d6d43259d08f140e806 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 14:39:22 -0800
Subject: [PATCH 29/32] feat: prompt share integration with ollamahub

---
 src/routes/(app)/modelfiles/+page.svelte |   2 +-
 src/routes/(app)/prompts/+page.svelte    | 201 ++++-------------------
 2 files changed, 37 insertions(+), 166 deletions(-)

diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index 7f666c56..917908cd 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -44,7 +44,7 @@
 
 		const url = 'https://ollamahub.com';
 
-		const tab = await window.open(`${url}/create`, '_blank');
+		const tab = await window.open(`${url}/modelfiles/create`, '_blank');
 		window.addEventListener(
 			'message',
 			(event) => {
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 9719dd3d..18cd1112 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -9,157 +9,28 @@
 
 	let query = '';
 
-	let defaultPrompts = [
-		{
-			command: '/article',
-			title: 'Article Generator',
-			content: `Write an article about [topic]
+	const sharePrompt = async (prompt) => {
+		toast.success('Redirecting you to OllamaHub');
 
-include relevant statistics (add the links of the sources you use) and consider diverse perspectives. Write it in a [X_tone] and mention the source links in the end.`
-		},
-		{
-			command: '/backlink',
+		const url = 'https://ollamahub.com';
 
-			title: 'Backlink Outreach Email',
-			content: `Write a link-exchange outreach email on behalf of [your name] from [your_company] to ask for a backlink from their [website_url] to [your website url].`
-		},
-		{
-			command: '/faq',
-
-			title: 'FAQ Generator',
-			content: `Create a list of [10] frequently asked questions about [keyword] and provide answers for each one of them considering the SERP and rich result guidelines.`
-		},
-		{
-			command: '/headline',
-
-			title: 'Headline Generator',
-			content: `Generate 10 attention-grabbing headlines for an article about [your topic]`
-		},
-		{
-			command: '/product',
-
-			title: 'Product Description',
-			content: `Craft an irresistible product description that highlights the benefits of [your product]`
-		},
-		{
-			command: '/seo',
-
-			title: 'SEO Content Brief',
-			content: `Create a SEO content brief for [keyword].`
-		},
-		{
-			command: '/seo-ideas',
-
-			title: 'SEO Keyword Ideas',
-			content: `Generate a list of 20 keyword ideas on [topic].
-
-Cluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.`
-		},
-		{
-			command: '/summary',
-
-			title: 'Short Summary',
-			content: `Write a summary in 50 words that summarizes [topic or keyword].`
-		},
-		{
-			command: '/email-subject',
-
-			title: 'Email Subject Line',
-			content: `Develop [5] subject lines for a cold email offering your [product or service] to a potential client.`
-		},
-		{
-			command: '/facebook-ads',
-
-			title: 'Facebook Ads',
-			content: `Create 3 variations of effective ad copy to promote [product] for [audience].
-
-Make sure they are [persuasive/playful/emotional] and mention these benefits:
-
-[Benefit 1]
-
-[Benefit 2]
-
-[Benefit 3]
-
-Finish with a call to action saying [CTA].
-
-Add 3 emojis to it.`
-		},
-		{
-			command: '/google-ads',
-
-			title: 'Google Ads',
-			content: `Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].
-
-The headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.`
-		},
-		{
-			command: '/insta-caption',
-
-			title: 'Instagram Caption',
-			content: `Write 5 variations of Instagram captions for [product].
-
-Use friendly, human-like language that appeals to [target audience].
-
-Emphasize the unique qualities of [product],
-
-use ample emojis, and don't sound too promotional.`
-		},
-		{
-			command: '/linkedin-post',
-
-			title: 'LinkedIn Post',
-			content: `Create a narrative Linkedin post using immersive writing about [topic].
-
-Details:
-
-[give details in bullet point format]
-
-Use a mix of short and long sentences. Make it punchy and dramatic.`
-		},
-		{
-			command: '/youtube-desc',
-
-			title: 'YouTube Video',
-			content: `Write a 100-word YouTube video description that compels [audience]
-
-to watch a video on [topic]
-
-and mentions the following keywords
-
-[keyword 1]
-
-[keyword 2]
-
-[keyword 3].`
-		},
-		{
-			command: '/seo-meta',
-
-			title: 'SEO Meta',
-			content: `Suggest a meta description for the content above, make it user-friendly and with a call to action, include the keyword [keyword].`
-		},
-		{
-			command: '/eli5',
-
-			title: 'ELI5',
-			content: `You are an expert teacher with the ability to explain complex topics in simpler terms. Explain the concept of [topic] in simple terms, so that my [grade level/subject] class can understand [this concept/specific example]?`
-		},
-		{
-			command: '/emoji-translate',
-
-			title: 'Emoji Translation',
-			content: `You are an emoji expert. Using only emojis, translate the following text to emojis. [insert numbered sentences].`
-		}
-	];
+		const tab = await window.open(`${url}/prompts/create`, '_blank');
+		window.addEventListener(
+			'message',
+			(event) => {
+				if (event.origin !== url) return;
+				if (event.data === 'loaded') {
+					tab.postMessage(JSON.stringify(prompt), '*');
+				}
+			},
+			false
+		);
+	};
 
 	const deletePrompt = async (command) => {
 		await deletePromptByCommand(localStorage.token, command);
 		await prompts.set(await getPrompts(localStorage.token));
 	};
-	const loadDefaultPrompts = () => {
-		prompts.set(defaultPrompts);
-	};
 </script>
 
 <div class="min-h-screen w-full flex justify-center dark:text-white">
@@ -249,28 +120,28 @@ and mentions the following keywords
 								</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={() => {
-								shareModelfile(modelfile);
-							}}
-						>
-							<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"
+							<button
+								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
+								type="button"
+								on:click={() => {
+									sharePrompt(prompt);
+								}}
 							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
-								/>
-							</svg>
-						</button> -->
+								<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="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+									/>
+								</svg>
+							</button>
 
 							<button
 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"

From df7be3d2a560e630a8a05a58ec52848ca88d39cf Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 14:58:29 -0800
Subject: [PATCH 30/32] feat: import prompts

---
 src/routes/(app)/prompts/+page.svelte | 43 ++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 18cd1112..bb072677 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -5,8 +5,10 @@
 
 	import { onMount } from 'svelte';
 	import { prompts } from '$lib/stores';
-	import { deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
+	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
+	import { error } from '@sveltejs/kit';
 
+	let importFiles = '';
 	let query = '';
 
 	const sharePrompt = async (prompt) => {
@@ -174,10 +176,43 @@
 
 			<div class=" flex justify-between w-full mb-3">
 				<div class="flex space-x-2">
-					<!-- <button
+					<input
+						id="prompts-import-input"
+						bind:files={importFiles}
+						type="file"
+						accept=".json"
+						hidden
+						on:change={() => {
+							console.log(importFiles);
+
+							const reader = new FileReader();
+							reader.onload = async (event) => {
+								const savedPrompts = JSON.parse(event.target.result);
+								console.log(savedPrompts);
+
+								for (const prompt of savedPrompts) {
+									await createNewPrompt(
+										localStorage.token,
+										prompt.command.charAt(0) === '/' ? prompt.command.slice(1) : prompt.command,
+										prompt.title,
+										prompt.content
+									).catch((error) => {
+										toast.error(error);
+										return null;
+									});
+								}
+
+								await prompts.set(await getPrompts(localStorage.token));
+							};
+
+							reader.readAsText(importFiles[0]);
+						}}
+					/>
+
+					<button
 						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
 						on:click={async () => {
-							// document.getElementById('modelfiles-import-input')?.click();
+							document.getElementById('prompts-import-input')?.click();
 						}}
 					>
 						<div class=" self-center mr-2 font-medium">Import Prompts</div>
@@ -196,7 +231,7 @@
 								/>
 							</svg>
 						</div>
-					</button> -->
+					</button>
 
 					<button
 						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"

From 6e78b3a8f668262346d92f32bcda8347375010f3 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 3 Jan 2024 15:56:11 -0800
Subject: [PATCH 31/32] fix: :hammer: start script permissions & environment

---
 backend/start.sh | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)
 mode change 100644 => 100755 backend/start.sh

diff --git a/backend/start.sh b/backend/start.sh
old mode 100644
new mode 100755
index 9fb1f576..ba68207e
--- a/backend/start.sh
+++ b/backend/start.sh
@@ -1 +1,3 @@
-uvicorn main:app --host 0.0.0.0 --port 8080 --forwarded-allow-ips '*'
\ No newline at end of file
+#!/usr/bin/env bash
+
+uvicorn main:app --host 0.0.0.0 --port 8080 --forwarded-allow-ips '*'

From d50fc65bb276f7988c59faf16eee40be28537378 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <timothyjrbeck@gmail.com>
Date: Wed, 3 Jan 2024 19:09:35 -0500
Subject: [PATCH 32/32] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 19942cc9..d77994c9 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Also check our sibling project, [OllamaHub](https://ollamahub.com/), where you c
 
 - ✒️🔢 **Full Markdown and LaTeX Support**: Elevate your LLM experience with comprehensive Markdown and LaTeX capabilities for enriched interaction.
 
-- 📜 **Prompt Preset Support**: Instantly access preset prompts using the '/' command in the chat input. Load predefined conversation starters effortlessly and expedite your interactions. Seamlessly edit variables by pressing 'tab' for enhanced control and flexibility.
+- 📜 **Prompt Preset Support**: Instantly access preset prompts using the '/' command in the chat input. Load predefined conversation starters effortlessly and expedite your interactions. Effortlessly import prompts through [OllamaHub](https://ollamahub.com/) integration.
 
 - 📥🗑️ **Download/Delete Models**: Easily download or remove models directly from the web UI.