ResponseMessage.svelte 34.9 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';
Timothy J. Baek's avatar
Timothy J. Baek committed
40
	import Sparkles from '$lib/components/icons/Sparkles.svelte';
41
42
43
44
45
46

	export let message;
	export let siblings;

	export let isLastMessage = true;

47
48
	export let readOnly = false;

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

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

63
64
	let edit = false;
	let editedContent = '';
65
	let editTextAreaElement: HTMLTextAreaElement;
66
	let tooltipInstance = null;
67

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

72
	let loadingSpeech = false;
73
74
	let generatingImage = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
75
	let showRateComment = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
76
	let showCitationModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
77

Timothy J. Baek's avatar
Timothy J. Baek committed
78
	let selectedCitation = null;
79

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

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

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

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

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

		renderLatex();

		if (message.info) {
117
118
119
120
121
122
123
			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: ${
124
125
126
127
128
129
					`${
						Math.round(
							((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
						) / 100
					} tokens` ?? 'N/A'
				}<br/>
130
					prompt_token/s: ${
Danny Liu's avatar
Danny Liu committed
131
						Math.round(
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
							((message.info.prompt_eval_count ?? 0) /
								(message.info.prompt_eval_duration / 1000000000)) *
								100
Danny Liu's avatar
Danny Liu committed
135
						) / 100 ?? 'N/A'
136
					} tokens<br/>
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
                    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'
152
										}ms<br/>
153
154
155
156
                    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
157
158
159
160
				allowHTML: true,
				theme: 'dark',
				arrow: false,
				offset: [0, 4]
161
162
163
164
165
			});
		}
	};

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

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
170
171
172
173
174
175
176
177
		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 },
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
						{ left: '\\pu{', right: '}', display: false },
						{ left: '\\ce{', right: '}', display: false },
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
180
						{ left: '\\(', right: '\\)', display: false },
Timothy J. Baek's avatar
Timothy J. Baek committed
181
						{ left: '( ', right: ' )', display: false },
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
182
						{ left: '\\[', right: '\\]', display: false },
Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186
187
188
						{ left: '[ ', right: ' ]', display: false },
						{ left: '\\begin{equation}', right: '\\end{equation}', display: true },
						{ left: '\\begin{align}', right: '\\end{align}', display: true },
						{ left: '\\begin{alignat}', right: '\\end{alignat}', display: true },
						{ left: '\\begin{gather}', right: '\\end{gather}', display: true },
						{ left: '\\begin{CD}', right: '\\end{CD}', display: true }
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
189
190
191
192
193
					],
					// • rendering keys, e.g.:
					throwOnError: false
				});
			}
194
195
196
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
197
198
199
200
201
202
	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
203
				await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
204
205
206
207
208
209
210
211
212
213

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

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

214
215
	const toggleSpeakMessage = async () => {
		if (speaking) {
216
217
			try {
				speechSynthesis.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
218

219
220
221
				sentencesAudio[speakingIdx].pause();
				sentencesAudio[speakingIdx].currentTime = 0;
			} catch {}
Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224

			speaking = null;
			speakingIdx = null;
225
		} else {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
226
227
228
			if ((message?.content ?? '').trim() !== '') {
				speaking = true;

Timothy J. Baek's avatar
Timothy J. Baek committed
229
				if ($config.audio.tts.engine !== '') {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
230
231
232
233
234
235
236
237
238
239
240
241
					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);
							}
242
243
244
						} else {
							mergedTexts.push(currentText);
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
245
246
						return mergedTexts;
					}, []);
Timothy J. Baek's avatar
Timothy J. Baek committed
247

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
248
					console.log(sentences);
Timothy J. Baek's avatar
Timothy J. Baek committed
249

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
					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
280
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
281
282
283
					} else {
						speaking = null;
						loadingSpeech = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
					}
				} 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
315
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
316

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
317
							speechSynthesis.speak(speak);
Timothy J. Baek's avatar
Timothy J. Baek committed
318
						}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
319
320
321
					}, 100);
				}
			} else {
SimonOriginal's avatar
SimonOriginal committed
322
				toast.error($i18n.t('No content to speak'));
Timothy J. Baek's avatar
Timothy J. Baek committed
323
			}
324
325
326
327
328
329
330
331
332
		}
	};

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

		await tick();

333
334
		editTextAreaElement.style.height = '';
		editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
335
336
337
	};

	const editMessageConfirmHandler = async () => {
338
339
340
341
		if (editedContent === '') {
			editedContent = ' ';
		}

342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
		confirmEditResponseMessage(message.id, editedContent);

		edit = false;
		editedContent = '';

		await tick();
		renderStyling();
	};

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

358
359
	const generateImage = async (message) => {
		generatingImage = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
360
361
362
		const res = await imageGenerations(localStorage.token, message.content).catch((error) => {
			toast.error(error);
		});
363
364
365
		console.log(res);

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
366
			message.files = res.map((image) => ({
367
				type: 'image',
Timothy J. Baek's avatar
Timothy J. Baek committed
368
				url: `${image.url}`
369
			}));
Timothy J. Baek's avatar
Timothy J. Baek committed
370
371

			dispatch('save', message);
372
373
374
375
376
		}

		generatingImage = false;
	};

377
378
379
380
381
382
383
384
385
386
387
	$: if (!edit) {
		(async () => {
			await tick();
			renderStyling();

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

388
389
390
	onMount(async () => {
		await tick();
		renderStyling();
391
392
393
394

		await mermaid.run({
			querySelector: '.mermaid'
		});
395
396
397
	});
</script>

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

400
{#key message.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
404
405
	<div
		class=" flex w-full message-{message.id}"
		id="message-{message.id}"
		dir={$settings.chatDirection}
	>
406
		<ProfileImage
Timothy J. Baek's avatar
Timothy J. Baek committed
407
			src={model?.info?.meta?.profile_image_url ??
Timothy J. Baek's avatar
Timothy J. Baek committed
408
				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
409
		/>
410

Timothy J. Baek's avatar
Timothy J. Baek committed
411
		<div class="w-full overflow-hidden pl-1">
412
			<Name>
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
413
				{model?.name ?? message.model}
414
415

				{#if message.timestamp}
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
					<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'))}
420
421
422
423
					</span>
				{/if}
			</Name>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
424
			{#if (message?.files ?? []).filter((f) => f.type === 'image').length > 0}
425
426
427
428
429
430
431
432
433
434
				<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}
435

436
			<div
Liu Jiajun's avatar
Liu Jiajun committed
437
				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"
438
439
			>
				<div>
440
441
442
443
					{#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
444
						<div class="flex items-center gap-2 pt-1 pb-1">
445
							{#if status.done === false}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
446
447
								<div class="">
									<Spinner className="size-4" />
448
449
								</div>
							{/if}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
450

451
452
							{#if status?.action === 'web_search' && status?.urls}
								<WebSearchResults {status}>
Timothy J. Baek's avatar
Timothy J. Baek committed
453
454
									<div class="flex flex-col justify-center -space-y-0.5">
										<div class="text-base line-clamp-1 text-wrap">
455
											{status?.description}
Timothy J. Baek's avatar
Timothy J. Baek committed
456
457
458
459
460
461
										</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">
462
										{status?.description}
Timothy J. Baek's avatar
Timothy J. Baek committed
463
									</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
464
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
465
							{/if}
466
467
468
						</div>
					{/if}

469
					{#if edit === true}
Timothy J. Baek's avatar
Timothy J. Baek committed
470
						<div class="w-full bg-gray-50 dark:bg-gray-800 rounded-3xl px-5 py-3 my-2">
471
472
473
474
475
476
477
478
479
							<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
480
481
482
483
484
485
486
487
488
489
490
491
								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();
									}
								}}
492
493
							/>

Timothy J. Baek's avatar
Timothy J. Baek committed
494
							<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
495
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
496
									id="close-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
497
									class="px-4 py-2 bg-white hover:bg-gray-100 text-gray-800 transition rounded-3xl"
498
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
499
										cancelEditMessage();
500
									}}
501
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
502
									{$i18n.t('Cancel')}
503
504
505
								</button>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
506
									id="save-edit-message-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
507
									class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
508
									on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
509
										editMessageConfirmHandler();
510
511
									}}
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
512
									{$i18n.t('Save')}
513
								</button>
514
							</div>
515
516
517
						</div>
					{:else}
						<div class="w-full">
518
519
							{#if message.content === '' && !message.error}
								<Skeleton />
520
521
522
							{: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 -->
523
524
								{#each tokens as token, tokenIdx}
									{#if token.type === 'code'}
525
526
527
528
529
530
531
532
533
										{#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}
534
535
536
537
538
539
540
541
542
543
									{: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
544

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
545
							{#if message.error}
546
547
548
549
550
551
552
553
554
555
								<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"
556
									>
557
558
559
560
561
562
563
564
										<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
565
										{message?.error?.content ?? message.content}
566
									</div>
567
568
569
570
								</div>
							{/if}

							{#if message.citations}
Timothy J. Baek's avatar
Timothy J. Baek committed
571
								<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
572
573
574
575
									{#each message.citations.reduce((acc, citation) => {
										citation.document.forEach((document, index) => {
											const metadata = citation.metadata?.[index];
											const id = metadata?.source ?? 'N/A';
576
											let source = citation?.source;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
577
578
579
580
581

											if (metadata?.name) {
												source = { ...source, name: metadata.name };
											}

582
583
584
585
											// Check if ID looks like a URL
											if (id.startsWith('http://') || id.startsWith('https://')) {
												source = { name: id };
											}
586
587
588
589
590
591
592

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

											if (existingSource) {
												existingSource.document.push(document);
												existingSource.metadata.push(metadata);
											} else {
593
												acc.push( { id: id, source: source, document: [document], metadata: metadata ? [metadata] : [] } );
594
595
596
597
598
599
											}
										});
										return acc;
									}, []) as citation, idx}
										<div class="flex gap-1 text-xs font-semibold">
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
600
												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"
601
602
603
604
605
												on:click={() => {
													showCitationModal = true;
													selectedCitation = citation;
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
606
												<div class="bg-white dark:bg-gray-700 rounded-full size-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
607
608
													{idx + 1}
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
609
												<div class="flex-1 mx-2 line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
610
611
													{citation.source.name}
												</div>
612
613
614
615
616
617
618
619
											</button>
										</div>
									{/each}
								</div>
							{/if}

							{#if message.done || siblings.length > 1}
								<div
Timothy J. Baek's avatar
Timothy J. Baek committed
620
									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
621
622
								>
									{#if siblings.length > 1}
623
										<div class="flex self-center min-w-fit" dir="ltr">
624
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
625
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
626
627
628
629
630
631
												on:click={() => {
													showPreviousMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
632
633
634
635
636
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
637
												>
638
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
639
640
641
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M15.75 19.5 8.25 12l7.5-7.5"
642
643
644
													/>
												</svg>
											</button>
645

Timothy J. Baek's avatar
Timothy J. Baek committed
646
											<div
647
												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
648
649
											>
												{siblings.indexOf(message.id) + 1}/{siblings.length}
650
											</div>
651

652
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
653
												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
654
655
656
657
658
659
												on:click={() => {
													showNextMessage(message);
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
660
661
662
663
664
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													stroke-width="2.5"
													class="size-3.5"
665
												>
666
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
667
668
669
														stroke-linecap="round"
														stroke-linejoin="round"
														d="m8.25 4.5 7.5 7.5-7.5 7.5"
670
671
672
673
674
													/>
												</svg>
											</button>
										</div>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
675

676
									{#if message.done}
677
678
679
680
681
										{#if !readOnly}
											<Tooltip content={$i18n.t('Edit')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
682
														: '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"
683
684
685
686
687
688
689
690
													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
691
														stroke-width="2.3"
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="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
704

705
706
707
708
										<Tooltip content={$i18n.t('Copy')} placement="bottom">
											<button
												class="{isLastMessage
													? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
709
													: '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"
710
711
712
713
714
715
716
717
												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
718
													stroke-width="2.3"
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
													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
736
													: '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"
737
738
739
												on:click={() => {
													if (!loadingSpeech) {
														toggleSpeakMessage(message);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
770
771
772
773
774
775
776
777
778
779
780
781
782
												}}
											>
												{#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
783
														stroke-width="2.3"
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="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
798
														stroke-width="2.3"
799
800
801
802
803
804
805
806
807
808
809
810
811
														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
812
										{#if $config?.features.enable_image_generation && !readOnly}
Timothy J. Baek's avatar
Timothy J. Baek committed
813
											<Tooltip content={$i18n.t('Generate Image')} placement="bottom">
814
815
816
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
817
														: '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"
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
													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
864
															stroke-width="2.3"
865
866
867
868
869
870
871
872
873
874
875
876
877
															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
878

879
880
881
882
883
										{#if message.info}
											<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
												<button
													class=" {isLastMessage
														? 'visible'
Timothy J. Baek's avatar
Timothy J. Baek committed
884
														: '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"
885
886
887
888
889
890
891
892
893
													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
894
														stroke-width="2.3"
895
896
897
898
899
900
901
902
903
904
905
906
														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
907

908
909
910
911
912
										{#if !readOnly}
											<Tooltip content={$i18n.t('Good Response')} placement="bottom">
												<button
													class="{isLastMessage
														? 'visible'
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
913
914
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
														?.annotation?.rating ?? null) === 1
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
														? '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
948
949
														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(message
														?.annotation?.rating ?? null) === -1
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
														? '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
978
979
980
981
982
983
984
985
986
987
											{#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();
														}}
988
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
														<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);
														}}
1021
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
														<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
1038
1039
1040
1041
1042
1043
1044
1045
1046

												{#each model?.actions ?? [] as action}
													<Tooltip content={action.name} 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={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1047
																dispatch('action', action.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
1048
1049
															}}
														>
1050
1051
1052
															{#if action.icon_url}
																<img
																	src={action.icon_url}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1053
1054
1055
																	class="w-4 h-4 {action.icon_url.includes('svg')
																		? 'dark:invert-[80%]'
																		: ''}"
1056
1057
1058
1059
1060
1061
																	style="fill: currentColor;"
																	alt={action.name}
																/>
															{:else}
																<Sparkles strokeWidth="2.1" className="size-4" />
															{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1062
1063
1064
														</button>
													</Tooltip>
												{/each}
Timothy J. Baek's avatar
Timothy J. Baek committed
1065
											{/if}
1066
										{/if}
1067
1068
1069
1070
									{/if}
								</div>
							{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
1071
							{#if message.done && showRateComment}
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
								<RateComment
									messageId={message.id}
									bind:show={showRateComment}
									bind:message
									on:submit={() => {
										updateChatMessages();
									}}
								/>
							{/if}
						</div>
					{/if}
1083
				</div>
1084
			</div>
1085
		</div>
1086
	</div>
1087
{/key}
Timothy J. Baek's avatar
Timothy J. Baek committed
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098

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

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