ResponseMessage.svelte 30.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
	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';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
36
	import Spinner from '$lib/components/common/Spinner.svelte';
37
38
39
40
41
42

	export let message;
	export let siblings;

	export let isLastMessage = true;

43
44
	export let readOnly = false;

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

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

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

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

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

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

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

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

	const renderer = new marked.Renderer();

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

Austen Adler's avatar
Austen Adler committed
84
85
	// Open all links in a new tab/window (from https://github.com/markedjs/marked/issues/655#issuecomment-383226346)
	const origLinkRenderer = renderer.link;
86
	renderer.link = (href, title, text) => {
Austen Adler's avatar
Austen Adler committed
87
88
89
90
		const html = origLinkRenderer.call(renderer, href, title, text);
		return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ');
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
91
92
93
94
95
	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		extensions: any;
	};

96
97
98
99
100
101
102
103
	$: if (message) {
		renderStyling();
	}

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

		if (tooltipInstance) {
104
			tooltipInstance[0]?.destroy();
105
106
107
108
109
110
		}

		renderLatex();

		if (message.info) {
			tooltipInstance = tippy(`#info-${message.id}`, {
111
				content: `<span class="text-xs" id="tooltip-${message.id}">response_token/s: ${
112
113
114
115
116
117
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
118
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
119
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
120
121
122
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
123
						) / 100 ?? 'N/A'
124
					} tokens<br/>
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'
140
										}ms<br/>
Self Denial's avatar
Self Denial committed
141
142
143
                    approximate_total: ${approximateToHumanReadable(
											message.info.total_duration
										)}</span>`,
144
145
146
147
148
149
				allowHTML: true
			});
		}
	};

	const renderLatex = () => {
150
151
152
		let chatMessageElements = document
			.getElementById(`message-${message.id}`)
			?.getElementsByClassName('chat-assistant');
153

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
		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
				});
			}
170
171
172
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
175
176
177
178
	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
179
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
180
181
182

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186

					if ($settings.conversationMode) {
						document.getElementById('voice-input-button')?.click();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
193
				}

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

194
195
	const toggleSpeakMessage = async () => {
		if (speaking) {
196
197
			try {
				speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
198

199
200
201
				sentencesAudio[speakingIdx].pause();
				sentencesAudio[speakingIdx].currentTime = 0;
			} catch {}
Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
204

			speaking = null;
			speakingIdx = null;
205
206
		} else {
			speaking = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
207

Timothy J. Baek's avatar
Timothy J. Baek committed
208
			if ($settings?.audio?.TTSEngine === 'openai') {
209
				loadingSpeech = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
210

211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
				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
227
228
229
230
231
232
233
234
235
236
237
238
				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
239
						$settings?.audio?.speaker,
240
						sentence,
Yanyutin753's avatar
Yanyutin753 committed
241
						$settings?.audio?.model
Timothy J. Baek's avatar
Timothy J. Baek committed
242
243
					).catch((error) => {
						toast.error(error);
244
245
246
247

						speaking = null;
						loadingSpeech = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
248
249
250
251
252
253
254
255
256
257
258
						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
259
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
260
261
262
263
264
265
266
267
			} 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
268
							voices?.filter((v) => v.name === $settings?.audio?.speaker)?.at(0) ?? undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270
271
272
273

						const speak = new SpeechSynthesisUtterance(message.content);

						speak.onend = () => {
							speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
274
275
276
							if ($settings.conversationMode) {
								document.getElementById('voice-input-button')?.click();
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
277
278
279
280
281
282
						};
						speak.voice = voice;
						speechSynthesis.speak(speak);
					}
				}, 100);
			}
283
284
285
286
287
288
289
290
291
		}
	};

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

		await tick();

292
293
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
294
295
296
	};

	const editMessageConfirmHandler = async () => {
297
298
299
300
		if (editedContent === '') {
			editedContent = ' ';
		}

301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

317
318
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
319
320
321
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
322
323
324
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
325
			message.files = res.map((image) => ({
326
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
327
				url: `${image.url}`
328
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
329
330

			dispatch('save', message);
331
332
333
334
335
		}

		generatingImage = false;
	};

336
337
338
339
340
341
	onMount(async () => {
		await tick();
		renderStyling();
	});
</script>

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

344
{#key message.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
345
346
347
348
349
	<div
		class=" flex w-full message-{message.id}"
		id="message-{message.id}"
		dir={$settings.chatDirection}
	>
350
		<ProfileImage
Timothy J. Baek's avatar
Timothy J. Baek committed
351
			src={model?.info?.meta?.profile_image_url ??
Timothy J. Baek's avatar
Timothy J. Baek committed
352
				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
353
		/>
354

Timothy J. Baek's avatar
Timothy J. Baek committed
355
		<div class="w-full overflow-hidden pl-1">
356
			<Name>
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
357
				{model?.name ?? message.model}
358
359

				{#if message.timestamp}
Timothy J. Baek's avatar
Timothy J. Baek committed
360
361
362
363
					<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'))}
364
365
366
367
					</span>
				{/if}
			</Name>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
368
			{#if (message?.files ?? []).filter((f) => f.type === 'image').length > 0}
369
370
371
372
373
374
375
376
377
378
				<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}
379

380
381
382
383
			<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>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
384
385
386
387
388
					{#if message?.status}
						<div class="flex items-center gap-2 py-1.5">
							{#if message?.status?.done === false}
								<div class="">
									<Spinner className="size-4" />
389
390
								</div>
							{/if}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
391
392
393
394
395
396

							<div class="flex flex-col justify-center -space-y-0.5">
								<div class=" text-gray-500 dark:text-gray-500 text-base line-clamp-1 text-wrap">
									{message.status.description}
								</div>
							</div>
397
398
399
						</div>
					{/if}

400
					{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
401
						<div class="w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 my-2">
402
403
404
405
406
407
408
409
410
411
412
							<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
413
							<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
414
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
415
									id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
416
									class="px-4 py-2 bg-white hover:bg-gray-100 text-gray-800 transition rounded-3xl"
417
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
418
										cancelEditMessage();
419
									}}
420
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
421
									{$i18n.t('Cancel')}
422
423
424
								</button>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
425
									id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
426
									class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
427
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
428
										editMessageConfirmHandler();
429
430
									}}
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
431
									{$i18n.t('Save')}
432
								</button>
433
							</div>
434
435
436
437
438
439
440
441
442
443
444
445
446
447
						</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"
448
									>
449
450
451
452
453
454
455
456
457
										<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}
458
									</div>
459
460
461
462
								</div>
							{:else if message.content === ''}
								<Skeleton />
							{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
463
								{#each tokens as token, tokenIdx}
464
465
									{#if token.type === 'code'}
										<CodeBlock
Timothy J. Baek's avatar
Timothy J. Baek committed
466
											id={`${message.id}-${tokenIdx}`}
467
468
											lang={token?.lang ?? ''}
											code={revertSanitizedResponseContent(token?.text ?? '')}
469
470
471
472
473
474
475
476
477
478
479
480
481
										/>
									{: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
482
								<div class="mt-1 mb-2 w-full flex gap-1 items-center">
483
484
485
486
									{#each message.citations.reduce((acc, citation) => {
										citation.document.forEach((document, index) => {
											const metadata = citation.metadata?.[index];
											const id = metadata?.source ?? 'N/A';
487
488
489
490
491
											let source = citation?.source;
											// Check if ID looks like a URL
											if (id.startsWith('http://') || id.startsWith('https://')) {
												source = { name: id };
											}
492
493
494
495
496
497
498

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

											if (existingSource) {
												existingSource.document.push(document);
												existingSource.metadata.push(metadata);
											} else {
499
												acc.push( { id: id, source: source, document: [document], metadata: metadata ? [metadata] : [] } );
500
501
502
503
504
505
											}
										});
										return acc;
									}, []) as citation, idx}
										<div class="flex gap-1 text-xs font-semibold">
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
506
												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"
507
508
509
510
511
												on:click={() => {
													showCitationModal = true;
													selectedCitation = citation;
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
512
												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
513
514
													{idx + 1}
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
515
												<div class="flex-1 mx-2 line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
516
517
													{citation.source.name}
												</div>
518
519
520
521
522
523
524
525
											</button>
										</div>
									{/each}
								</div>
							{/if}

							{#if message.done || siblings.length > 1}
								<div
Timothy J. Baek's avatar
Timothy J. Baek committed
526
									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
527
528
								>
									{#if siblings.length > 1}
529
										<div class="flex self-center min-w-fit" dir="ltr">
530
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
531
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
532
533
534
535
536
537
												on:click={() => {
													showPreviousMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
538
539
540
541
542
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
543
												>
544
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
545
546
547
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M15.75 19.5 8.25 12l7.5-7.5"
548
549
550
													/>
												</svg>
											</button>
551

Timothy J. Baek's avatar
Timothy J. Baek committed
552
											<div
553
												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
554
555
											>
												{siblings.indexOf(message.id) + 1}/{siblings.length}
556
											</div>
557

558
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
559
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
560
561
562
563
564
565
												on:click={() => {
													showNextMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
566
567
568
569
570
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
571
												>
572
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
573
574
575
														stroke-linecap="round"
														stroke-linejoin="round"
														d="m8.25 4.5 7.5 7.5-7.5 7.5"
576
577
578
579
580
													/>
												</svg>
											</button>
										</div>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
581

582
									{#if message.done}
583
584
585
586
587
										{#if !readOnly}
											<Tooltip content={$i18n.t('Edit')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
588
														: '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"
589
590
591
592
593
594
595
596
													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
597
														stroke-width="2.3"
598
599
600
601
602
603
604
605
606
607
608
609
														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
610

611
612
613
614
										<Tooltip content={$i18n.t('Copy')} placement="bottom">
											<button
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
615
													: '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"
616
617
618
619
620
621
622
623
												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
624
													stroke-width="2.3"
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
													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
642
													: '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"
643
644
645
												on:click={() => {
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
Timothy J. Baek's avatar
Timothy J. Baek committed
646
													}
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
												}}
											>
												{#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
689
														stroke-width="2.3"
690
691
692
693
694
695
696
697
698
699
700
701
702
703
														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
704
														stroke-width="2.3"
705
706
707
708
709
710
711
712
713
714
715
716
717
														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>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
718
										{#if $config?.features.enable_image_generation && !readOnly}
719
720
721
722
											<Tooltip content="Generate Image" placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
723
														: '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"
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
													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
770
															stroke-width="2.3"
771
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="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
784

785
786
787
788
789
										{#if message.info}
											<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
												<button
													class=" {isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
790
														: '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"
791
792
793
794
795
796
797
798
799
													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
800
														stroke-width="2.3"
801
802
803
804
805
806
807
808
809
810
811
812
														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
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
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
										{#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}

885
886
887
888
889
890
										{#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
891
														: '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"
892
893
894
895
896
897
898
899
													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
900
														stroke-width="2.3"
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
														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
923
														: '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"
924
													on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
925
														regenerateResponse(message);
926
													}}
927
928
929
930
931
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
932
														stroke-width="2.3"
933
934
935
936
937
938
939
940
941
942
943
944
														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}
945
946
947
948
									{/if}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
949
							{#if message.done && showRateComment}
950
951
952
953
954
955
956
957
958
959
960
								<RateComment
									messageId={message.id}
									bind:show={showRateComment}
									bind:message
									on:submit={() => {
										updateChatMessages();
									}}
								/>
							{/if}
						</div>
					{/if}
961
				</div>
962
			</div>
963
		</div>
964
	</div>
965
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
966
967
968
969
970
971
972
973
974
975
976

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

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