+page.svelte

<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>