ResponseMessage.svelte 33.2 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
	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';
8
	import mermaid from 'mermaid';
9

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

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

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

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

30
31
32
	import Name from './Name.svelte';
	import ProfileImage from './ProfileImage.svelte';
	import Skeleton from './Skeleton.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	import CodeBlock from './CodeBlock.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	import Image from '$lib/components/common/Image.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
35
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
36
	import RateComment from './RateComment.svelte';
37
	import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
38
	import Spinner from '$lib/components/common/Spinner.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
39
	import WebSearchResults from './ResponseMessage/WebSearchResults.svelte';
40
41
42
43
44
45

	export let message;
	export let siblings;

	export let isLastMessage = true;

46
47
	export let readOnly = false;

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

Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
	let model = null;
	$: model = $models.find((m) => m.id === message.model);

61
62
	let edit = false;
	let editedContent = '';
63
	let editTextAreaElement: HTMLTextAreaElement;
64
	let tooltipInstance = null;
65

Timothy J. Baek's avatar
Timothy J. Baek committed
66
	let sentencesAudio = {};
67
	let speaking = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
68
69
	let speakingIdx = null;

70
	let loadingSpeech = false;
71
72
	let generatingImage = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
73
	let showRateComment = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
74
	let showCitationModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
75

Timothy J. Baek's avatar
Timothy J. Baek committed
76
	let selectedCitation = null;
77

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
78
79
80
	$: tokens = marked.lexer(
		replaceTokens(sanitizeResponseContent(message?.content), model?.name, $user?.name)
	);
Timothy J. Baek's avatar
Timothy J. Baek committed
81
82
83
84
85
86
87
88

	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
89
90
	// Open all links in a new tab/window (from https://github.com/markedjs/marked/issues/655#issuecomment-383226346)
	const origLinkRenderer = renderer.link;
91
	renderer.link = (href, title, text) => {
Austen Adler's avatar
Austen Adler committed
92
93
94
95
		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
96
97
98
99
100
	const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		extensions: any;
	};

101
102
103
104
105
106
107
108
	$: if (message) {
		renderStyling();
	}

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

		if (tooltipInstance) {
109
			tooltipInstance[0]?.destroy();
110
111
112
113
114
		}

		renderLatex();

		if (message.info) {
115
116
117
118
119
120
121
			let tooltipContent = '';
			if (message.info.openai) {
				tooltipContent = `prompt_tokens: ${message.info.prompt_tokens ?? 'N/A'}<br/>
													completion_tokens: ${message.info.completion_tokens ?? 'N/A'}<br/>
													total_tokens: ${message.info.total_tokens ?? 'N/A'}`;
			} else {
				tooltipContent = `response_token/s: ${
122
123
124
125
126
127
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
128
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
129
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
130
131
132
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
133
						) / 100 ?? 'N/A'
134
					} tokens<br/>
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
                    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'
150
										}ms<br/>
151
152
153
154
                    approximate_total: ${approximateToHumanReadable(message.info.total_duration)}`;
			}
			tooltipInstance = tippy(`#info-${message.id}`, {
				content: `<span class="text-xs" id="tooltip-${message.id}">${tooltipContent}</span>`,
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
				allowHTML: true,
				theme: 'dark',
				arrow: false,
				offset: [0, 4]
159
160
161
162
163
			});
		}
	};

	const renderLatex = () => {
164
165
166
		let chatMessageElements = document
			.getElementById(`message-${message.id}`)
			?.getElementsByClassName('chat-assistant');
167

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
		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
				});
			}
184
185
186
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
	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
193
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
194
195
196
197
198
199
200
201
202
203

				if (Object.keys(sentencesAudio).length - 1 === idx) {
					speaking = null;
				}

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

204
205
	const toggleSpeakMessage = async () => {
		if (speaking) {
206
207
			try {
				speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
208

209
210
211
				sentencesAudio[speakingIdx].pause();
				sentencesAudio[speakingIdx].currentTime = 0;
			} catch {}
Timothy J. Baek's avatar
Timothy J. Baek committed
212
213
214

			speaking = null;
			speakingIdx = null;
215
		} else {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
			if ((message?.content ?? '').trim() !== '') {
				speaking = true;

				if ($config.audio.tts.engine === 'openai') {
					loadingSpeech = true;

					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);
							}
232
233
234
						} else {
							mergedTexts.push(currentText);
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
235
236
						return mergedTexts;
					}, []);
Timothy J. Baek's avatar
Timothy J. Baek committed
237

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
238
					console.log(sentences);
Timothy J. Baek's avatar
Timothy J. Baek committed
239

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
					if (sentences.length > 0) {
						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,
								$settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice,
								sentence
							).catch((error) => {
								toast.error(error);

								speaking = null;
								loadingSpeech = false;

								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
refac  
Timothy J. Baek committed
270
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
271
272
273
					} else {
						speaking = null;
						loadingSpeech = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
					}
				} else {
					let voices = [];
					const getVoicesLoop = setInterval(async () => {
						voices = await speechSynthesis.getVoices();
						if (voices.length > 0) {
							clearInterval(getVoicesLoop);

							const voice =
								voices
									?.filter(
										(v) =>
											v.voiceURI === ($settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice)
									)
									?.at(0) ?? undefined;

							console.log(voice);

							const speak = new SpeechSynthesisUtterance(message.content);

							console.log(speak);

							speak.onend = () => {
								speaking = null;
								if ($settings.conversationMode) {
									document.getElementById('voice-input-button')?.click();
								}
							};

							if (voice) {
								speak.voice = voice;
Timothy J. Baek's avatar
Timothy J. Baek committed
305
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
306

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
307
							speechSynthesis.speak(speak);
Timothy J. Baek's avatar
Timothy J. Baek committed
308
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
309
310
311
					}, 100);
				}
			} else {
SimonOriginal's avatar
SimonOriginal committed
312
				toast.error($i18n.t('No content to speak'));
Timothy J. Baek's avatar
Timothy J. Baek committed
313
			}
314
315
316
317
318
319
320
321
322
		}
	};

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

		await tick();

323
324
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
325
326
327
	};

	const editMessageConfirmHandler = async () => {
328
329
330
331
		if (editedContent === '') {
			editedContent = ' ';
		}

332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

348
349
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
350
351
352
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
353
354
355
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
356
			message.files = res.map((image) => ({
357
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
358
				url: `${image.url}`
359
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
360
361

			dispatch('save', message);
362
363
364
365
366
		}

		generatingImage = false;
	};

367
368
369
370
371
372
373
374
375
376
377
	$: if (!edit) {
		(async () => {
			await tick();
			renderStyling();

			await mermaid.run({
				querySelector: '.mermaid'
			});
		})();
	}

378
379
380
	onMount(async () => {
		await tick();
		renderStyling();
381
382
383
384

		await mermaid.run({
			querySelector: '.mermaid'
		});
385
386
387
	});
</script>

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

390
{#key message.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
391
392
393
394
395
	<div
		class=" flex w-full message-{message.id}"
		id="message-{message.id}"
		dir={$settings.chatDirection}
	>
396
		<ProfileImage
Timothy J. Baek's avatar
Timothy J. Baek committed
397
			src={model?.info?.meta?.profile_image_url ??
Timothy J. Baek's avatar
Timothy J. Baek committed
398
				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
399
		/>
400

Timothy J. Baek's avatar
Timothy J. Baek committed
401
		<div class="w-full overflow-hidden pl-1">
402
			<Name>
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
403
				{model?.name ?? message.model}
404
405

				{#if message.timestamp}
Timothy J. Baek's avatar
Timothy J. Baek committed
406
407
408
409
					<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'))}
410
411
412
413
					</span>
				{/if}
			</Name>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
414
			{#if (message?.files ?? []).filter((f) => f.type === 'image').length > 0}
415
416
417
418
419
420
421
422
423
424
				<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}
425

426
			<div
Liu Jiajun's avatar
Liu Jiajun committed
427
				class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-headings:-mb-4 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"
428
429
			>
				<div>
430
431
432
433
					{#if (message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]).length > 0}
						{@const status = (
							message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]
						).at(-1)}
Timothy J. Baek's avatar
Timothy J. Baek committed
434
						<div class="flex items-center gap-2 pt-1 pb-1">
435
							{#if status.done === false}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
436
437
								<div class="">
									<Spinner className="size-4" />
438
439
								</div>
							{/if}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
440

441
442
							{#if status?.action === 'web_search' && status?.urls}
								<WebSearchResults {status}>
Timothy J. Baek's avatar
Timothy J. Baek committed
443
444
									<div class="flex flex-col justify-center -space-y-0.5">
										<div class="text-base line-clamp-1 text-wrap">
445
											{status?.description}
Timothy J. Baek's avatar
Timothy J. Baek committed
446
447
448
449
450
451
										</div>
									</div>
								</WebSearchResults>
							{:else}
								<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">
452
										{status?.description}
Timothy J. Baek's avatar
Timothy J. Baek committed
453
									</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
454
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
455
							{/if}
456
457
458
						</div>
					{/if}

459
					{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
460
						<div class="w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 my-2">
461
462
463
464
465
466
467
468
469
							<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
refac  
Timothy J. Baek committed
470
471
472
473
474
475
476
477
478
479
480
481
								on:keydown={(e) => {
									if (e.key === 'Escape') {
										document.getElementById('close-edit-message-button')?.click();
									}

									const isCmdOrCtrlPressed = e.metaKey || e.ctrlKey;
									const isEnterPressed = e.key === 'Enter';

									if (isCmdOrCtrlPressed && isEnterPressed) {
										document.getElementById('save-edit-message-button')?.click();
									}
								}}
482
483
							/>

Timothy J. Baek's avatar
Timothy J. Baek committed
484
							<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
485
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
486
									id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
487
									class="px-4 py-2 bg-white hover:bg-gray-100 text-gray-800 transition rounded-3xl"
488
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
489
										cancelEditMessage();
490
									}}
491
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
492
									{$i18n.t('Cancel')}
493
494
495
								</button>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
496
									id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
497
									class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
498
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
499
										editMessageConfirmHandler();
500
501
									}}
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
502
									{$i18n.t('Save')}
503
								</button>
504
							</div>
505
506
507
						</div>
					{:else}
						<div class="w-full">
508
509
							{#if message.content === '' && !message.error}
								<Skeleton />
510
511
512
							{:else if message.content && message.error !== true}
								<!-- always show message contents even if there's an error -->
								<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->
513
514
								{#each tokens as token, tokenIdx}
									{#if token.type === 'code'}
515
516
517
518
519
520
521
522
523
										{#if token.lang === 'mermaid'}
											<pre class="mermaid">{revertSanitizedResponseContent(token.text)}</pre>
										{:else}
											<CodeBlock
												id={`${message.id}-${tokenIdx}`}
												lang={token?.lang ?? ''}
												code={revertSanitizedResponseContent(token?.text ?? '')}
											/>
										{/if}
524
525
526
527
528
529
530
531
532
533
									{:else}
										{@html marked.parse(token.raw, {
											...defaults,
											gfm: true,
											breaks: true,
											renderer
										})}
									{/if}
								{/each}
							{/if}
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
534

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
535
							{#if message.error}
536
537
538
539
540
541
542
543
544
545
								<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"
546
									>
547
548
549
550
551
552
553
554
										<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">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
555
										{message?.error?.content ?? message.content}
556
									</div>
557
558
559
560
								</div>
							{/if}

							{#if message.citations}
Timothy J. Baek's avatar
Timothy J. Baek committed
561
								<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
562
563
564
565
									{#each message.citations.reduce((acc, citation) => {
										citation.document.forEach((document, index) => {
											const metadata = citation.metadata?.[index];
											const id = metadata?.source ?? 'N/A';
566
567
568
569
570
											let source = citation?.source;
											// Check if ID looks like a URL
											if (id.startsWith('http://') || id.startsWith('https://')) {
												source = { name: id };
											}
571
572
573
574
575
576
577

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
631
											<div
632
												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
633
634
											>
												{siblings.indexOf(message.id) + 1}/{siblings.length}
635
											</div>
636

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

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

690
691
692
693
										<Tooltip content={$i18n.t('Copy')} 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 copy-response-button"
695
696
697
698
699
700
701
702
												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
703
													stroke-width="2.3"
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
													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
721
													: '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"
722
723
724
												on:click={() => {
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
												}}
											>
												{#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
768
														stroke-width="2.3"
769
770
771
772
773
774
775
776
777
778
779
780
781
782
														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
783
														stroke-width="2.3"
784
785
786
787
788
789
790
791
792
793
794
795
796
														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
797
										{#if $config?.features.enable_image_generation && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
798
											<Tooltip content={$i18n.t('Generate Image')} placement="bottom">
799
800
801
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
802
														: '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"
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
													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
849
															stroke-width="2.3"
850
851
852
853
854
855
856
857
858
859
860
861
862
															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
863

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

893
894
895
896
897
										{#if !readOnly}
											<Tooltip content={$i18n.t('Good Response')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
898
899
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
														?.annotation?.rating ?? null) === 1
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
														? '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'
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
933
934
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
														?.annotation?.rating ?? null) === -1
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
960
961
962
														? '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>

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

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

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

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