+page.svelte 6.19 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 {
Timothy J. Baek's avatar
Timothy J. Baek committed
39
			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
42
		loading = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
43
44
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
47
	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
48

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

Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
56
	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
57

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
63
64
65
66
67
68
				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
69
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
70
71
		} else {
			goto('/prompts');
Timothy J. Baek's avatar
Timothy J. Baek committed
72
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
73
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
74
75
</script>

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

			<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>
101
				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
102
103
104
105
106
107
108
109
110
			</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
111
				<div class="my-2">
112
					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
113

Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116
117
118
119
120
					<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
						/>
Timothy J. Baek's avatar
Timothy J. Baek committed
121
122
123
124
					</div>
				</div>

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

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

					<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
155
				</div>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
172
						<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
Timothy J. Baek's avatar
Timothy J. Baek committed
173
							>
Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
							. 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> .
Timothy J. Baek's avatar
Timothy J. Baek committed
177
178
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
179
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
180
181
182
183
184
185
186
187
188

				<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}
					>
189
						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

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