Syntax highlighting + copy to clipboard button (#30)

* add highlight.js for syntax highlighting + add CodeBlock and CopyToClipboard components

* use clipboard.js for CopyToClipboard button + add Tooltip component

* do not include Tailwind classes in template since it can't parse them

* remove hack to strip model messages "endoftext" for now since it breaks code blocks

* move styles.css to /styles/main.css

* fix import + remove unused component

* auto detect language if not returned by model

* remove clipboard.js dependency and use native API

* rename icons with Icon prefix

---------

Co-authored-by: Eliott C <[email protected]>

package-lock.json

@@ -11,6 +11,7 @@
 				"@huggingface/inference": "^2.0.0-rc2",
 				"autoprefixer": "^10.4.14",
 				"date-fns": "^2.29.3",
+				"highlight.js": "^11.7.0",
 				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
 				"postcss": "^8.4.21",
@@ -2124,6 +2125,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.7.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
+			"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",

package.json

@@ -34,6 +34,7 @@
 		"@huggingface/inference": "^2.0.0-rc2",
 		"autoprefixer": "^10.4.14",
 		"date-fns": "^2.29.3",
+		"highlight.js": "^11.7.0",
 		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",
 		"postcss": "^8.4.21",

src/lib/components/CopyToClipBoardBtn.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	import IconCopy from './icons/IconCopy.svelte';
+	import Tooltip from './Tooltip.svelte';
+
+	export let classNames = '';
+	export let value: string;
+
+	let isSuccess = false;
+	let timeout: any;
+
+	const handleClick = async () => {
+		// writeText() can be unavailable or fail in some cases (iframe, etc) so we try/catch
+		try {
+			await navigator.clipboard.writeText(value);
+
+			isSuccess = true;
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(() => {
+				isSuccess = false;
+			}, 1000);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	onDestroy(() => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+	});
+</script>
+
+<button
+	class="btn text-sm rounded-lg border py-2 px-2 shadow-sm border-gray-200 active:shadow-inner dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-400 transition-all {classNames}
+		{!isSuccess && 'text-gray-200 dark:text-gray-200'}
+		{isSuccess && 'text-green-500'}
+	"
+	title={'Copy to clipboard'}
+	type="button"
+	on:click={handleClick}
+>
+	<span class="relative">
+		<IconCopy />
+		<Tooltip classNames={isSuccess ? 'opacity-100' : 'opacity-0'} />
+	</span>
+</button>

src/lib/components/Tooltip.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = "";
+	export let label = "Copied";
+	export let position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2";
+</script>
+
+<div
+	class="
+		pointer-events-none absolute rounded bg-black py-1 px-2 font-normal leading-tight text-white shadow transition-opacity 
+		{position}
+		{classNames}
+	"
+>
+	<div
+		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
+		style="
+				border-left-color: transparent;
+				border-right-color: transparent;
+			"
+	/>
+	{label}
+</div>

src/lib/components/chat/ChatMessage.svelte

@@ -1,8 +1,74 @@
 <script lang="ts">
 	import { marked } from 'marked';
-	import type { Message } from '$lib/types/Message';
+	import type { Message } from '$lib/Types';
+	import { afterUpdate } from 'svelte';
+
+	import CopyToClipBoardBtn from '../CopyToClipBoardBtn.svelte';
 
 	export let message: Message;
+	let html = '';
+	let el: HTMLElement;
+
+	const renderer = new marked.Renderer();
+
+	// Add wrapper to code blocks
+	renderer.code = (code, lang) => {
+		return `
+			<div class="code-block">
+				<pre>
+					<code class="language-${lang}">${code}</code>
+				</pre>
+			</div>
+		`.replaceAll('\t', '');
+	};
+
+	const handleParsed = (err: Error | null, parsedHtml: string) => {
+		if (err) {
+			console.error(err);
+		} else {
+			html = parsedHtml;
+		}
+	};
+
+	const options: marked.MarkedOptions = {
+		...marked.getDefaults(),
+		gfm: true,
+		highlight: (code, lang, callback) => {
+			import('highlight.js').then(
+				({ default: hljs }) => {
+					const language = hljs.getLanguage(lang);
+					callback?.(null, hljs.highlightAuto(code, language?.aliases).value);
+				},
+				(err) => {
+					console.error(err);
+					callback?.(err);
+				}
+			);
+		},
+		renderer
+	};
+
+	$: marked(message.content, options, handleParsed);
+
+	afterUpdate(() => {
+		if (el) {
+			const codeBlocks = el.querySelectorAll('.code-block');
+
+			// Add copy to clipboard button to each code block
+			codeBlocks.forEach((block) => {
+				if (block.classList.contains('has-copy-btn')) return;
+
+				new CopyToClipBoardBtn({
+					target: block,
+					props: {
+						value: (block as HTMLElement).innerText ?? '',
+						classNames: 'absolute top-2 right-2'
+					}
+				});
+				block.classList.add('has-copy-btn');
+			});
+		}
+	});
 </script>
 
 {#if message.from === 'assistant'}
@@ -14,8 +80,9 @@
 		/>
 		<div
 			class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 prose text-gray-600 dark:text-gray-300"
+      bind:this={el}
 		>
-			{@html marked(message.content, { gfm: true })}
+			{@html html}
 		</div>
 	</div>
 {/if}

src/lib/components/icons/IconCopy.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="currentColor"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
+		transform="translate(0)"
+	/>
+	<path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)" /><rect fill="none" width="32" height="32" />
+</svg>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../styles.css';
+	import '../styles/main.css';
 	import type { LayoutData } from './$types';
 
 	export let data: LayoutData;

src/routes/conversation/[id]/+page.svelte

@@ -46,12 +46,8 @@
 					// First token has a space at the beginning, trim it
 					messages = [...messages, { from: 'assistant', content: data.token.text.trimStart() }];
 				} else {
-					const isEndOfText = endOfTextRegex.test(data.token.text);
-
-					lastMessage.content += isEndOfText ? data.token.text.replace('<', '') : data.token.text;
+					lastMessage.content += data.token.text;
 					messages = [...messages];
-
-					if (isEndOfText) break;
 				}
 			}
 		}

src/styles/highlight-js.css

@@ -0,0 +1,178 @@
+@import 'highlight.js/styles/atom-one-light';
+
+/* Dark Theme */
+/*
+Night Owl for highlight.js (c) Carl Baxter <[email protected]>
+An adaptation of Sarah Drasner's Night Owl VS Code Theme 
+https://github.com/sdras/night-owl-vscode-theme 
+Copyright (c) 2018 Sarah Drasner
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+.dark .hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 0.5em;
+	background: #011627;
+	color: #d6deeb;
+}
+
+/* General Purpose */
+.dark .hljs-keyword {
+	color: #c792ea;
+	font-style: italic;
+}
+.dark .hljs-built_in {
+	color: #addb67;
+	font-style: italic;
+}
+.dark .hljs-type {
+	color: #82aaff;
+}
+.dark .hljs-literal {
+	color: #ff5874;
+}
+.dark .hljs-number {
+	color: #f78c6c;
+}
+.dark .hljs-regexp {
+	color: #5ca7e4;
+}
+.dark .hljs-string {
+	color: #ecc48d;
+}
+.dark .hljs-subst {
+	color: #d3423e;
+}
+.dark .hljs-symbol {
+	color: #82aaff;
+}
+.dark .hljs-class {
+	color: #ffcb8b;
+}
+.dark .hljs-function {
+	color: #82aaff;
+}
+.dark .hljs-title {
+	color: #dcdcaa;
+	font-style: italic;
+}
+.dark .hljs-params {
+	color: #7fdbca;
+}
+
+/* Meta */
+.dark .hljs-comment {
+	color: #637777;
+	font-style: italic;
+}
+.dark .hljs-doctag {
+	color: #7fdbca;
+}
+.dark .hljs-meta {
+	color: #82aaff;
+}
+.dark .hljs-meta-keyword {
+	color: #82aaff;
+}
+.dark .hljs-meta-string {
+	color: #ecc48d;
+}
+
+/* Tags, attributes, config */
+.dark .hljs-section {
+	color: #82b1ff;
+}
+.dark .hljs-tag,
+.dark .hljs-name,
+.dark .hljs-builtin-name {
+	color: #7fdbca;
+}
+.dark .hljs-attr {
+	color: #7fdbca;
+}
+.dark .hljs-attribute {
+	color: #80cbc4;
+}
+.dark .hljs-variable {
+	color: #addb67;
+}
+
+/* Markup */
+.dark .hljs-bullet {
+	color: #d9f5dd;
+}
+.dark .hljs-code {
+	color: #80cbc4;
+}
+.dark .hljs-emphasis {
+	color: #c792ea;
+	font-style: italic;
+}
+.dark .hljs-strong {
+	color: #addb67;
+	font-weight: bold;
+}
+.dark .hljs-formula {
+	color: #c792ea;
+}
+.dark .hljs-link {
+	color: #ff869a;
+}
+.dark .hljs-quote {
+	color: #697098;
+	font-style: italic;
+}
+
+/* CSS */
+.dark .hljs-selector-tag {
+	color: #ff6363;
+}
+
+.dark .hljs-selector-id {
+	color: #fad430;
+}
+
+.dark .hljs-selector-class {
+	color: #addb67;
+	font-style: italic;
+}
+
+.dark .hljs-selector-attr,
+.dark .hljs-selector-pseudo {
+	color: #c792ea;
+	font-style: italic;
+}
+
+/* Templates */
+.dark .hljs-template-tag {
+	color: #c792ea;
+}
+.dark .hljs-template-variable {
+	color: #addb67;
+}
+
+/* diff */
+.dark .hljs-addition {
+	color: #addb67ff;
+	font-style: italic;
+}
+
+.dark .hljs-deletion {
+	color: #ef535090;
+	font-style: italic;
+}

src/{styles.css → styles/main.css}

@@ -1,9 +1,25 @@
+@import './highlight-js.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+	.btn {
+		@apply cursor-pointer select-none inline-flex justify-center items-center whitespace-nowrap border focus:outline-none focus:ring;
+	}
+}
+
 @layer utilities {
 	.scrollbar-custom {
 		@apply !scrollbar-thin !scrollbar-w-1 !scrollbar-thumb-rounded-full !scrollbar-track-transparent !scrollbar-thumb-black/10 dark:!scrollbar-thumb-white/10;
 	}
+
+	.code-block {
+		@apply relative bg-gray-100 dark:bg-gray-950 rounded-lg my-4;
+	}
+
+	.code-block > pre {
+		@apply overflow-auto px-5 py-3.5 text-gray-500 dark:text-gray-400;
+	}
 }