auto-complete code ticks in live answers

src/lib/Chat.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Chat } from '$misc/shared';
 	import { afterUpdate, beforeUpdate, onMount } from 'svelte';
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
 	import snarkdown from 'snarkdown';
 	import { afterNavigate } from '$app/navigation';
-	import { chatStore, isLoadingAnswerStore, liveAnswerStore } from '$misc/stores';
+	import type { Chat } from '$misc/shared';
+	import { chatStore, enhancedLiveAnswerStore, isLoadingAnswerStore } from '$misc/stores';
 	import ChatMessages from './ChatMessages.svelte';
 
 	export let slug: string;
@@ -52,7 +52,7 @@
 			{#if $isLoadingAnswerStore}
 				<div class="place-self-start">
 					<div class="p-5 rounded-2xl variant-ghost-tertiary rounded-tl-none">
-						{@html snarkdown($liveAnswerStore.content)}
+						{@html snarkdown($enhancedLiveAnswerStore.content)}
 					</div>
 				</div>
 			{/if}

src/lib/ChatInput.svelte

@@ -16,6 +16,7 @@
 		eventSourceStore,
 		isLoadingAnswerStore,
 		liveAnswerStore,
+		enhancedLiveAnswerStore,
 		settingsStore
 	} from '$misc/stores';
 	import { countTokens } from '$misc/openai';
@@ -149,7 +150,7 @@
 	function addCompletionToChat(isAborted = false) {
 		const messageToAdd: ChatMessage = !isAborted
 			? { ...$liveAnswerStore }
-			: { ...$liveAnswerStore, isAborted: true };
+			: { ...$enhancedLiveAnswerStore, isAborted: true };
 
 		chatStore.addMessageToChat(slug, messageToAdd, lastUserMessage || undefined);
 		$isLoadingAnswerStore = false;

src/misc/markdownHelper.ts

@@ -0,0 +1,21 @@
+export function containsMarkdownCodeBlock(input: string): boolean {
+	const oneTickCodeBlockRegex = /`[^`]*`/;
+	const threeTicksCodeBlockRegex = /```[\s\S]*?```/;
+
+	return oneTickCodeBlockRegex.test(input) || threeTicksCodeBlockRegex.test(input);
+}
+
+export function closeOpenedCodeTicks(input: string) {
+	const oneTickMatches = input.match(/(?<!`)`(?!`)/g) || [];
+	const threeTickMatches = input.match(/(?<!``)```(?!``)/g) || [];
+
+	if (oneTickMatches.length % 2 !== 0) {
+		input += '`';
+	}
+
+	if (threeTickMatches.length % 2 !== 0) {
+		input += '\n```';
+	}
+
+	return input;
+}

src/misc/stores.ts

@@ -1,10 +1,11 @@
 import type { ChatCompletionRequestMessage } from 'openai';
-import { writable, type Readable, type Writable, readable, get } from 'svelte/store';
+import { writable, type Readable, type Writable, readable, get, derived } from 'svelte/store';
 import { localStorageStore } from '@skeletonlabs/skeleton';
 import { v4 as uuidv4 } from 'uuid';
 import { EventSource } from './eventSource';
 import { ChatStorekeeper } from './chatStorekeeper';
 import type { Chat, ChatMessage, ClientSettings } from './shared';
+import { closeOpenedCodeTicks } from './markdownHelper';
 
 export const settingsStore: Writable<ClientSettings> = localStorageStore('settingsStore', {});
 
@@ -13,6 +14,20 @@ export const liveAnswerStore: Writable<ChatCompletionRequestMessage> = writable(
 	content: ''
 });
 
+export const enhancedLiveAnswerStore = derived(liveAnswerStore, ($liveAnswer) => {
+	if (!$liveAnswer?.content) {
+		return $liveAnswer;
+	}
+
+	let { content } = $liveAnswer;
+	content = closeOpenedCodeTicks(content);
+
+	return {
+		...$liveAnswer,
+		content
+	} as ChatCompletionRequestMessage;
+});
+
 export const isLoadingAnswerStore: Writable<boolean> = writable(false);
 
 export const isTimeagoInitializedStore: Writable<boolean> = writable(false);