ResponseMessage.svelte 19.5 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import toast from 'svelte-french-toast';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
	import dayjs from 'dayjs';
4
	import { marked } from 'marked';
Timothy J. Baek's avatar
Timothy J. Baek committed
5
	import { settings } from '$lib/stores';
6
7
8
9
	import tippy from 'tippy.js';
	import auto_render from 'katex/dist/contrib/auto-render.mjs';
	import 'katex/dist/katex.min.css';

Timothy J. Baek's avatar
Timothy J. Baek committed
10
11
	import { onMount, tick } from 'svelte';

12
13
14
	import Name from './Name.svelte';
	import ProfileImage from './ProfileImage.svelte';
	import Skeleton from './Skeleton.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	import CodeBlock from './CodeBlock.svelte';
16

Timothy J. Baek's avatar
Timothy J. Baek committed
17
	import { synthesizeOpenAISpeech } from '$lib/apis/openai';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
	import { extractSentences } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
19

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
	export let modelfiles = [];
	export let message;
	export let siblings;

	export let isLastMessage = true;

	export let confirmEditResponseMessage: Function;
	export let showPreviousMessage: Function;
	export let showNextMessage: Function;
	export let rateMessage: Function;

	export let copyToClipboard: Function;
	export let regenerateResponse: Function;

	let edit = false;
	let editedContent = '';

	let tooltipInstance = null;
38

Timothy J. Baek's avatar
Timothy J. Baek committed
39
	let sentencesAudio = {};
40
	let speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
41
42
	let speakingIdx = null;

43
	let loadingSpeech = false;
44

Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
47
48
49
50
51
52
53
54
55
56
57
58
	$: tokens = marked.lexer(message.content);

	const renderer = new marked.Renderer();

	// For code blocks with simple backticks
	renderer.codespan = (code) => {
		return `<code>${code.replaceAll('&amp;', '&')}</code>`;
	};

	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		extensions: any;
	};

59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
	$: if (message) {
		renderStyling();
	}

	const renderStyling = async () => {
		await tick();

		if (tooltipInstance) {
			tooltipInstance[0].destroy();
		}

		renderLatex();

		if (message.info) {
			tooltipInstance = tippy(`#info-${message.id}`, {
				content: `<span class="text-xs" id="tooltip-${message.id}">token/s: ${
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
                    total_duration: ${
											Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ??
											'N/A'
										}ms<br/>
                    load_duration: ${
											Math.round(((message.info.load_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
										}ms<br/>
                    prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
                    prompt_eval_duration: ${
											Math.round(((message.info.prompt_eval_duration ?? 0) / 1000000) * 100) /
												100 ?? 'N/A'
										}ms<br/>
                    eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
                    eval_duration: ${
											Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
										}ms</span>`,
				allowHTML: true
			});
		}
	};

	const renderLatex = () => {
		let chatMessageElements = document.getElementsByClassName('chat-assistant');
		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];

		for (const element of chatMessageElements) {
			auto_render(element, {
				// customised options
				// • auto-render specific keys, e.g.:
				delimiters: [
					{ left: '$$', right: '$$', display: true },
					// { left: '$', right: '$', display: false },
					{ left: '\\(', right: '\\)', display: true },
					{ left: '\\[', right: '\\]', display: true }
				],
				// • rendering keys, e.g.:
				throwOnError: false
			});
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
122
123
124
125
126
127
	const playAudio = (idx) => {
		return new Promise((res) => {
			speakingIdx = idx;
			const audio = sentencesAudio[idx];
			audio.play();
			audio.onended = async (e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
128
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
135

					if ($settings.conversationMode) {
						document.getElementById('voice-input-button')?.click();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
136
137
138
139
140
141
142
				}

				res(e);
			};
		});
	};

143
144
145
	const toggleSpeakMessage = async () => {
		if (speaking) {
			speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
146

Timothy J. Baek's avatar
Timothy J. Baek committed
147
148
149
150
151
			sentencesAudio[speakingIdx].pause();
			sentencesAudio[speakingIdx].currentTime = 0;

			speaking = null;
			speakingIdx = null;
152
153
		} else {
			speaking = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
154

Timothy J. Baek's avatar
Timothy J. Baek committed
155
			if ($settings?.audio?.TTSEngine === 'openai') {
156
				loadingSpeech = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
157

158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
				const sentences = extractSentences(message.content).reduce((mergedTexts, currentText) => {
					const lastIndex = mergedTexts.length - 1;
					if (lastIndex >= 0) {
						const previousText = mergedTexts[lastIndex];
						const wordCount = previousText.split(/\s+/).length;
						if (wordCount < 2) {
							mergedTexts[lastIndex] = previousText + ' ' + currentText;
						} else {
							mergedTexts.push(currentText);
						}
					} else {
						mergedTexts.push(currentText);
					}
					return mergedTexts;
				}, []);

Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
177
178
179
180
181
182
183
184
185
				console.log(sentences);

				sentencesAudio = sentences.reduce((a, e, i, arr) => {
					a[i] = null;
					return a;
				}, {});

				let lastPlayedAudioPromise = Promise.resolve(); // Initialize a promise that resolves immediately

				for (const [idx, sentence] of sentences.entries()) {
					const res = await synthesizeOpenAISpeech(
						localStorage.token,
Timothy J. Baek's avatar
Timothy J. Baek committed
186
						$settings?.audio?.speaker,
Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
						sentence
					).catch((error) => {
						toast.error(error);
						return null;
					});

					if (res) {
						const blob = await res.blob();
						const blobUrl = URL.createObjectURL(blob);
						const audio = new Audio(blobUrl);
						sentencesAudio[idx] = audio;
						loadingSpeech = false;

						lastPlayedAudioPromise = lastPlayedAudioPromise.then(() => playAudio(idx));
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
202
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
203
204
205
206
207
208
209
210
			} else {
				let voices = [];
				const getVoicesLoop = setInterval(async () => {
					voices = await speechSynthesis.getVoices();
					if (voices.length > 0) {
						clearInterval(getVoicesLoop);

						const voice =
Timothy J. Baek's avatar
Timothy J. Baek committed
211
							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
212
213
214
215
216

						const speak = new SpeechSynthesisUtterance(message.content);

						speak.onend = () => {
							speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
217
218
219
							if ($settings.conversationMode) {
								document.getElementById('voice-input-button')?.click();
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
220
221
222
223
224
225
						};
						speak.voice = voice;
						speechSynthesis.speak(speak);
					}
				}, 100);
			}
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
255
256
257
258
259
260
261
262
		}
	};

	const editMessageHandler = async () => {
		edit = true;
		editedContent = message.content;

		await tick();
		const editElement = document.getElementById(`message-edit-${message.id}`);

		editElement.style.height = '';
		editElement.style.height = `${editElement.scrollHeight}px`;
	};

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

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

	const cancelEditMessage = async () => {
		edit = false;
		editedContent = '';
		await tick();
		renderStyling();
	};

	onMount(async () => {
		await tick();
		renderStyling();
	});
</script>

263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
{#key message.id}
	<div class=" flex w-full message-{message.id}">
		<ProfileImage src={modelfiles[message.model]?.imageUrl ?? '/favicon.png'} />

		<div class="w-full overflow-hidden">
			<Name>
				{#if message.model in modelfiles}
					{modelfiles[message.model]?.title}
				{:else}
					Ollama <span class=" text-gray-500 text-sm font-medium"
						>{message.model ? ` ${message.model}` : ''}</span
					>
				{/if}

				{#if message.timestamp}
					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
Timothy J. Baek's avatar
Timothy J. Baek committed
279
						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:mm')}
280
281
282
283
284
285
					</span>
				{/if}
			</Name>

			{#if message.content === ''}
				<Skeleton />
286
			{:else}
287
288
				<div
					class="prose chat-{message.role} w-full max-w-full 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"
289
				>
290
291
292
293
294
295
296
297
298
					<div>
						{#if edit === true}
							<div class=" w-full">
								<textarea
									id="message-edit-{message.id}"
									class=" bg-transparent outline-none w-full resize-none"
									bind:value={editedContent}
									on:input={(e) => {
										e.target.style.height = `${e.target.scrollHeight}px`;
299
									}}
300
								/>
301

302
								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
303
									<button
304
										class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
305
										on:click={() => {
306
											editMessageConfirmHandler();
307
308
										}}
									>
309
										Save
310
311
312
									</button>

									<button
313
										class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
314
										on:click={() => {
315
											cancelEditMessage();
316
										}}
317
318
319
320
321
322
323
324
325
326
									>
										Cancel
									</button>
								</div>
							</div>
						{:else}
							<div class="w-full">
								{#if message?.error === true}
									<div
										class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
327
328
329
330
331
332
333
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke-width="1.5"
											stroke="currentColor"
334
											class="w-5 h-5 self-center"
335
336
337
338
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
339
												d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
340
341
342
											/>
										</svg>

343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
										<div class=" self-center">
											{message.content}
										</div>
									</div>
								{:else}
									{#each tokens as token}
										{#if token.type === 'code'}
											<!-- {token.text} -->
											<CodeBlock lang={token.lang} code={token.text} />
										{:else}
											{@html marked.parse(token.raw, {
												...defaults,
												gfm: true,
												breaks: true,
												renderer
											})}
										{/if}
									{/each}
									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
								{/if}

								{#if message.done}
									<div class=" flex justify-start space-x-1 -mt-2">
										{#if siblings.length > 1}
											<div class="flex self-center">
												<button
													class="self-center"
													on:click={() => {
														showPreviousMessage(message);
													}}
												>
													<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="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
															clip-rule="evenodd"
														/>
													</svg>
												</button>

												<div class="text-xs font-bold self-center">
													{siblings.indexOf(message.id) + 1} / {siblings.length}
												</div>

												<button
													class="self-center"
													on:click={() => {
														showNextMessage(message);
													}}
												>
													<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="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
															clip-rule="evenodd"
														/>
													</svg>
												</button>
											</div>
										{/if}
413

414
415
416
										<button
											class="{isLastMessage
												? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
417
												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
418
419
420
421
											on:click={() => {
												editMessageHandler();
											}}
										>
422
423
424
425
426
427
428
429
430
431
432
											<svg
												xmlns="http://www.w3.org/2000/svg"
												fill="none"
												viewBox="0 0 24 24"
												stroke-width="1.5"
												stroke="currentColor"
												class="w-4 h-4"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
433
													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"
434
435
												/>
											</svg>
436
437
438
439
440
										</button>

										<button
											class="{isLastMessage
												? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
441
												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition copy-response-button"
442
443
444
445
											on:click={() => {
												copyToClipboard(message.content);
											}}
										>
446
447
448
449
450
451
452
453
454
455
456
											<svg
												xmlns="http://www.w3.org/2000/svg"
												fill="none"
												viewBox="0 0 24 24"
												stroke-width="1.5"
												stroke="currentColor"
												class="w-4 h-4"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
457
													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"
458
459
												/>
											</svg>
460
										</button>
461
462

										<button
463
											class="{isLastMessage
464
												? 'visible'
465
												: 'invisible group-hover:visible'} p-1 rounded {message.rating === 1
Timothy J. Baek's avatar
Timothy J. Baek committed
466
												? 'bg-gray-100 dark:bg-gray-800'
467
												: ''} transition"
468
											on:click={() => {
469
												rateMessage(message.id, 1);
470
471
472
											}}
										>
											<svg
473
												stroke="currentColor"
474
												fill="none"
475
												stroke-width="2"
476
												viewBox="0 0 24 24"
477
478
												stroke-linecap="round"
												stroke-linejoin="round"
479
												class="w-4 h-4"
480
481
482
483
												xmlns="http://www.w3.org/2000/svg"
												><path
													d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
												/></svg
484
485
486
487
488
											>
										</button>
										<button
											class="{isLastMessage
												? 'visible'
489
												: 'invisible group-hover:visible'} p-1 rounded {message.rating === -1
Timothy J. Baek's avatar
Timothy J. Baek committed
490
												? 'bg-gray-100 dark:bg-gray-800'
491
492
493
494
												: ''} transition"
											on:click={() => {
												rateMessage(message.id, -1);
											}}
495
496
										>
											<svg
497
												stroke="currentColor"
498
												fill="none"
499
												stroke-width="2"
500
												viewBox="0 0 24 24"
501
502
												stroke-linecap="round"
												stroke-linejoin="round"
503
												class="w-4 h-4"
504
505
506
507
												xmlns="http://www.w3.org/2000/svg"
												><path
													d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
												/></svg
508
509
											>
										</button>
510
511

										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
512
											id="speak-button-{message.id}"
513
514
											class="{isLastMessage
												? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
515
												: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition"
516
											on:click={() => {
517
518
519
												if (!loadingSpeech) {
													toggleSpeakMessage(message);
												}
520
521
											}}
										>
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
											{#if loadingSpeech}
												<svg
													class=" w-4 h-4"
													fill="currentColor"
													viewBox="0 0 24 24"
													xmlns="http://www.w3.org/2000/svg"
													><style>
														.spinner_S1WN {
															animation: spinner_MGfb 0.8s linear infinite;
															animation-delay: -0.8s;
														}
														.spinner_Km9P {
															animation-delay: -0.65s;
														}
														.spinner_JApP {
															animation-delay: -0.5s;
														}
														@keyframes spinner_MGfb {
															93.75%,
															100% {
																opacity: 0.2;
															}
														}
													</style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
														class="spinner_S1WN spinner_Km9P"
														cx="12"
														cy="12"
														r="3"
													/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /></svg
												>
											{:else if speaking}
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
													stroke-width="1.5"
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"
													/>
												</svg>
											{:else}
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
													stroke-width="1.5"
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
													/>
												</svg>
											{/if}
										</button>

										{#if message.info}
											<button
												class=" {isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
589
													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition whitespace-pre-wrap"
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
												on:click={() => {
													console.log(message);
												}}
												id="info-{message.id}"
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
													stroke-width="1.5"
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
													/>
												</svg>
											</button>
										{/if}

										{#if isLastMessage}
											<button
												type="button"
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
617
													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white transition regenerate-response-button"
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
												on:click={regenerateResponse}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
													stroke-width="1.5"
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
													/>
												</svg>
											</button>
										{/if}
									</div>
								{/if}
							</div>
						{/if}
					</div>
641
				</div>
642
643
			{/if}
		</div>
644
	</div>
645
{/key}