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

Timothy J. Baek's avatar
Timothy J. Baek committed
17
	import { config, models, 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';
26
	import { WEBUI_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
27

28
29
30
	import Name from './Name.svelte';
	import ProfileImage from './ProfileImage.svelte';
	import Skeleton from './Skeleton.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	import CodeBlock from './CodeBlock.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import Image from '$lib/components/common/Image.svelte';
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
	import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
36
37
38
39
40
41

	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
	export let regenerateResponse: Function;

Timothy J. Baek's avatar
Timothy J. Baek committed
54
55
56
	let model = null;
	$: model = $models.find((m) => m.id === message.model);

57
58
	let edit = false;
	let editedContent = '';
59
	let editTextAreaElement: HTMLTextAreaElement;
60
	let tooltipInstance = null;
61

Timothy J. Baek's avatar
Timothy J. Baek committed
62
	let sentencesAudio = {};
63
	let speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
64
65
	let speakingIdx = null;

66
	let loadingSpeech = false;
67
68
	let generatingImage = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
69
	let showRateComment = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
70
	let showCitationModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
71

Timothy J. Baek's avatar
Timothy J. Baek committed
72
	let selectedCitation = null;
73

74
	$: tokens = marked.lexer(sanitizeResponseContent(message?.content));
Timothy J. Baek's avatar
Timothy J. Baek committed
75
76
77
78
79
80
81
82
83
84
85
86
87

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

88
89
90
91
92
93
94
95
	$: if (message) {
		renderStyling();
	}

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

		if (tooltipInstance) {
96
			tooltipInstance[0]?.destroy();
97
98
99
100
101
102
		}

		renderLatex();

		if (message.info) {
			tooltipInstance = tippy(`#info-${message.id}`, {
103
				content: `<span class="text-xs" id="tooltip-${message.id}">response_token/s: ${
104
105
106
107
108
109
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
110
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
111
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
112
113
114
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
115
						) / 100 ?? 'N/A'
116
					} tokens<br/>
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
                    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'
132
										}ms<br/>
Self Denial's avatar
Self Denial committed
133
134
135
                    approximate_total: ${approximateToHumanReadable(
											message.info.total_duration
										)}</span>`,
136
137
138
139
140
141
				allowHTML: true
			});
		}
	};

	const renderLatex = () => {
142
143
144
		let chatMessageElements = document
			.getElementById(`message-${message.id}`)
			?.getElementsByClassName('chat-assistant');
145

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
		if (chatMessageElements) {
			for (const element of chatMessageElements) {
				auto_render(element, {
					// customised options
					// • auto-render specific keys, e.g.:
					delimiters: [
						{ left: '$$', right: '$$', display: false },
						{ left: '$ ', right: ' $', display: false },
						{ left: '\\(', right: '\\)', display: false },
						{ left: '\\[', right: '\\]', display: false },
						{ left: '[ ', right: ' ]', display: false }
					],
					// • rendering keys, e.g.:
					throwOnError: false
				});
			}
162
163
164
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
165
166
167
168
169
170
	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
171
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
175
176
177
178

					if ($settings.conversationMode) {
						document.getElementById('voice-input-button')?.click();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
179
180
181
182
183
184
185
				}

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

186
187
	const toggleSpeakMessage = async () => {
		if (speaking) {
188
189
			try {
				speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
190

191
192
193
				sentencesAudio[speakingIdx].pause();
				sentencesAudio[speakingIdx].currentTime = 0;
			} catch {}
Timothy J. Baek's avatar
Timothy J. Baek committed
194
195
196

			speaking = null;
			speakingIdx = null;
197
198
		} else {
			speaking = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
199

Timothy J. Baek's avatar
Timothy J. Baek committed
200
			if ($settings?.audio?.TTSEngine === 'openai') {
201
				loadingSpeech = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
202

203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
				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
219
220
221
222
223
224
225
226
227
228
229
230
				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
231
						$settings?.audio?.speaker,
232
						sentence,
Yanyutin753's avatar
Yanyutin753 committed
233
						$settings?.audio?.model
Timothy J. Baek's avatar
Timothy J. Baek committed
234
235
					).catch((error) => {
						toast.error(error);
236
237
238
239

						speaking = null;
						loadingSpeech = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
242
243
244
245
246
247
248
249
250
						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
251
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
254
255
256
257
258
259
			} 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
260
							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263
264
265

						const speak = new SpeechSynthesisUtterance(message.content);

						speak.onend = () => {
							speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
266
267
268
							if ($settings.conversationMode) {
								document.getElementById('voice-input-button')?.click();
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270
271
272
273
274
						};
						speak.voice = voice;
						speechSynthesis.speak(speak);
					}
				}, 100);
			}
275
276
277
278
279
280
281
282
283
		}
	};

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

		await tick();

284
285
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
286
287
288
	};

	const editMessageConfirmHandler = async () => {
289
290
291
292
		if (editedContent === '') {
			editedContent = ' ';
		}

293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

309
310
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
311
312
313
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
314
315
316
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
317
			message.files = res.map((image) => ({
318
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
319
				url: `${image.url}`
320
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322

			dispatch('save', message);
323
324
325
326
327
		}

		generatingImage = false;
	};

328
329
330
331
332
333
	onMount(async () => {
		await tick();
		renderStyling();
	});
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
334
335
<CitationsModal bind:show={showCitationModal} citation={selectedCitation} />

336
{#key message.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
337
338
339
340
341
	<div
		class=" flex w-full message-{message.id}"
		id="message-{message.id}"
		dir={$settings.chatDirection}
	>
342
		<ProfileImage
Timothy J. Baek's avatar
Timothy J. Baek committed
343
			src={model?.info?.meta?.profile_image_url ??
Timothy J. Baek's avatar
Timothy J. Baek committed
344
				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
345
		/>
346

Timothy J. Baek's avatar
Timothy J. Baek committed
347
		<div class="w-full overflow-hidden pl-1">
348
			<Name>
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
349
				{model?.name ?? message.model}
350
351

				{#if message.timestamp}
Timothy J. Baek's avatar
Timothy J. Baek committed
352
353
354
355
					<span
						class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase"
					>
						{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
356
357
358
359
					</span>
				{/if}
			</Name>

360
361
362
363
364
365
366
367
368
369
370
			{#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'}
								<Image src={file.url} />
							{/if}
						</div>
					{/each}
				</div>
			{/if}
371

372
373
374
375
376
			<div
				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"
			>
				<div>
					{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
377
						<div class="w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 my-2">
378
379
380
381
382
383
384
385
386
387
388
							<textarea
								id="message-edit-{message.id}"
								bind:this={editTextAreaElement}
								class=" bg-transparent outline-none w-full resize-none"
								bind:value={editedContent}
								on:input={(e) => {
									e.target.style.height = '';
									e.target.style.height = `${e.target.scrollHeight}px`;
								}}
							/>

Timothy J. Baek's avatar
Timothy J. Baek committed
389
							<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
390
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
391
									id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
392
									class="px-4 py-2 bg-white hover:bg-gray-100 text-gray-800 transition rounded-3xl"
393
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
394
										cancelEditMessage();
395
									}}
396
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
397
									{$i18n.t('Cancel')}
398
399
400
								</button>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
401
									id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
402
									class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
403
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
404
										editMessageConfirmHandler();
405
406
									}}
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
407
									{$i18n.t('Save')}
408
								</button>
409
							</div>
410
411
412
413
414
415
416
417
418
419
420
421
422
423
						</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"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="1.5"
										stroke="currentColor"
										class="w-5 h-5 self-center"
424
									>
425
426
427
428
429
430
431
432
433
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
										/>
									</svg>

									<div class=" self-center">
										{message.content}
434
									</div>
435
436
437
438
								</div>
							{:else if message.content === ''}
								<Skeleton />
							{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
439
								{#each tokens as token, tokenIdx}
440
441
									{#if token.type === 'code'}
										<CodeBlock
Timothy J. Baek's avatar
Timothy J. Baek committed
442
											id={`${message.id}-${tokenIdx}`}
443
444
											lang={token?.lang ?? ''}
											code={revertSanitizedResponseContent(token?.text ?? '')}
445
446
447
448
449
450
451
452
453
454
455
456
457
										/>
									{:else}
										{@html marked.parse(token.raw, {
											...defaults,
											gfm: true,
											breaks: true,
											renderer
										})}
									{/if}
								{/each}
							{/if}

							{#if message.citations}
Timothy J. Baek's avatar
Timothy J. Baek committed
458
								<div class="mt-1 mb-2 w-full flex gap-1 items-center">
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
									{#each message.citations.reduce((acc, citation) => {
										citation.document.forEach((document, index) => {
											const metadata = citation.metadata?.[index];
											const id = metadata?.source ?? 'N/A';

											const existingSource = acc.find((item) => item.id === id);

											if (existingSource) {
												existingSource.document.push(document);
												existingSource.metadata.push(metadata);
											} else {
												acc.push( { id: id, source: citation?.source, document: [document], metadata: metadata ? [metadata] : [] } );
											}
										});
										return acc;
									}, []) as citation, idx}
										<div class="flex gap-1 text-xs font-semibold">
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
477
												class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl"
478
479
480
481
482
												on:click={() => {
													showCitationModal = true;
													selectedCitation = citation;
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
483
												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
484
485
													{idx + 1}
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
486
												<div class="flex-1 mx-2 line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
487
488
													{citation.source.name}
												</div>
489
490
491
492
493
494
495
496
											</button>
										</div>
									{/each}
								</div>
							{/if}

							{#if message.done || siblings.length > 1}
								<div
Timothy J. Baek's avatar
Timothy J. Baek committed
497
									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
498
499
								>
									{#if siblings.length > 1}
500
										<div class="flex self-center min-w-fit" dir="ltr">
501
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
502
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
503
504
505
506
507
508
												on:click={() => {
													showPreviousMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
509
510
511
512
513
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
514
												>
515
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
516
517
518
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M15.75 19.5 8.25 12l7.5-7.5"
519
520
521
													/>
												</svg>
											</button>
522

Timothy J. Baek's avatar
Timothy J. Baek committed
523
											<div
524
												class="text-sm tracking-widest font-semibold self-center dark:text-gray-100 min-w-fit"
Timothy J. Baek's avatar
Timothy J. Baek committed
525
526
											>
												{siblings.indexOf(message.id) + 1}/{siblings.length}
527
											</div>
528

529
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
530
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
531
532
533
534
535
536
												on:click={() => {
													showNextMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
537
538
539
540
541
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
542
												>
543
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
544
545
546
														stroke-linecap="round"
														stroke-linejoin="round"
														d="m8.25 4.5 7.5 7.5-7.5 7.5"
547
548
549
550
551
													/>
												</svg>
											</button>
										</div>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
552

553
									{#if message.done}
554
555
556
557
558
										{#if !readOnly}
											<Tooltip content={$i18n.t('Edit')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
559
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
560
561
562
563
564
565
566
567
													on:click={() => {
														editMessageHandler();
													}}
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
568
														stroke-width="2.3"
569
570
571
572
573
574
575
576
577
578
579
580
														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
581

582
583
584
585
										<Tooltip content={$i18n.t('Copy')} placement="bottom">
											<button
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
586
													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
587
588
589
590
591
592
593
594
												on:click={() => {
													copyToClipboard(message.content);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
595
													stroke-width="2.3"
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														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"
													/>
												</svg>
											</button>
										</Tooltip>

										<Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
											<button
												id="speak-button-{message.id}"
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
613
													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
614
615
616
												on:click={() => {
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
												}}
											>
												{#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}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
660
														stroke-width="2.3"
661
662
663
664
665
666
667
668
669
670
671
672
673
674
														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"
Timothy J. Baek's avatar
Timothy J. Baek committed
675
														stroke-width="2.3"
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
														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>
										</Tooltip>

										{#if $config.images && !readOnly}
											<Tooltip content="Generate Image" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
694
														: 'invisible group-hover:visible'}  p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
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
740
													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"
Timothy J. Baek's avatar
Timothy J. Baek committed
741
															stroke-width="2.3"
742
743
744
745
746
747
748
749
750
751
752
753
754
															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>
										{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
755

756
757
758
759
760
										{#if message.info}
											<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
												<button
													class=" {isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
761
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
762
763
764
765
766
767
768
769
770
													on:click={() => {
														console.log(message);
													}}
													id="info-{message.id}"
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
771
														stroke-width="2.3"
772
773
774
775
776
777
778
779
780
781
782
783
														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>
										{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
784

785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
										{#if !readOnly}
											<Tooltip content={$i18n.t('Good Response')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {message
														?.annotation?.rating === 1
														? 'bg-gray-100 dark:bg-gray-800'
														: ''} dark:hover:text-white hover:text-black transition"
													on:click={() => {
														rateMessage(message.id, 1);
														showRateComment = true;

														window.setTimeout(() => {
															document
																.getElementById(`message-feedback-${message.id}`)
																?.scrollIntoView();
														}, 0);
													}}
												>
													<svg
														stroke="currentColor"
														fill="none"
														stroke-width="2.3"
														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>

											<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {message
														?.annotation?.rating === -1
														? 'bg-gray-100 dark:bg-gray-800'
														: ''} dark:hover:text-white hover:text-black transition"
													on:click={() => {
														rateMessage(message.id, -1);
														showRateComment = true;
														window.setTimeout(() => {
															document
																.getElementById(`message-feedback-${message.id}`)
																?.scrollIntoView();
														}, 0);
													}}
												>
													<svg
														stroke="currentColor"
														fill="none"
														stroke-width="2.3"
														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}

856
857
858
859
860
861
										{#if isLastMessage && !readOnly}
											<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
												<button
													type="button"
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
862
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
863
864
865
866
867
868
869
870
													on:click={() => {
														continueGeneration();
													}}
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
871
														stroke-width="2.3"
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
														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>

											<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
												<button
													type="button"
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
894
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
895
													on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
896
														regenerateResponse(message);
897
													}}
898
899
900
901
902
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
903
														stroke-width="2.3"
904
905
906
907
908
909
910
911
912
913
914
915
														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>
										{/if}
916
917
918
919
									{/if}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
920
							{#if message.done && showRateComment}
921
922
923
924
925
926
927
928
929
930
931
								<RateComment
									messageId={message.id}
									bind:show={showRateComment}
									bind:message
									on:submit={() => {
										updateChatMessages();
									}}
								/>
							{/if}
						</div>
					{/if}
932
				</div>
933
			</div>
934
		</div>
935
	</div>
936
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
937
938
939
940
941
942
943
944
945
946
947

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

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