+page.svelte 7.08 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script>
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
3

Timothy J. Baek's avatar
Timothy J. Baek committed
4
5
	import { goto } from '$app/navigation';
	import { prompts } from '$lib/stores';
6
	import { onMount, tick, getContext } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
9

	import { createNewPrompt, getPrompts } from '$lib/apis/prompts';

10
11
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
12
13
14
	let loading = false;

	// ///////////
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	// Prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
16
17
18
19
20
21
22
23
24
	// ///////////

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

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

	const submitHandler = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
		loading = true;

Timothy J. Baek's avatar
Timothy J. Baek committed
27
		if (validateCommandString(command)) {
Timothy J. Baek's avatar
Timothy J. Baek committed
28
29
30
31
32
33
34
35
36
37
38
39
			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');
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
40
		} else {
Ased Mammad's avatar
Ased Mammad committed
41
42
43
			toast.error(
				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
44
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
45
46

		loading = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
50
51
52
53
54
55
56
	};

	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);
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
57
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
		window.addEventListener('message', async (event) => {
			if (
Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
62
63
64
65
66
				![
					'https://ollamahub.com',
					'https://www.ollamahub.com',
					'https://openwebui.com',
					'https://www.openwebui.com',
					'http://localhost:5173'
				].includes(event.origin)
Timothy J. Baek's avatar
Timothy J. Baek committed
67
68
			)
				return;
Timothy J. Baek's avatar
Timothy J. Baek committed
69
70
71
72
			const prompt = JSON.parse(event.data);
			console.log(prompt);

			title = prompt.title;
Timothy J. Baek's avatar
Timothy J. Baek committed
73
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
74
75
			content = prompt.content;
			command = prompt.command;
Timothy J. Baek's avatar
Timothy J. Baek committed
76
77
78
79
80
		});

		if (window.opener ?? false) {
			window.opener.postMessage('loaded', '*');
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
81
82
83
84
85
86
87
88
89
90
91
92

		if (sessionStorage.prompt) {
			const prompt = JSON.parse(sessionStorage.prompt);

			console.log(prompt);
			title = prompt.title;
			await tick();
			content = prompt.content;
			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;

			sessionStorage.removeItem('prompt');
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
93
94
95
	});
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
96
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
Timothy J. Baek's avatar
Timothy J. Baek committed
97
	<div class=" flex flex-col justify-between w-full overflow-y-auto">
Timothy J. Baek's avatar
Timothy J. Baek committed
98
		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
99
			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

			<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>
121
				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
122
123
124
125
126
127
128
129
130
131
			</button>
			<hr class="my-3 dark:border-gray-700" />

			<form
				class="flex flex-col"
				on:submit|preventDefault={() => {
					submitHandler();
				}}
			>
				<div class="my-2">
132
					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
136

					<div>
						<input
							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
137
							placeholder={$i18n.t('Add a short title for this prompt')}
Timothy J. Baek's avatar
Timothy J. Baek committed
138
139
140
141
142
143
144
							bind:value={title}
							required
						/>
					</div>
				</div>

				<div class="my-2">
145
					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
146
147
148
149
150
151
152
153
154

					<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"
155
							placeholder={$i18n.t('short-summary')}
Timothy J. Baek's avatar
Timothy J. Baek committed
156
157
158
159
160
161
							bind:value={command}
							required
						/>
					</div>

					<div class="text-xs text-gray-400 dark:text-gray-500">
162
163
164
						{$i18n.t('Only')}
						<span class=" text-gray-600 dark:text-gray-300 font-medium"
							>{$i18n.t('alphanumeric characters and hyphens')}</span
Timothy J. Baek's avatar
Timothy J. Baek committed
165
						>
166
						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
Timothy J. Baek's avatar
Timothy J. Baek committed
167
168
169
							class=" text-gray-600 dark:text-gray-300 font-medium"
						>
							/{command}
170
171
						</span>" &nbsp;
						{$i18n.t('to chat input.')}
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
175
176
					</div>
				</div>

				<div class="my-2">
					<div class="flex w-full justify-between">
177
						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
180
181
182
183
					</div>

					<div class="mt-2">
						<div>
							<textarea
								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
184
								placeholder={$i18n.t(
Ased Mammad's avatar
Ased Mammad committed
185
									'Write a summary in 50 words that summarizes [topic or keyword].'
186
								)}
Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
193
								rows="6"
								bind:value={content}
								required
							/>
						</div>

						<div class="text-xs text-gray-400 dark:text-gray-500">
194
195
196
197
							ⓘ {$i18n.t('Format your variables using square 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')}
Timothy J. Baek's avatar
Timothy J. Baek committed
198
							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
199
200
							{$i18n.t('and')}
							<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
201
202
203
						</div>

						<div class="text-xs text-gray-400 dark:text-gray-500">
204
205
206
207
							{$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.')}
Timothy J. Baek's avatar
Timothy J. Baek committed
208
209
210
211
212
213
214
215
216
217
218
219
						</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}
					>
220
						<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254

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