File size: 3,646 Bytes
a3ae6ee
5da61b4
 
4a6603b
0abf663
8811ee0
5da61b4
 
4a6603b
1eb0e2e
bd8c7a0
0ca99f1
9b20b88
189b280
8e370ca
 
1eb0e2e
a11cd21
cad5ba6
a11cd21
9b20b88
4f1405c
 
a415295
0ca99f1
 
bd8c7a0
da1e5da
3aa8136
4a6603b
 
3aa8136
da1e5da
 
8811ee0
4f1405c
 
 
 
 
 
 
 
8811ee0
 
5da61b4
cad5ba6
4f1405c
8811ee0
 
697285c
3aa8136
 
 
 
 
 
 
 
 
 
 
5da61b4
3aa8136
 
 
 
 
a3ae6ee
 
5da61b4
a3ae6ee
 
 
 
4a6603b
a3ae6ee
 
b2387f6
a3ae6ee
3aa8136
 
 
 
b2387f6
3aa8136
 
 
5da61b4
4f1405c
3aa8136
cad5ba6
3aa8136
 
 
a3ae6ee
 
 
5da61b4
4a6603b
b2387f6
 
7b1d57f
a3ae6ee
4a6603b
 
 
 
 
 
 
 
 
 
a3ae6ee
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script lang="ts">
	import { marked } from "marked";
	import type { Message } from "$lib/types/Message";
	import { afterUpdate, createEventDispatcher } from "svelte";
	import { deepestChild } from "$lib/utils/deepestChild";

	import CodeBlock from "../CodeBlock.svelte";
	import IconLoading from "../icons/IconLoading.svelte";
	import CarbonRotate360 from "~icons/carbon/rotate-360";
	import { PUBLIC_SEP_TOKEN } from "$env/static/public";

	function sanitizeMd(md: string) {
		return md
			.replace(/<\|[a-z]*$/, "")
			.replace(/<\|[a-z]+\|$/, "")
			.replace(/<$/, "")
			.replaceAll(PUBLIC_SEP_TOKEN, " ")
			.replaceAll(/<\|[a-z]+\|>/g, " ")
			.replaceAll(/<br\s?\/?>/gi, "\n")
			.trim()
			.replaceAll("<", "&lt;");
	}
	function unsanitizeMd(md: string) {
		return md.replaceAll("&lt;", "<");
	}

	export let message: Message;
	export let loading = false;

	const dispatch = createEventDispatcher<{ retry: void }>();

	let contentEl: HTMLElement;
	let loadingEl: IconLoading;
	let pendingTimeout: ReturnType<typeof setTimeout>;

	const renderer = new marked.Renderer();

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

	const options: marked.MarkedOptions = {
		...marked.getDefaults(),
		gfm: true,
		breaks: true,
		renderer,
	};

	$: tokens = marked.lexer(sanitizeMd(message.content));

	afterUpdate(() => {
		loadingEl?.$destroy();
		clearTimeout(pendingTimeout);

		// Add loading animation to the last message if update takes more than 600ms
		if (loading) {
			pendingTimeout = setTimeout(() => {
				if (contentEl) {
					loadingEl = new IconLoading({
						target: deepestChild(contentEl),
						props: { classNames: "loading inline ml-2" },
					});
				}
			}, 600);
		}
	});
</script>

{#if message.from === "assistant"}
	<div class="flex items-start justify-start gap-4 leading-relaxed">
		<img
			alt=""
			src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
			class="mt-5 h-3 w-3 flex-none select-none rounded-full shadow-lg"
		/>
		<div
			class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px] rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
		>
			{#if !message.content}
				<IconLoading classNames="absolute inset-0 m-auto" />
			{/if}
			<div
				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
				bind:this={contentEl}
			>
				{#each tokens as token}
					{#if token.type === "code"}
						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
					{:else}
						{@html marked(token.raw, options)}
					{/if}
				{/each}
			</div>
		</div>
	</div>
{/if}
{#if message.from === "user"}
	<div class="group relative flex items-start justify-start gap-4 max-sm:text-sm">
		<div class="mt-5 h-3 w-3 flex-none rounded-full" />
		<div class="whitespace-break-spaces rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400">
			{message.content.trim()}
		</div>
		{#if !loading && message.id}
			<button
				class="absolute right-0 top-3.5 cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
				title="Retry"
				type="button"
				on:click={() => dispatch("retry")}
			>
				<CarbonRotate360 />
			</button>
		{/if}
	</div>
{/if}