UserMessage.svelte 15.8 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
3
	import dayjs from 'dayjs';

4
	import { tick, createEventDispatcher, getContext } from 'svelte';
5
6
	import Name from './Name.svelte';
	import ProfileImage from './ProfileImage.svelte';
7
	import { models, settings } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
8
	import Tooltip from '$lib/components/common/Tooltip.svelte';
9

10
	import { user as _user } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
11
	import { getFileContentById } from '$lib/apis/files';
12

13
14
	const i18n = getContext('i18n');

15
16
	const dispatch = createEventDispatcher();

17
18
19
	export let user;
	export let message;
	export let siblings;
20
	export let isFirstMessage: boolean;
21
	export let readOnly: boolean;
22
23
24
25
26
27
28
29

	export let confirmEditMessage: Function;
	export let showPreviousMessage: Function;
	export let showNextMessage: Function;
	export let copyToClipboard: Function;

	let edit = false;
	let editedContent = '';
30
	let messageEditTextAreaElement: HTMLTextAreaElement;
31
32
33
34
35
36
	const editMessageHandler = async () => {
		edit = true;
		editedContent = message.content;

		await tick();

37
38
		messageEditTextAreaElement.style.height = '';
		messageEditTextAreaElement.style.height = `${messageEditTextAreaElement.scrollHeight}px`;
39

40
		messageEditTextAreaElement?.focus();
41
42
43
44
45
46
47
48
49
50
51
52
53
	};

	const editMessageConfirmHandler = async () => {
		confirmEditMessage(message.id, editedContent);

		edit = false;
		editedContent = '';
	};

	const cancelEditMessage = () => {
		edit = false;
		editedContent = '';
	};
54
55
56
57

	const deleteMessageHandler = async () => {
		dispatch('delete', message.id);
	};
58
59
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
60
<div class=" flex w-full user-message" dir={$settings.chatDirection}>
Timothy J. Baek's avatar
Timothy J. Baek committed
61
62
63
	{#if !($settings?.chatBubble ?? true)}
		<ProfileImage
			src={message.user
64
				? $models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ?? '/user.png'
Timothy J. Baek's avatar
Timothy J. Baek committed
65
66
67
				: user?.profile_image_url ?? '/user.png'}
		/>
	{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
68
	<div class="w-full overflow-hidden pl-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
69
70
71
72
		{#if !($settings?.chatBubble ?? true)}
			<div>
				<Name>
					{#if message.user}
73
74
						{$i18n.t('You')}
						<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
75
					{:else if $settings.showUsername || $_user.name !== user.name}
Timothy J. Baek's avatar
Timothy J. Baek committed
76
						{user.name}
Timothy J. Baek's avatar
Timothy J. Baek committed
77
					{:else}
78
						{$i18n.t('You')}
Timothy J. Baek's avatar
Timothy J. Baek committed
79
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
80
81

					{#if message.timestamp}
Timothy J. Baek's avatar
Timothy J. Baek committed
82
83
84
85
						<span
							class=" invisible group-hover:visible text-gray-400 text-xs font-medium uppercase"
						>
							{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
89
90
						</span>
					{/if}
				</Name>
			</div>
		{/if}
91
92

		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
93
			class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
94
95
		>
			{#if message.files}
Timothy J. Baek's avatar
Timothy J. Baek committed
96
				<div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
97
					{#each message.files as file}
Timothy J. Baek's avatar
Timothy J. Baek committed
98
						<div class={$settings?.chatBubble ?? true ? 'self-end' : ''}>
99
100
							{#if file.type === 'image'}
								<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
103
104
105
106
							{:else if file.type === 'file'}
								<button
									class="h-16 w-72 flex items-center space-x-3 px-2.5 dark:bg-gray-850 rounded-xl border border-gray-200 dark:border-none text-left"
									type="button"
									on:click={async () => {
										if (file?.url) {
Timothy J. Baek's avatar
Timothy J. Baek committed
107
											getFileContentById(file.id).then((blob) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
												if (blob) {
													const url = URL.createObjectURL(blob);
													window.open(url, '_blank').focus();
												}
											});
										}
									}}
								>
									<div class="p-2.5 bg-red-400 text-white rounded-lg">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											fill="currentColor"
											class="w-6 h-6"
										>
											<path
												fill-rule="evenodd"
												d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
												clip-rule="evenodd"
											/>
											<path
												d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
											/>
										</svg>
									</div>

									<div class="flex flex-col justify-center -space-y-0.5">
										<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
											{file.name}
										</div>

										<div class=" text-gray-500 text-sm">{$i18n.t('File')}</div>
									</div>
								</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
142
							{:else if file.type === 'doc'}
Timothy J. Baek's avatar
Timothy J. Baek committed
143
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
144
									class="h-16 w-72 flex items-center space-x-3 px-2.5 dark:bg-gray-850 rounded-xl border border-gray-200 dark:border-none text-left"
Timothy J. Baek's avatar
Timothy J. Baek committed
145
146
147
148
149
150
									type="button"
									on:click={() => {
										if (file?.url) {
											window.open(file?.url, '_blank').focus();
										}
									}}
Timothy J. Baek's avatar
Timothy J. Baek committed
151
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
152
									<div class="p-2.5 bg-red-400 text-white rounded-lg">
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											fill="currentColor"
											class="w-6 h-6"
										>
											<path
												fill-rule="evenodd"
												d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
												clip-rule="evenodd"
											/>
											<path
												d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
											/>
										</svg>
									</div>

									<div class="flex flex-col justify-center -space-y-0.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
171
										<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
											{file.name}
										</div>

175
										<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
176
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
177
								</button>
178
179
							{:else if file.type === 'collection'}
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
180
									class="h-16 w-72 flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
									type="button"
								>
									<div class="p-2.5 bg-red-400 text-white rounded-lg">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											fill="currentColor"
											class="w-6 h-6"
										>
											<path
												d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
											/>
											<path
												d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
											/>
										</svg>
									</div>

									<div class="flex flex-col justify-center -space-y-0.5">
										<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
201
											{file?.title ?? `#${file.name}`}
202
203
										</div>

204
										<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
205
206
									</div>
								</button>
207
208
209
210
211
212
213
							{/if}
						</div>
					{/each}
				</div>
			{/if}

			{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
214
				<div class=" w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 mb-2">
215
216
					<textarea
						id="message-edit-{message.id}"
217
						bind:this={messageEditTextAreaElement}
218
219
220
						class=" bg-transparent outline-none w-full resize-none"
						bind:value={editedContent}
						on:input={(e) => {
221
222
							e.target.style.height = '';
							e.target.style.height = `${e.target.scrollHeight}px`;
223
						}}
224
						on:keydown={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
225
226
227
							if (e.key === 'Escape') {
								document.getElementById('close-edit-message-button')?.click();
							}
228

Timothy J. Baek's avatar
Timothy J. Baek committed
229
							const isCmdOrCtrlPressed = e.metaKey || e.ctrlKey;
230
231
232
233
234
235
							const isEnterPressed = e.key === 'Enter';

							if (isCmdOrCtrlPressed && isEnterPressed) {
								document.getElementById('save-edit-message-button')?.click();
							}
						}}
236
237
					/>

Timothy J. Baek's avatar
Timothy J. Baek committed
238
					<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
239
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
240
							id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
241
							class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
242
							on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
243
								cancelEditMessage();
244
245
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
246
							{$i18n.t('Cancel')}
247
248
249
						</button>

						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
250
							id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
251
							class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
252
							on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
253
								editMessageConfirmHandler();
254
255
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
256
							{$i18n.t('Send')}
257
258
259
260
261
						</button>
					</div>
				</div>
			{:else}
				<div class="w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
262
					<div class="flex {$settings?.chatBubble ?? true ? 'justify-end' : ''} mb-2">
Timothy J. Baek's avatar
Timothy J. Baek committed
263
						<div
Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
267
268
							class="rounded-3xl {$settings?.chatBubble ?? true
								? `max-w-[90%] px-5 py-2  bg-gray-50 dark:bg-gray-850 ${
										message.files ? 'rounded-tr-lg' : ''
								  }`
								: ''}  "
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270
271
272
						>
							<pre id="user-message">{message.content}</pre>
						</div>
					</div>
273

Timothy J. Baek's avatar
Timothy J. Baek committed
274
275
276
					<div
						class=" flex {$settings?.chatBubble ?? true
							? 'justify-end'
Timothy J. Baek's avatar
Timothy J. Baek committed
277
							: ''}  text-gray-600 dark:text-gray-500"
Timothy J. Baek's avatar
Timothy J. Baek committed
278
279
280
					>
						{#if !($settings?.chatBubble ?? true)}
							{#if siblings.length > 1}
Timothy J. Baek's avatar
Timothy J. Baek committed
281
								<div class="flex self-center" dir="ltr">
Timothy J. Baek's avatar
Timothy J. Baek committed
282
283
284
285
286
									<button
										class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
										on:click={() => {
											showPreviousMessage(message);
										}}
287
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											stroke-width="2.5"
											class="size-3.5"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="M15.75 19.5 8.25 12l7.5-7.5"
											/>
										</svg>
									</button>
303

Timothy J. Baek's avatar
Timothy J. Baek committed
304
305
306
									<div class="text-sm tracking-widest font-semibold self-center dark:text-gray-100">
										{siblings.indexOf(message.id) + 1}/{siblings.length}
									</div>
307

Timothy J. Baek's avatar
Timothy J. Baek committed
308
309
310
311
312
									<button
										class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
										on:click={() => {
											showNextMessage(message);
										}}
313
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											stroke-width="2.5"
											class="size-3.5"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="m8.25 4.5 7.5 7.5-7.5 7.5"
											/>
										</svg>
									</button>
								</div>
							{/if}
331
						{/if}
332
						{#if !readOnly}
333
							<Tooltip content={$i18n.t('Edit')} placement="bottom">
334
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
335
									class="invisible group-hover:visible p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
336
337
338
									on:click={() => {
										editMessageHandler();
									}}
Timothy J. Baek's avatar
Timothy J. Baek committed
339
								>
340
341
342
343
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
344
										stroke-width="2.3"
345
346
347
348
349
350
351
352
353
354
355
356
										stroke="currentColor"
										class="w-4 h-4"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
										/>
									</svg>
								</button>
							</Tooltip>
						{/if}
357

358
						<Tooltip content={$i18n.t('Copy')} placement="bottom">
Timothy J. Baek's avatar
Timothy J. Baek committed
359
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
360
								class="invisible group-hover:visible p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
361
								on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
362
									copyToClipboard(message.content);
Timothy J. Baek's avatar
Timothy J. Baek committed
363
								}}
364
							>
Timothy J. Baek's avatar
Timothy J. Baek committed
365
366
367
368
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
369
									stroke-width="2.3"
Timothy J. Baek's avatar
Timothy J. Baek committed
370
371
372
373
374
375
									stroke="currentColor"
									class="w-4 h-4"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
376
										d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
Timothy J. Baek's avatar
Timothy J. Baek committed
377
378
379
									/>
								</svg>
							</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
380
381
						</Tooltip>

382
						{#if !isFirstMessage && !readOnly}
383
							<Tooltip content={$i18n.t('Delete')} placement="bottom">
Timothy J. Baek's avatar
Timothy J. Baek committed
384
385
386
387
388
389
390
391
392
393
								<button
									class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
									on:click={() => {
										deleteMessageHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
394
										stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
395
396
397
398
399
400
401
402
403
404
405
										stroke="currentColor"
										class="w-4 h-4"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
										/>
									</svg>
								</button>
							</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
406
						{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
407
408
409

						{#if $settings?.chatBubble ?? true}
							{#if siblings.length > 1}
Timothy J. Baek's avatar
Timothy J. Baek committed
410
								<div class="flex self-center" dir="ltr">
Timothy J. Baek's avatar
Timothy J. Baek committed
411
412
413
414
415
									<button
										class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
										on:click={() => {
											showPreviousMessage(message);
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
416
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											stroke-width="2.5"
											class="size-3.5"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="M15.75 19.5 8.25 12l7.5-7.5"
											/>
										</svg>
									</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
432

Timothy J. Baek's avatar
Timothy J. Baek committed
433
434
435
									<div class="text-sm tracking-widest font-semibold self-center dark:text-gray-100">
										{siblings.indexOf(message.id) + 1}/{siblings.length}
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
436

Timothy J. Baek's avatar
Timothy J. Baek committed
437
438
439
440
441
									<button
										class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
										on:click={() => {
											showNextMessage(message);
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
442
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											stroke-width="2.5"
											class="size-3.5"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="m8.25 4.5 7.5 7.5-7.5 7.5"
											/>
										</svg>
									</button>
								</div>
							{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
460
						{/if}
461
462
463
464
465
466
					</div>
				</div>
			{/if}
		</div>
	</div>
</div>