ResponseMessage.svelte 33.3 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
			<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>
376
					{#if message.progress || message.files}
377
						<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
							{#if message.progress}
								<div>
									<button
										class="h-16 flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
										type="button"
									>
										<div class="p-2.5 bg-red-400 text-white rounded-lg">
											<svg
												class=" w-6 h-6 translate-y-[0.5px]"
												fill="currentColor"
												viewBox="0 0 24 24"
												xmlns="http://www.w3.org/2000/svg"
												><style>
													.spinner_qM83 {
														animation: spinner_8HQG 1.05s infinite;
393
													}
394
395
													.spinner_oXPr {
														animation-delay: 0.1s;
396
													}
397
398
													.spinner_ZTLf {
														animation-delay: 0.2s;
399
													}
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
													@keyframes spinner_8HQG {
														0%,
														57.14% {
															animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
															transform: translate(0);
														}
														28.57% {
															animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
															transform: translateY(-6px);
														}
														100% {
															transform: translate(0);
														}
													}
												</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
													class="spinner_qM83 spinner_oXPr"
													cx="12"
													cy="12"
													r="2.5"
												/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
											>
										</div>
422

423
424
425
426
										<div class="flex flex-col justify-center -space-y-0.5">
											<div class=" dark:text-gray-100 text-sm font-medium line-clamp-2 text-wrap">
												{message.progress}
											</div>
427
										</div>
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
									</button>
								</div>
							{/if}
							{#if message.files}
								{#each message.files as file}
									<div>
										{#if file.type === 'websearch'}
											<button
												class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
												type="button"
											>
												<div class="p-2.5 bg-red-400 text-white rounded-lg">
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 24 24"
														fill="currentColor"
														class="w-6 h-6"
													>
														<path
															d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
														/>
														<path
															fill-rule="evenodd"
															d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
															clip-rule="evenodd"
														/>
														<path
															d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
														/>
													</svg>
												</div>

												<div class="flex flex-col justify-center -space-y-0.5">
													<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
														{file.name}
													</div>

													<div class=" text-gray-500 text-sm">{$i18n.t('Search Results')}</div>
												</div>
											</button>
										{/if}
469
									</div>
470
471
								{/each}
							{/if}
472
473
474
						</div>
					{/if}

475
					{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
476
						<div class="w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 my-2">
477
478
479
480
481
482
483
484
485
486
487
							<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
488
							<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
489
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
490
									id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
491
									class="px-4 py-2 bg-white hover:bg-gray-100 text-gray-800 transition rounded-3xl"
492
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
493
										cancelEditMessage();
494
									}}
495
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
496
									{$i18n.t('Cancel')}
497
498
499
								</button>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
500
									id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
501
									class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
502
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
503
										editMessageConfirmHandler();
504
505
									}}
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
506
									{$i18n.t('Save')}
507
								</button>
508
							</div>
509
510
511
512
513
514
515
516
517
518
519
520
521
522
						</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"
523
									>
524
525
526
527
528
529
530
531
532
										<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}
533
									</div>
534
535
536
537
								</div>
							{:else if message.content === ''}
								<Skeleton />
							{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
538
								{#each tokens as token, tokenIdx}
539
540
									{#if token.type === 'code'}
										<CodeBlock
Timothy J. Baek's avatar
Timothy J. Baek committed
541
											id={`${message.id}-${tokenIdx}`}
542
543
											lang={token?.lang ?? ''}
											code={revertSanitizedResponseContent(token?.text ?? '')}
544
545
546
547
548
549
550
551
552
553
554
555
556
										/>
									{: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
557
								<div class="mt-1 mb-2 w-full flex gap-1 items-center">
558
559
560
561
									{#each message.citations.reduce((acc, citation) => {
										citation.document.forEach((document, index) => {
											const metadata = citation.metadata?.[index];
											const id = metadata?.source ?? 'N/A';
562
563
564
565
566
											let source = citation?.source;
											// Check if ID looks like a URL
											if (id.startsWith('http://') || id.startsWith('https://')) {
												source = { name: id };
											}
567
568
569
570
571
572
573

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

											if (existingSource) {
												existingSource.document.push(document);
												existingSource.metadata.push(metadata);
											} else {
574
												acc.push( { id: id, source: source, document: [document], metadata: metadata ? [metadata] : [] } );
575
576
577
578
579
580
											}
										});
										return acc;
									}, []) as citation, idx}
										<div class="flex gap-1 text-xs font-semibold">
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
581
												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"
582
583
584
585
586
												on:click={() => {
													showCitationModal = true;
													selectedCitation = citation;
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
587
												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
588
589
													{idx + 1}
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
590
												<div class="flex-1 mx-2 line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
591
592
													{citation.source.name}
												</div>
593
594
595
596
597
598
599
600
											</button>
										</div>
									{/each}
								</div>
							{/if}

							{#if message.done || siblings.length > 1}
								<div
Timothy J. Baek's avatar
Timothy J. Baek committed
601
									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
602
603
								>
									{#if siblings.length > 1}
604
										<div class="flex self-center min-w-fit" dir="ltr">
605
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
606
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
607
608
609
610
611
612
												on:click={() => {
													showPreviousMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
613
614
615
616
617
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
618
												>
619
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
620
621
622
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M15.75 19.5 8.25 12l7.5-7.5"
623
624
625
													/>
												</svg>
											</button>
626

Timothy J. Baek's avatar
Timothy J. Baek committed
627
											<div
628
												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
629
630
											>
												{siblings.indexOf(message.id) + 1}/{siblings.length}
631
											</div>
632

633
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
634
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
635
636
637
638
639
640
												on:click={() => {
													showNextMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
641
642
643
644
645
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
646
												>
647
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
648
649
650
														stroke-linecap="round"
														stroke-linejoin="round"
														d="m8.25 4.5 7.5 7.5-7.5 7.5"
651
652
653
654
655
													/>
												</svg>
											</button>
										</div>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
656

657
									{#if message.done}
658
659
660
661
662
										{#if !readOnly}
											<Tooltip content={$i18n.t('Edit')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
663
														: '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"
664
665
666
667
668
669
670
671
													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
672
														stroke-width="2.3"
673
674
675
676
677
678
679
680
681
682
683
684
														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
685

686
687
688
689
										<Tooltip content={$i18n.t('Copy')} placement="bottom">
											<button
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
690
													: '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"
691
692
693
694
695
696
697
698
												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
699
													stroke-width="2.3"
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
													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
717
													: '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"
718
719
720
												on:click={() => {
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
Timothy J. Baek's avatar
Timothy J. Baek committed
721
													}
722
723
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
												}}
											>
												{#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
764
														stroke-width="2.3"
765
766
767
768
769
770
771
772
773
774
775
776
777
778
														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
779
														stroke-width="2.3"
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
														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
798
														: '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"
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
													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
845
															stroke-width="2.3"
846
847
848
849
850
851
852
853
854
855
856
857
858
															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
859

860
861
862
863
864
										{#if message.info}
											<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
												<button
													class=" {isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
865
														: '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"
866
867
868
869
870
871
872
873
874
													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
875
														stroke-width="2.3"
876
877
878
879
880
881
882
883
884
885
886
887
														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
888

889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
										{#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}

960
961
962
963
964
965
										{#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
966
														: '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"
967
968
969
970
971
972
973
974
													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
975
														stroke-width="2.3"
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
														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
998
														: '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"
999
													on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
1000
														regenerateResponse(message);
1001
													}}
1002
1003
1004
1005
1006
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
1007
														stroke-width="2.3"
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
														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}
1020
1021
1022
1023
									{/if}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
1024
							{#if message.done && showRateComment}
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
								<RateComment
									messageId={message.id}
									bind:show={showRateComment}
									bind:message
									on:submit={() => {
										updateChatMessages();
									}}
								/>
							{/if}
						</div>
					{/if}
1036
				</div>
1037
			</div>
1038
		</div>
1039
	</div>
1040
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051

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

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