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

9
	import { fade } from 'svelte/transition';
Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import { createEventDispatcher } from 'svelte';
11
12
13
	import { onMount, tick, getContext } from 'svelte';

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

Timothy J. Baek's avatar
Timothy J. Baek committed
15
16
17
18
19
	const dispatch = createEventDispatcher();

	import { config, settings } from '$lib/stores';
	import { synthesizeOpenAISpeech } from '$lib/apis/openai';
	import { imageGenerations } from '$lib/apis/images';
20
21
22
23
24
	import {
		extractSentences,
		revertSanitizedResponseContent,
		sanitizeResponseContent
	} from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
25

26
27
28
	import Name from './Name.svelte';
	import ProfileImage from './ProfileImage.svelte';
	import Skeleton from './Skeleton.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
29
	import CodeBlock from './CodeBlock.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
30
	import Image from '$lib/components/common/Image.svelte';
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
31
	import { WEBUI_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	import RateComment from './RateComment.svelte';
34
35
36
37
38
39
40

	export let modelfiles = [];
	export let message;
	export let siblings;

	export let isLastMessage = true;

41
42
	export let readOnly = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
43
	export let updateChatMessages: Function;
44
45
46
47
48
49
	export let confirmEditResponseMessage: Function;
	export let showPreviousMessage: Function;
	export let showNextMessage: Function;
	export let rateMessage: Function;

	export let copyToClipboard: Function;
Timothy J. Baek's avatar
Timothy J. Baek committed
50
	export let continueGeneration: Function;
51
52
53
54
	export let regenerateResponse: Function;

	let edit = false;
	let editedContent = '';
55
	let editTextAreaElement: HTMLTextAreaElement;
56
	let tooltipInstance = null;
57

Timothy J. Baek's avatar
Timothy J. Baek committed
58
	let sentencesAudio = {};
59
	let speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
	let speakingIdx = null;

62
	let loadingSpeech = false;
63
64
	let generatingImage = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
65
66
	let showRateComment = false;

67
	$: tokens = marked.lexer(sanitizeResponseContent(message.content));
Timothy J. Baek's avatar
Timothy J. Baek committed
68
69
70
71
72
73
74
75
76
77
78
79
80

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

81
82
83
84
85
86
87
88
	$: if (message) {
		renderStyling();
	}

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

		if (tooltipInstance) {
89
			tooltipInstance[0]?.destroy();
90
91
92
93
94
95
		}

		renderLatex();

		if (message.info) {
			tooltipInstance = tippy(`#info-${message.id}`, {
96
				content: `<span class="text-xs" id="tooltip-${message.id}">response_token/s: ${
97
98
99
100
101
102
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
103
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
104
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
107
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
108
						) / 100 ?? 'N/A'
109
					} tokens<br/>
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
                    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: [
140
					{ left: '$$', right: '$$', display: false },
Timothy J. Baek's avatar
Timothy J. Baek committed
141
					{ left: '$ ', right: ' $', display: false },
142
143
144
					{ left: '\\(', right: '\\)', display: false },
					{ left: '\\[', right: '\\]', display: false },
					{ left: '[ ', right: ' ]', display: false }
145
146
147
148
149
150
151
				],
				// • rendering keys, e.g.:
				throwOnError: false
			});
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
155
156
157
	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
158
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
161

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
164
165

					if ($settings.conversationMode) {
						document.getElementById('voice-input-button')?.click();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169
170
171
172
				}

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

173
174
175
	const toggleSpeakMessage = async () => {
		if (speaking) {
			speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
176

Timothy J. Baek's avatar
Timothy J. Baek committed
177
178
179
180
181
			sentencesAudio[speakingIdx].pause();
			sentencesAudio[speakingIdx].currentTime = 0;

			speaking = null;
			speakingIdx = null;
182
183
		} else {
			speaking = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
184

Timothy J. Baek's avatar
Timothy J. Baek committed
185
			if ($settings?.audio?.TTSEngine === 'openai') {
186
				loadingSpeech = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
187

188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
				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
204
205
206
207
208
209
210
211
212
213
214
215
				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
216
						$settings?.audio?.speaker,
Timothy J. Baek's avatar
Timothy J. Baek committed
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
						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
232
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
235
236
237
238
239
240
			} 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
241
							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
242
243
244
245
246

						const speak = new SpeechSynthesisUtterance(message.content);

						speak.onend = () => {
							speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
247
248
249
							if ($settings.conversationMode) {
								document.getElementById('voice-input-button')?.click();
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
250
251
252
253
254
255
						};
						speak.voice = voice;
						speechSynthesis.speak(speak);
					}
				}, 100);
			}
256
257
258
259
260
261
262
263
264
		}
	};

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

		await tick();

265
266
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
267
268
269
	};

	const editMessageConfirmHandler = async () => {
270
271
272
273
		if (editedContent === '') {
			editedContent = ' ';
		}

274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

290
291
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
292
293
294
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
295
296
297
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
298
			message.files = res.map((image) => ({
299
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
300
				url: `${image.url}`
301
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
302
303

			dispatch('save', message);
304
305
306
307
308
		}

		generatingImage = false;
	};

309
310
311
312
313
314
	onMount(async () => {
		await tick();
		renderStyling();
	});
</script>

315
316
{#key message.id}
	<div class=" flex w-full message-{message.id}">
317
318
319
		<ProfileImage
			src={modelfiles[message.model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
		/>
320
321
322
323
324
325

		<div class="w-full overflow-hidden">
			<Name>
				{#if message.model in modelfiles}
					{modelfiles[message.model]?.title}
				{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
326
					{message.model ? ` ${message.model}` : ''}
327
328
329
330
				{/if}

				{#if message.timestamp}
					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
331
						{dayjs(message.timestamp * 1000).format($i18n.t('DD/MM/YYYY HH:mm'))}
332
333
334
335
336
337
					</span>
				{/if}
			</Name>

			{#if message.content === ''}
				<Skeleton />
338
			{:else}
339
340
341
342
343
				{#if message.files}
					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
						{#each message.files as file}
							<div>
								{#if file.type === 'image'}
Timothy J. Baek's avatar
Timothy J. Baek committed
344
									<Image src={file.url} />
345
346
347
348
349
350
								{/if}
							</div>
						{/each}
					</div>
				{/if}

351
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
352
					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 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-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line"
353
				>
354
355
356
357
358
					<div>
						{#if edit === true}
							<div class=" w-full">
								<textarea
									id="message-edit-{message.id}"
359
									bind:this={editTextAreaElement}
360
361
362
									class=" bg-transparent outline-none w-full resize-none"
									bind:value={editedContent}
									on:input={(e) => {
363
										e.target.style.height = '';
364
										e.target.style.height = `${e.target.scrollHeight}px`;
365
									}}
366
								/>
367

368
								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
369
									<button
370
										class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
371
										on:click={() => {
372
											editMessageConfirmHandler();
373
374
										}}
									>
375
										{$i18n.t('Save')}
376
377
378
									</button>

									<button
379
										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"
380
										on:click={() => {
381
											cancelEditMessage();
382
										}}
383
									>
384
										{$i18n.t('Cancel')}
385
386
387
388
389
390
391
392
									</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"
393
394
395
396
397
398
399
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke-width="1.5"
											stroke="currentColor"
400
											class="w-5 h-5 self-center"
401
402
403
404
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
405
												d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
406
407
408
											/>
										</svg>

409
410
411
412
413
414
415
										<div class=" self-center">
											{message.content}
										</div>
									</div>
								{:else}
									{#each tokens as token}
										{#if token.type === 'code'}
416
417
418
419
											<CodeBlock
												lang={token.lang}
												code={revertSanitizedResponseContent(token.text)}
											/>
420
421
422
423
424
425
426
427
428
429
430
431
432
										{:else}
											{@html marked.parse(token.raw, {
												...defaults,
												gfm: true,
												breaks: true,
												renderer
											})}
										{/if}
									{/each}
									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
								{/if}

								{#if message.done}
433
									<div
434
										class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
435
									>
436
										{#if siblings.length > 1}
Timothy J. Baek's avatar
Timothy J. Baek committed
437
											<div class="flex self-center min-w-fit">
438
												<button
439
													class="self-center dark:hover:text-white hover:text-black transition"
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
													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>

458
												<div class="text-xs font-bold self-center min-w-fit dark:text-gray-100">
459
460
461
462
													{siblings.indexOf(message.id) + 1} / {siblings.length}
												</div>

												<button
463
													class="self-center dark:hover:text-white hover:text-black transition"
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
													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}
483

484
485
486
487
488
489
490
491
492
										{#if !readOnly}
											<Tooltip content="Edit" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
													on:click={() => {
														editMessageHandler();
													}}
493
												>
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
														stroke-width="2"
														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}
Timothy J. Baek's avatar
Timothy J. Baek committed
511
512
513
514
515
516
517
518
519
520

										<Tooltip content="Copy" placement="bottom">
											<button
												class="{isLastMessage
													? 'visible'
													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition copy-response-button"
												on:click={() => {
													copyToClipboard(message.content);
												}}
											>
521
522
523
524
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
525
													stroke-width="2"
526
527
528
529
530
531
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
532
														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"
533
534
													/>
												</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
535
536
											</button>
										</Tooltip>
537

538
539
540
541
542
										{#if !readOnly}
											<Tooltip content="Good Response" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
543
544
														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
														?.rating === 1
545
546
547
548
														? 'bg-gray-100 dark:bg-gray-800'
														: ''} dark:hover:text-white hover:text-black transition"
													on:click={() => {
														rateMessage(message.id, 1);
Timothy J. Baek's avatar
Timothy J. Baek committed
549
														showRateComment = true;
550
													}}
Timothy J. Baek's avatar
Timothy J. Baek committed
551
												>
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
													<svg
														stroke="currentColor"
														fill="none"
														stroke-width="2"
														viewBox="0 0 24 24"
														stroke-linecap="round"
														stroke-linejoin="round"
														class="w-4 h-4"
														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
													>
												</button>
											</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
567

568
569
570
571
											<Tooltip content="Bad Response" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
572
573
														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
														?.rating === -1
574
575
576
577
														? 'bg-gray-100 dark:bg-gray-800'
														: ''} dark:hover:text-white hover:text-black transition"
													on:click={() => {
														rateMessage(message.id, -1);
Timothy J. Baek's avatar
Timothy J. Baek committed
578
														showRateComment = true;
579
													}}
Timothy J. Baek's avatar
Timothy J. Baek committed
580
												>
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
													<svg
														stroke="currentColor"
														fill="none"
														stroke-width="2"
														viewBox="0 0 24 24"
														stroke-linecap="round"
														stroke-linejoin="round"
														class="w-4 h-4"
														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
													>
												</button>
											</Tooltip>
										{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
597
598
599
600

										<Tooltip content="Read Aloud" placement="bottom">
											<button
												id="speak-button-{message.id}"
Timothy J. Baek's avatar
Timothy J. Baek committed
601
602
603
604
												class="{isLastMessage
													? 'visible'
													: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
												on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
605
606
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
607
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
608
609
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
610
												{#if loadingSpeech}
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
													<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
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
645
646
647
648
649
												{:else if speaking}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
650
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
651
652
653
654
655
656
657
658
659
														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>
660
661
662
663
664
												{:else}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
665
														stroke-width="2"
666
667
668
669
670
671
														stroke="currentColor"
														class="w-4 h-4"
													>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
672
															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"
673
674
675
														/>
													</svg>
												{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
676
											</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
677
678
										</Tooltip>

679
										{#if $config.images && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
											<Tooltip content="Generate Image" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition"
													on:click={() => {
														if (!generatingImage) {
															generateImage(message);
														}
													}}
												>
													{#if generatingImage}
														<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}
														<svg
															xmlns="http://www.w3.org/2000/svg"
															fill="none"
															viewBox="0 0 24 24"
731
															stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
732
733
734
735
736
737
738
739
740
741
742
743
															stroke="currentColor"
															class="w-4 h-4"
														>
															<path
																stroke-linecap="round"
																stroke-linejoin="round"
																d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
															/>
														</svg>
													{/if}
												</button>
											</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
744
745
										{/if}

746
										{#if message.info}
Timothy J. Baek's avatar
Timothy J. Baek committed
747
748
749
750
751
752
753
754
755
											<Tooltip content="Generation Info" placement="bottom">
												<button
													class=" {isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
													on:click={() => {
														console.log(message);
													}}
													id="info-{message.id}"
756
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
757
758
759
760
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
761
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
762
763
764
765
766
767
768
769
770
771
772
														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>
											</Tooltip>
773
774
										{/if}

775
										{#if isLastMessage && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
776
777
778
779
780
781
782
783
784
											<Tooltip content="Continue Response" placement="bottom">
												<button
													type="button"
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
													on:click={() => {
														continueGeneration();
													}}
Timothy J. Baek's avatar
Timothy J. Baek committed
785
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
786
787
788
789
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
790
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
														stroke="currentColor"
														class="w-4 h-4"
													>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
															d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
														/>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
															d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
														/>
													</svg>
												</button>
											</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
807

Timothy J. Baek's avatar
Timothy J. Baek committed
808
809
810
811
812
813
814
											<Tooltip content="Regenerate" placement="bottom">
												<button
													type="button"
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1 rounded dark:hover:text-white hover:text-black transition regenerate-response-button"
													on:click={regenerateResponse}
815
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
816
817
818
819
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
820
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
821
822
823
824
825
826
827
828
829
830
831
														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>
											</Tooltip>
832
833
834
										{/if}
									</div>
								{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
835
836
837
838
839
840
841
842
843
844

								{#if showRateComment}
									<RateComment
										bind:show={showRateComment}
										bind:message
										on:submit={() => {
											updateChatMessages();
										}}
									/>
								{/if}
845
846
847
							</div>
						{/if}
					</div>
848
				</div>
849
850
			{/if}
		</div>
851
	</div>
852
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
853
854
855
856
857
858
859
860
861
862
863

<style>
	.buttons::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

	.buttons {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
</style>