ResponseMessage.svelte 26.8 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
	const dispatch = createEventDispatcher();

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

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

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

	export let isLastMessage = true;

42
43
	export let readOnly = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
44
	export let updateChatMessages: Function;
45
46
47
48
49
50
	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
51
	export let continueGeneration: Function;
52
53
54
55
	export let regenerateResponse: Function;

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

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

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

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

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

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

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

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

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

		renderLatex();

		if (message.info) {
			tooltipInstance = tippy(`#info-${message.id}`, {
97
				content: `<span class="text-xs" id="tooltip-${message.id}">response_token/s: ${
98
99
100
101
102
103
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
104
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
105
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
106
107
108
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
109
						) / 100 ?? 'N/A'
110
					} tokens<br/>
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
                    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'
126
										}ms<br/>
Self Denial's avatar
Self Denial committed
127
128
129
                    approximate_total: ${approximateToHumanReadable(
											message.info.total_duration
										)}</span>`,
130
131
132
133
134
135
136
137
138
139
140
141
142
143
				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: [
144
					{ left: '$$', right: '$$', display: false },
Timothy J. Baek's avatar
Timothy J. Baek committed
145
					{ left: '$ ', right: ' $', display: false },
146
147
148
					{ left: '\\(', right: '\\)', display: false },
					{ left: '\\[', right: '\\]', display: false },
					{ left: '[ ', right: ' ]', display: false }
149
150
151
152
153
154
155
				],
				// • rendering keys, e.g.:
				throwOnError: false
			});
		}
	};

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

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169

					if ($settings.conversationMode) {
						document.getElementById('voice-input-button')?.click();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
172
173
174
175
176
				}

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

177
178
	const toggleSpeakMessage = async () => {
		if (speaking) {
179
180
			try {
				speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
181

182
183
184
				sentencesAudio[speakingIdx].pause();
				sentencesAudio[speakingIdx].currentTime = 0;
			} catch {}
Timothy J. Baek's avatar
Timothy J. Baek committed
185
186
187

			speaking = null;
			speakingIdx = null;
188
189
		} else {
			speaking = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
190

Timothy J. Baek's avatar
Timothy J. Baek committed
191
			if ($settings?.audio?.TTSEngine === 'openai') {
192
				loadingSpeech = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
193

194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
				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
210
211
212
213
214
215
216
217
218
219
220
221
				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
222
						$settings?.audio?.speaker,
Timothy J. Baek's avatar
Timothy J. Baek committed
223
224
225
						sentence
					).catch((error) => {
						toast.error(error);
226
227
228
229

						speaking = null;
						loadingSpeech = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
230
231
232
233
234
235
236
237
238
239
240
						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
241
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
242
243
244
245
246
247
248
249
			} 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
250
							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
254
255

						const speak = new SpeechSynthesisUtterance(message.content);

						speak.onend = () => {
							speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
256
257
258
							if ($settings.conversationMode) {
								document.getElementById('voice-input-button')?.click();
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
259
260
261
262
263
264
						};
						speak.voice = voice;
						speechSynthesis.speak(speak);
					}
				}, 100);
			}
265
266
267
268
269
270
271
272
273
		}
	};

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

		await tick();

274
275
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
276
277
278
	};

	const editMessageConfirmHandler = async () => {
279
280
281
282
		if (editedContent === '') {
			editedContent = ' ';
		}

283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

299
300
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
303
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
304
305
306
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
307
			message.files = res.map((image) => ({
308
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
309
				url: `${image.url}`
310
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
311
312

			dispatch('save', message);
313
314
315
316
317
		}

		generatingImage = false;
	};

318
319
320
321
322
323
	onMount(async () => {
		await tick();
		renderStyling();
	});
</script>

324
325
{#key message.id}
	<div class=" flex w-full message-{message.id}">
326
327
328
		<ProfileImage
			src={modelfiles[message.model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
		/>
329
330
331
332
333
334

		<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
335
					{message.model ? ` ${message.model}` : ''}
336
337
338
339
				{/if}

				{#if message.timestamp}
					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
340
						{dayjs(message.timestamp * 1000).format($i18n.t('DD/MM/YYYY HH:mm'))}
341
342
343
344
345
346
					</span>
				{/if}
			</Name>

			{#if message.content === ''}
				<Skeleton />
347
			{:else}
348
349
350
351
352
				{#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
353
									<Image src={file.url} />
354
355
356
357
358
359
								{/if}
							</div>
						{/each}
					</div>
				{/if}

360
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
361
					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"
362
				>
363
364
365
366
367
					<div>
						{#if edit === true}
							<div class=" w-full">
								<textarea
									id="message-edit-{message.id}"
368
									bind:this={editTextAreaElement}
369
370
371
									class=" bg-transparent outline-none w-full resize-none"
									bind:value={editedContent}
									on:input={(e) => {
372
										e.target.style.height = '';
373
										e.target.style.height = `${e.target.scrollHeight}px`;
374
									}}
375
								/>
376

377
								<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
378
									<button
379
										class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
380
										on:click={() => {
381
											editMessageConfirmHandler();
382
383
										}}
									>
384
										{$i18n.t('Save')}
385
386
387
									</button>

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

418
419
420
421
422
423
424
										<div class=" self-center">
											{message.content}
										</div>
									</div>
								{:else}
									{#each tokens as token}
										{#if token.type === 'code'}
425
426
427
428
											<CodeBlock
												lang={token.lang}
												code={revertSanitizedResponseContent(token.text)}
											/>
429
430
431
432
433
434
435
436
437
438
439
440
441
										{:else}
											{@html marked.parse(token.raw, {
												...defaults,
												gfm: true,
												breaks: true,
												renderer
											})}
										{/if}
									{/each}
									<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
								{/if}

								{#if message.done}
442
									<div
443
										class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
444
									>
445
										{#if siblings.length > 1}
Timothy J. Baek's avatar
Timothy J. Baek committed
446
											<div class="flex self-center min-w-fit">
447
												<button
448
													class="self-center dark:hover:text-white hover:text-black transition"
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
													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>

467
												<div class="text-xs font-bold self-center min-w-fit dark:text-gray-100">
468
469
470
471
													{siblings.indexOf(message.id) + 1} / {siblings.length}
												</div>

												<button
472
													class="self-center dark:hover:text-white hover:text-black transition"
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
													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}
492

493
494
495
496
497
498
499
500
501
										{#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();
													}}
502
												>
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
													<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
520
521
522
523
524
525
526
527
528
529

										<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);
												}}
											>
530
531
532
533
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
534
													stroke-width="2"
535
536
537
538
539
540
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
541
														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"
542
543
													/>
												</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
544
545
											</button>
										</Tooltip>
546

547
548
549
550
551
										{#if !readOnly}
											<Tooltip content="Good Response" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
552
553
														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
														?.rating === 1
554
555
556
557
														? '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
558
														showRateComment = true;
559
													}}
Timothy J. Baek's avatar
Timothy J. Baek committed
560
												>
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
													<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
576

577
578
579
580
											<Tooltip content="Bad Response" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
581
582
														: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
														?.rating === -1
583
584
585
586
														? '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
587
														showRateComment = true;
588
													}}
Timothy J. Baek's avatar
Timothy J. Baek committed
589
												>
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
													<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
606
607
608
609

										<Tooltip content="Read Aloud" placement="bottom">
											<button
												id="speak-button-{message.id}"
Timothy J. Baek's avatar
Timothy J. Baek committed
610
611
612
613
												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
614
615
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
616
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
617
618
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
619
												{#if loadingSpeech}
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
645
646
647
648
649
650
651
652
653
													<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
654
655
656
657
658
												{:else if speaking}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
659
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
660
661
662
663
664
665
666
667
668
														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>
669
670
671
672
673
												{:else}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
674
														stroke-width="2"
675
676
677
678
679
680
														stroke="currentColor"
														class="w-4 h-4"
													>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
681
															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"
682
683
684
														/>
													</svg>
												{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
685
											</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
686
687
										</Tooltip>

688
										{#if $config.images && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
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
731
732
733
734
735
736
737
738
739
											<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"
740
															stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
741
742
743
744
745
746
747
748
749
750
751
752
															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
753
754
										{/if}

755
										{#if message.info}
Timothy J. Baek's avatar
Timothy J. Baek committed
756
757
758
759
760
761
762
763
764
											<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}"
765
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
766
767
768
769
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
770
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
771
772
773
774
775
776
777
778
779
780
781
														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>
782
783
										{/if}

784
										{#if isLastMessage && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
785
786
787
788
789
790
791
792
793
											<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
794
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
795
796
797
798
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
799
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
														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
816

Timothy J. Baek's avatar
Timothy J. Baek committed
817
818
819
820
821
822
823
											<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}
824
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
825
826
827
828
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
829
														stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
830
831
832
833
834
835
836
837
838
839
840
														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>
841
842
843
										{/if}
									</div>
								{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
844
845
846
847
848
849
850
851
852
853

								{#if showRateComment}
									<RateComment
										bind:show={showRateComment}
										bind:message
										on:submit={() => {
											updateChatMessages();
										}}
									/>
								{/if}
854
855
856
							</div>
						{/if}
					</div>
857
				</div>
858
859
			{/if}
		</div>
860
	</div>
861
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
862
863
864
865
866
867
868
869
870
871
872

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

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