+page.svelte 6.65 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
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
5
	import { prompts } from '$lib/stores';
6
7
8
	import { onMount, tick, getContext } from 'svelte';

	const i18n = getContext('i18n');
Timothy J. Baek's avatar
Timothy J. Baek committed
9

Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
13
14
15
	import { page } from '$app/stores';

	let loading = false;

	// ///////////
Timothy J. Baek's avatar
Timothy J. Baek committed
16
	// Prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
17
18
19
	// ///////////

	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	let command = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
21
22
	let content = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
23
24
	const updateHandler = async () => {
		loading = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
25

Timothy J. Baek's avatar
Timothy J. Baek committed
26
27
28
29
30
31
32
		if (validateCommandString(command)) {
			const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
				(error) => {
					toast.error(error);
					return null;
				}
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
33

Timothy J. Baek's avatar
Timothy J. Baek committed
34
35
36
			if (prompt) {
				await prompts.set(await getPrompts(localStorage.token));
				await goto('/prompts');
Timothy J. Baek's avatar
Timothy J. Baek committed
37
38
			}
		} else {
Ased Mammad's avatar
Ased Mammad committed
39
40
41
			toast.error(
				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
42
43
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
44
		loading = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
	const validateCommandString = (inputString) => {
		// Regular expression to match only alphanumeric characters and hyphen
		const regex = /^[a-zA-Z0-9-]+$/;
Timothy J. Baek's avatar
Timothy J. Baek committed
50

Timothy J. Baek's avatar
Timothy J. Baek committed
51
52
53
		// Test the input string against the regular expression
		return regex.test(inputString);
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
54

Timothy J. Baek's avatar
Timothy J. Baek committed
55
56
57
58
	onMount(async () => {
		command = $page.url.searchParams.get('command');
		if (command) {
			const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
Timothy J. Baek's avatar
Timothy J. Baek committed
59

Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
			if (prompt) {
				console.log(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
62

Timothy J. Baek's avatar
Timothy J. Baek committed
63
				console.log(prompt.command);
Timothy J. Baek's avatar
Timothy J. Baek committed
64

Timothy J. Baek's avatar
Timothy J. Baek committed
65
66
67
68
69
70
				title = prompt.title;
				await tick();
				command = prompt.command.slice(1);
				content = prompt.content;
			} else {
				goto('/prompts');
Timothy J. Baek's avatar
Timothy J. Baek committed
71
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
72
73
		} else {
			goto('/prompts');
Timothy J. Baek's avatar
Timothy J. Baek committed
74
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
75
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
76
77
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
78
<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
79
	<div class="flex flex-col justify-between w-full overflow-y-auto">
Timothy J. Baek's avatar
Timothy J. Baek committed
80
		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
81
			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

			<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>
103
				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
104
105
106
107
108
109
110
111
112
			</button>
			<hr class="my-3 dark:border-gray-700" />

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

Timothy J. Baek's avatar
Timothy J. Baek committed
116
117
118
					<div>
						<input
							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
119
							placeholder={$i18n.t('Add a short title for this prompt')}
Timothy J. Baek's avatar
Timothy J. Baek committed
120
121
122
							bind:value={title}
							required
						/>
Timothy J. Baek's avatar
Timothy J. Baek committed
123
124
125
126
					</div>
				</div>

				<div class="my-2">
127
					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
128

Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131
132
133
134
					<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
135
						<input
Timothy J. Baek's avatar
Timothy J. Baek committed
136
137
138
139
							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
Timothy J. Baek's avatar
Timothy J. Baek committed
140
141
142
							required
						/>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
143
144

					<div class="text-xs text-gray-400 dark:text-gray-500">
145
146
147
						{$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
148
						>
149
						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
Timothy J. Baek's avatar
Timothy J. Baek committed
150
151
152
							class=" text-gray-600 dark:text-gray-300 font-medium"
						>
							/{command}
153
						</span>" &nbsp;{$i18n.t('to chat input.')}
Timothy J. Baek's avatar
Timothy J. Baek committed
154
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
				</div>

				<div class="my-2">
					<div class="flex w-full justify-between">
159
						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162
163
164
165
					</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"
166
167
168
								placeholder={$i18n.t(
									`Write a summary in 50 words that summarizes [topic or keyword].`
								)}
Timothy J. Baek's avatar
Timothy J. Baek committed
169
170
171
172
173
174
								rows="6"
								bind:value={content}
								required
							/>
						</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
175
						<div class="text-xs text-gray-400 dark:text-gray-500">
176
177
178
179
							ⓘ {$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
180
							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
181
182
183
184
185
186
187
188
189
							{$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.')}
Timothy J. Baek's avatar
Timothy J. Baek committed
190
191
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
192
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197
198
199
200
201

				<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}
					>
202
						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

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