feat: CLIPBOARD variable for prompt preset

src/lib/components/chat/MessageInput/PromptCommands.svelte

@@ -2,6 +2,7 @@
 	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
 	import { tick } from 'svelte';
+	import toast from 'svelte-french-toast';
 
 	export let prompt = '';
 	let selectedCommandIdx = 0;
@@ -24,7 +25,18 @@
 	};
 
 	const confirmCommand = async (command) => {
-		prompt = command.content;
+		let text = command.content;
+
+		if (command.content.includes('{{CLIPBOARD}}')) {
+			const clipboardText = await navigator.clipboard.readText().catch((err) => {
+				toast.error('Failed to read clipboard contents');
+				return '{{CLIPBOARD}}';
+			});
+
+			text = command.content.replaceAll('{{CLIPBOARD}}', clipboardText);
+		}
+
+		prompt = text;
 
 		const chatInputElement = document.getElementById('chat-textarea');
 

src/routes/(app)/prompts/create/+page.svelte

@@ -171,12 +171,18 @@
 						</div>
 
 						<div class="text-xs text-gray-400 dark:text-gray-500">
-							Format your variables using square brackets like this: <span
+							ⓘ Format your variables using square brackets like this: <span
 								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
 							>
 							. 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> .
+							and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
+						</div>
+
+						<div class="text-xs text-gray-400 dark:text-gray-500">
+							Utilize <span class=" text-gray-600 dark:text-gray-300 font-medium"
+								>{`{{CLIPBOARD}}`}</span
+							> variable to have them replaced with clipboard content.
 						</div>
 					</div>
 				</div>