open-webui/src/lib/components/workspace/Prompts/PromptEditor.svelte

<script lang="ts">
	import { onMount, tick, getContext } from 'svelte';

	import Textarea from '$lib/components/common/Textarea.svelte';
	import { toast } from 'svelte-sonner';

	export let onSubmit: Function;
	export let edit = false;
	export let prompt = null;

	const i18n = getContext('i18n');

	let loading = false;

	let title = '';
	let command = '';
	let content = '';

	$: if (!edit) {
		command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
	}

	const submitHandler = async () => {
		loading = true;

		if (validateCommandString(command)) {
			await onSubmit({
				title,
				command,
				content
			});
		} else {
			toast.error(
				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
			);
		}

		loading = 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 () => {
		if (prompt) {
			title = prompt.title;
			await tick();

			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
			content = prompt.content;
		}
	});
</script>

<form
	class="flex flex-col max-w-2xl mx-auto mt-4 mb-10 pb-10"
	on:submit|preventDefault={() => {
		submitHandler();
	}}
>
	<div class="my-2">
		<div class=" text-sm font-semibold mb-2">{$i18n.t('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={$i18n.t('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">{$i18n.t('Command')}*</div>

		<div class="flex items-center mb-1">
			<div
				class="bg-gray-200 dark:bg-gray-600 font-semibold 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={$i18n.t('short-summary')}
				bind:value={command}
				required
				disabled={edit}
			/>
		</div>

		<div class="text-xs text-gray-400 dark:text-gray-500">
			{$i18n.t('Only')}
			<span class=" text-gray-600 dark:text-gray-300 font-medium"
				>{$i18n.t('alphanumeric characters and hyphens')}</span
			>
			{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
				class=" text-gray-600 dark:text-gray-300 font-medium"
			>
				/{command}
			</span>" &nbsp;
			{$i18n.t('to chat input.')}
		</div>
	</div>

	<div class="my-2">
		<div class="flex w-full justify-between">
			<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
		</div>

		<div class="mt-2">
			<div>
				<Textarea
					className="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none overflow-y-hidden rounded-lg resize-none"
					placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
					bind:value={content}
					rows={6}
					required
				/>
			</div>

			<div class="text-xs text-gray-400 dark:text-gray-500">
				ⓘ {$i18n.t('Format your variables using brackets like this:')}&nbsp;<span
					class=" text-gray-600 dark:text-gray-300 font-medium"
					>{'{{'}{$i18n.t('variable')}{'}}'}</span
				>.
				{$i18n.t('Make sure to enclose them with')}
				<span class=" text-gray-600 dark:text-gray-300 font-medium">{'{{'}</span>
				{$i18n.t('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">
				{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
					{` {{CLIPBOARD}}`}</span
				>
				{$i18n.t('variable to have them replaced with clipboard content.')}
			</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">{$i18n.t('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>