Prettier update (#54)

* Update .prettierrc

* prettify everthing

prettify everything

.eslintrc.cjs

@@ -1,23 +1,23 @@
 module.exports = {
 	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parser: "@typescript-eslint/parser",
+	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+	plugins: ["svelte3", "@typescript-eslint"],
+	ignorePatterns: ["*.cjs"],
+	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
 	settings: {
-		'svelte3/typescript': () => require('typescript')
+		"svelte3/typescript": () => require("typescript"),
 	},
 	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
+		sourceType: "module",
+		ecmaVersion: 2020,
 	},
 	rules: {
-		'no-shadow': ['error']
+		"no-shadow": ["error"],
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: true
-	}
+		node: true,
+	},
 };

.prettierrc

@@ -1,7 +1,6 @@
 {
 	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],

src/app.html

@@ -10,8 +10,8 @@
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 	<script>
-		if (localStorage.theme === 'dark') {
-			document.documentElement.classList.add('dark');
+		if (localStorage.theme === "dark") {
+			document.documentElement.classList.add("dark");
 		}
 	</script>
 </html>

src/hooks.server.ts

@@ -1,6 +1,6 @@
-import { COOKIE_NAME } from '$env/static/private';
-import type { Handle } from '@sveltejs/kit';
-import { addYears } from 'date-fns';
+import { COOKIE_NAME } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import { addYears } from "date-fns";
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const token = event.cookies.get(COOKIE_NAME);
@@ -9,11 +9,11 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	// Refresh cookie expiration date
 	event.cookies.set(COOKIE_NAME, event.locals.sessionId, {
-		path: '/',
-		sameSite: 'lax',
+		path: "/",
+		sameSite: "lax",
 		secure: true,
 		httpOnly: true,
-		expires: addYears(new Date(), 1)
+		expires: addYears(new Date(), 1),
 	});
 
 	const response = await resolve(event);

src/lib/actions/snapScrollToBottom.ts

@@ -1,5 +1,5 @@
-import { navigating } from '$app/stores';
-import { get } from 'svelte/store';
+import { navigating } from "$app/stores";
+import { get } from "svelte/store";
 
 /**
  * @param node element to snap scroll to bottom
@@ -31,18 +31,18 @@ export const snapScrollToBottom = (node: HTMLElement, dependency: any) => {
 		if (!force && isDetached && !get(navigating)) return;
 
 		node.scroll({
-			top: node.scrollHeight
+			top: node.scrollHeight,
 		});
 	};
 
-	node.addEventListener('scroll', handleScroll);
+	node.addEventListener("scroll", handleScroll);
 
 	updateScroll({ force: true });
 
 	return {
 		update: updateScroll,
 		destroy: () => {
-			node.removeEventListener('scroll', handleScroll);
-		}
+			node.removeEventListener("scroll", handleScroll);
+		},
 	};
 };

src/lib/buildPrompt.ts

@@ -1,9 +1,9 @@
 import {
 	PUBLIC_ASSISTANT_MESSAGE_TOKEN,
 	PUBLIC_SEP_TOKEN,
-	PUBLIC_USER_MESSAGE_TOKEN
-} from '$env/static/public';
-import type { Message } from './types/Message';
+	PUBLIC_USER_MESSAGE_TOKEN,
+} from "$env/static/public";
+import type { Message } from "./types/Message";
 
 /**
  * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
@@ -15,11 +15,11 @@ export function buildPrompt(messages: Message[]): string {
 		messages
 			.map(
 				(m) =>
-					(m.from === 'user'
+					(m.from === "user"
 						? PUBLIC_USER_MESSAGE_TOKEN + m.content
 						: PUBLIC_ASSISTANT_MESSAGE_TOKEN + m.content) +
-					(m.content.endsWith(PUBLIC_SEP_TOKEN) ? '' : PUBLIC_SEP_TOKEN)
+					(m.content.endsWith(PUBLIC_SEP_TOKEN) ? "" : PUBLIC_SEP_TOKEN)
 			)
-			.join('') + PUBLIC_ASSISTANT_MESSAGE_TOKEN
+			.join("") + PUBLIC_ASSISTANT_MESSAGE_TOKEN
 	);
 }

src/lib/components/CodeBlock.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { afterUpdate } from 'svelte';
-	import CopyToClipBoardBtn from './CopyToClipBoardBtn.svelte';
+	import { afterUpdate } from "svelte";
+	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
 
-	export let code = '';
-	export let lang = '';
+	export let code = "";
+	export let lang = "";
 
-	$: highlightedCode = '';
+	$: highlightedCode = "";
 
 	afterUpdate(async () => {
-		const { default: hljs } = await import('highlight.js');
+		const { default: hljs } = await import("highlight.js");
 		const language = hljs.getLanguage(lang);
 
 		highlightedCode = hljs.highlightAuto(code, language?.aliases).value;

src/lib/components/CopyToClipBoardBtn.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { onDestroy } from 'svelte';
+	import { onDestroy } from "svelte";
 
-	import IconCopy from './icons/IconCopy.svelte';
-	import Tooltip from './Tooltip.svelte';
+	import IconCopy from "./icons/IconCopy.svelte";
+	import Tooltip from "./Tooltip.svelte";
 
-	export let classNames = '';
+	export let classNames = "";
 	export let value: string;
 
 	let isSuccess = false;
@@ -39,12 +39,12 @@
 		{!isSuccess && 'text-gray-200 dark:text-gray-200'}
 		{isSuccess && 'text-green-500'}
 	"
-	title={'Copy to clipboard'}
+	title={"Copy to clipboard"}
 	type="button"
 	on:click={handleClick}
 >
 	<span class="relative">
 		<IconCopy />
-		<Tooltip classNames={isSuccess ? 'opacity-100' : 'opacity-0'} />
+		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
 	</span>
 </button>

src/lib/components/ScrollToBottomBtn.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import IconChevron from './icons/IconChevron.svelte';
-	import { onDestroy } from 'svelte';
+	import { fade } from "svelte/transition";
+	import IconChevron from "./icons/IconChevron.svelte";
+	import { onDestroy } from "svelte";
 
 	export let scrollNode: HTMLElement;
 	export { className as class };
 
 	let visible: boolean = false;
-	let className = '';
+	let className = "";
 
 	$: if (scrollNode) {
-		scrollNode.addEventListener('scroll', onScroll);
+		scrollNode.addEventListener("scroll", onScroll);
 	}
 
 	function onScroll() {
@@ -20,14 +20,14 @@
 
 	onDestroy(() => {
 		if (!scrollNode) return;
-		scrollNode.removeEventListener('scroll', onScroll);
+		scrollNode.removeEventListener("scroll", onScroll);
 	});
 </script>
 
 {#if visible}
 	<button
 		transition:fade={{ duration: 150 }}
-		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: 'smooth' })}
+		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
 		class="absolute flex rounded-full border w-10 h-10 items-center justify-center shadow bg-white dark:bg-gray-700 dark:border-gray-600 {className}"
 		><IconChevron /></button
 	>

src/lib/components/Tooltip.svelte

@@ -1,7 +1,7 @@
 <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';
+	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

src/lib/components/chat/ChatInput.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	export let value = '';
+	export let value = "";
 	export let minRows = 1;
 	export let maxRows: null | number = null;
-	export let placeholder = '';
+	export let placeholder = "";
 	export let disabled = false;
 	export let autofocus = false;
 
@@ -11,10 +11,10 @@
 
 	function handleKeydown(event: KeyboardEvent) {
 		// submit on enter
-		if (event.key === 'Enter' && !event.shiftKey) {
+		if (event.key === "Enter" && !event.shiftKey) {
 			event.preventDefault();
 
-			textareaElement.closest('form')?.requestSubmit();
+			textareaElement.closest("form")?.requestSubmit();
 		}
 	}
 
@@ -25,7 +25,7 @@
 	<pre
 		class="invisible py-3"
 		aria-hidden="true"
-		style="min-height: {minHeight}; max-height: {maxHeight}">{value + '&nbsp;\n'}</pre>
+		style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
 
 	<textarea
 		tabindex="0"

src/lib/components/chat/ChatIntroduction.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from '$env/static/public';
+	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from "$env/static/public";
 
-	import Logo from '$lib/components/icons/Logo.svelte';
-	import CarbonArrowUpRight from '~icons/carbon/arrow-up-right';
-	import CarbonEarth from '~icons/carbon/earth';
-	import { createEventDispatcher } from 'svelte';
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import CarbonEarth from "~icons/carbon/earth";
+	import { createEventDispatcher } from "svelte";
 
 	const dispatch = createEventDispatcher<{ message: string }>();
 </script>
@@ -62,7 +62,7 @@
 			</div>
 		</div>
 	</div>
-	{#if PUBLIC_DISABLE_INTRO_TILES !== 'true'}
+	{#if PUBLIC_DISABLE_INTRO_TILES !== "true"}
 		<div class="lg:col-span-3 lg:mt-12">
 			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
 			<div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
@@ -71,8 +71,8 @@
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
 					on:click={() =>
 						dispatch(
-							'message',
-							'Write an email from bullet list: \n\n- Buy milk\n- Buy eggs\n- Buy bread'
+							"message",
+							"Write an email from bullet list: \n\n- Buy milk\n- Buy eggs\n- Buy bread"
 						)}
 				>
 					"Write an email from bullet list"
@@ -81,14 +81,14 @@
 					type="button"
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
 					on:click={() =>
-						dispatch('message', 'Code a snake game in python, the snake should be red')}
+						dispatch("message", "Code a snake game in python, the snake should be red")}
 				>
 					"Code a snake game"
 				</button>
 				<button
 					type="button"
 					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
-					on:click={() => dispatch('message', 'How do I make a lemon cheesecake?')}
+					on:click={() => dispatch("message", "How do I make a lemon cheesecake?")}
 				>
 					"Assist in a task"
 				</button>

src/lib/components/chat/ChatMessage.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { marked } from 'marked';
-	import type { Message } from '$lib/types/Message';
-	import { afterUpdate } from 'svelte';
-	import { deepestChild } from '$lib/utils/dom';
+	import { marked } from "marked";
+	import type { Message } from "$lib/types/Message";
+	import { afterUpdate } from "svelte";
+	import { deepestChild } from "$lib/utils/dom";
 
-	import CodeBlock from '../CodeBlock.svelte';
-	import IconLoading from '../icons/IconLoading.svelte';
+	import CodeBlock from "../CodeBlock.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
 
 	function sanitizeMd(md: string) {
-		return md.replaceAll('<', '&lt;');
+		return md.replaceAll("<", "&lt;");
 	}
 
 	export let message: Message;
@@ -20,7 +20,7 @@
 
 	const options: marked.MarkedOptions = {
 		...marked.getDefaults(),
-		gfm: true
+		gfm: true,
 	};
 
 	$: tokens = marked.lexer(sanitizeMd(message.content));
@@ -35,7 +35,7 @@
 				if (contentEl) {
 					loadingEl = new IconLoading({
 						target: deepestChild(contentEl),
-						props: { classNames: 'loading inline ml-2' }
+						props: { classNames: "loading inline ml-2" },
 					});
 				}
 			}, 600);
@@ -43,7 +43,7 @@
 	});
 </script>
 
-{#if message.from === 'assistant'}
+{#if message.from === "assistant"}
 	<div class="flex items-start justify-start gap-4 leading-relaxed">
 		<img
 			alt=""
@@ -61,7 +61,7 @@
 				bind:this={contentEl}
 			>
 				{#each tokens as token}
-					{#if token.type === 'code'}
+					{#if token.type === "code"}
 						<CodeBlock lang={token.lang} code={token.text} />
 					{:else}
 						{@html marked.parser([token], options)}
@@ -71,7 +71,7 @@
 		</div>
 	</div>
 {/if}
-{#if message.from === 'user'}
+{#if message.from === "user"}
 	<div class="flex items-start justify-start gap-4">
 		<div class="mt-5 w-3 h-3 flex-none rounded-full" />
 		<div class="rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400 whitespace-break-spaces">

src/lib/components/chat/ChatMessages.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Message } from '$lib/types/Message';
-	import { snapScrollToBottom } from '$lib/actions/snapScrollToBottom';
-	import ScrollToBottomBtn from '$lib/components/ScrollToBottomBtn.svelte';
-	import ChatIntroduction from './ChatIntroduction.svelte';
-	import ChatMessage from './ChatMessage.svelte';
+	import type { Message } from "$lib/types/Message";
+	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
+	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
+	import ChatIntroduction from "./ChatIntroduction.svelte";
+	import ChatMessage from "./ChatMessage.svelte";
 
 	export let messages: Message[];
 	export let loading: boolean;
@@ -20,7 +20,7 @@
 			<ChatIntroduction on:message />
 		{/each}
 		{#if pending}
-			<ChatMessage message={{ from: 'assistant', content: '' }} />
+			<ChatMessage message={{ from: "assistant", content: "" }} />
 		{/if}
 		<div class="h-32 flex-none" />
 	</div>

src/lib/components/chat/ChatWindow.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { Message } from '$lib/types/Message';
-	import { createEventDispatcher } from 'svelte';
+	import type { Message } from "$lib/types/Message";
+	import { createEventDispatcher } from "svelte";
 
-	import CarbonAdd from '~icons/carbon/add';
-	import CarbonSendAltFilled from '~icons/carbon/send-alt-filled';
-	import CarbonTextAlignJustify from '~icons/carbon/text-align-justify';
+	import CarbonAdd from "~icons/carbon/add";
+	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
+	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
 
-	import ChatMessages from './ChatMessages.svelte';
-	import ChatInput from './ChatInput.svelte';
+	import ChatMessages from "./ChatMessages.svelte";
+	import ChatInput from "./ChatInput.svelte";
 
 	export let messages: Message[] = [];
 	export let disabled: boolean = false;
@@ -32,8 +32,8 @@
 		<form
 			on:submit|preventDefault={() => {
 				if (loading) return;
-				dispatch('message', message);
-				message = '';
+				dispatch("message", message);
+				message = "";
 			}}
 			class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
 		>

src/lib/components/icons/IconChevron.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = '';
+	export let classNames: string = "";
 </script>
 
 <svg

src/lib/components/icons/IconCopy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/icons/IconLoading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = '';
+	export let classNames: string = "";
 </script>
 
 <svg

src/lib/components/icons/Logo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames: string = '';
+	export let classNames: string = "";
 </script>
 
 <svg

src/lib/server/database.ts

@@ -1,7 +1,7 @@
-import { MONGODB_URL, MONGODB_DB_NAME } from '$env/static/private';
-import { MongoClient } from 'mongodb';
-import type { Conversation } from '$lib/types/Conversation';
-import type { SharedConversation } from '$lib/types/SharedConversation';
+import { MONGODB_URL, MONGODB_DB_NAME } from "$env/static/private";
+import { MongoClient } from "mongodb";
+import type { Conversation } from "$lib/types/Conversation";
+import type { SharedConversation } from "$lib/types/SharedConversation";
 
 const client = new MongoClient(MONGODB_URL, {
 	// directConnection: true
@@ -11,13 +11,13 @@ export const connectPromise = client.connect().catch(console.error);
 
 const db = client.db(MONGODB_DB_NAME);
 
-const conversations = db.collection<Conversation>('conversations');
-const sharedConversations = db.collection<SharedConversation>('sharedConversations');
+const conversations = db.collection<Conversation>("conversations");
+const sharedConversations = db.collection<SharedConversation>("sharedConversations");
 
 export { client, db };
 export const collections = { conversations, sharedConversations };
 
-client.on('open', () => {
+client.on("open", () => {
 	conversations.createIndex({ sessionId: 1, updatedAt: -1 });
 	sharedConversations.createIndex({ hash: 1 }, { unique: true });
 });

src/lib/stores/pendingMessage.ts

@@ -1,3 +1,3 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
-export const pendingMessage = writable<string>('');
+export const pendingMessage = writable<string>("");

src/lib/types/Conversation.ts

@@ -1,5 +1,5 @@
-import type { ObjectId } from 'mongodb';
-import type { Message } from './Message';
+import type { ObjectId } from "mongodb";
+import type { Message } from "./Message";
 
 export interface Conversation {
 	_id: ObjectId;

src/lib/types/Message.ts

@@ -1,4 +1,4 @@
 export interface Message {
-	from: 'user' | 'assistant';
+	from: "user" | "assistant";
 	content: string;
 }

src/lib/types/SharedConversation.ts

@@ -1,4 +1,4 @@
-import type { Message } from './Message';
+import type { Message } from "./Message";
 
 export interface SharedConversation {
 	_id: string;

src/lib/utils/sha256.ts

@@ -1,7 +1,7 @@
 export async function sha256(input: string): Promise<string> {
 	const utf8 = new TextEncoder().encode(input);
-	const hashBuffer = await crypto.subtle.digest('SHA-256', utf8);
+	const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
 	const hashArray = Array.from(new Uint8Array(hashBuffer));
-	const hashHex = hashArray.map((bytes) => bytes.toString(16).padStart(2, '0')).join('');
+	const hashHex = hashArray.map((bytes) => bytes.toString(16).padStart(2, "0")).join("");
 	return hashHex;
 }

src/routes/+layout.server.ts

@@ -1,6 +1,6 @@
-import type { LayoutServerLoad } from './$types';
-import { collections } from '$lib/server/database';
-import type { Conversation } from '$lib/types/Conversation';
+import type { LayoutServerLoad } from "./$types";
+import { collections } from "$lib/server/database";
+import type { Conversation } from "$lib/types/Conversation";
 
 export const load: LayoutServerLoad = async (event) => {
 	const { conversations } = collections;
@@ -8,16 +8,16 @@ export const load: LayoutServerLoad = async (event) => {
 	return {
 		conversations: await conversations
 			.find({
-				sessionId: event.locals.sessionId
+				sessionId: event.locals.sessionId,
 			})
 			.sort({ updatedAt: -1 })
-			.project<Pick<Conversation, 'title' | '_id' | 'updatedAt' | 'createdAt'>>({
+			.project<Pick<Conversation, "title" | "_id" | "updatedAt" | "createdAt">>({
 				title: 1,
 				_id: 1,
 				updatedAt: 1,
-				createdAt: 1
+				createdAt: 1,
 			})
 			.map((conv) => ({ id: conv._id.toString(), title: conv.title }))
-			.toArray()
+			.toArray(),
 	};
 };

src/routes/+layout.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
-	import { goto, invalidateAll } from '$app/navigation';
-	import { page } from '$app/stores';
-	import '../styles/main.css';
-	import type { LayoutData } from './$types';
+	import { goto, invalidateAll } from "$app/navigation";
+	import { page } from "$app/stores";
+	import "../styles/main.css";
+	import type { LayoutData } from "./$types";
 
-	import CarbonTrashCan from '~icons/carbon/trash-can';
-	import CarbonExport from '~icons/carbon/export';
-	import { base } from '$app/paths';
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonExport from "~icons/carbon/export";
+	import { base } from "$app/paths";
 
 	export let data: LayoutData;
 
 	function switchTheme() {
-		const { classList } = document.querySelector('html') as HTMLElement;
-		if (classList.contains('dark')) {
-			classList.remove('dark');
-			localStorage.theme = 'light';
+		const { classList } = document.querySelector("html") as HTMLElement;
+		if (classList.contains("dark")) {
+			classList.remove("dark");
+			localStorage.theme = "light";
 		} else {
-			classList.add('dark');
-			localStorage.theme = 'dark';
+			classList.add("dark");
+			localStorage.theme = "dark";
 		}
 	}
 
 	async function shareConversation(id: string, title: string) {
 		try {
 			const res = await fetch(`${base}/conversation/${id}/share`, {
-				method: 'POST',
+				method: "POST",
 				headers: {
-					'Content-Type': 'application/json'
-				}
+					"Content-Type": "application/json",
+				},
 			});
 
 			if (!res.ok) {
-				alert('Error while sharing conversation: ' + (await res.text()));
+				alert("Error while sharing conversation: " + (await res.text()));
 				return;
 			}
 
@@ -40,29 +40,29 @@
 			if (navigator.share) {
 				navigator.share({
 					title,
-					text: 'Share this chat with others',
-					url
+					text: "Share this chat with others",
+					url,
 				});
 			} else {
-				prompt('Share this link with your friends:', url);
+				prompt("Share this link with your friends:", url);
 			}
 		} catch (err) {
 			console.error(err);
-			alert('Error while sharing conversation: ' + err);
+			alert("Error while sharing conversation: " + err);
 		}
 	}
 
 	async function deleteConversation(id: string) {
 		try {
 			const res = await fetch(`${base}/conversation/${id}`, {
-				method: 'DELETE',
+				method: "DELETE",
 				headers: {
-					'Content-Type': 'application/json'
-				}
+					"Content-Type": "application/json",
+				},
 			});
 
 			if (!res.ok) {
-				alert('Error while deleting conversation: ' + (await res.text()));
+				alert("Error while deleting conversation: " + (await res.text()));
 				return;
 			}
 
@@ -73,7 +73,7 @@
 			}
 		} catch (err) {
 			console.error(err);
-			alert('Error while deleting conversation: ' + err);
+			alert("Error while deleting conversation: " + err);
 		}
 	}
 </script>

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
-	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
-	import { pendingMessage } from '$lib/stores/pendingMessage';
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
 
 	let loading = false;
 
@@ -10,14 +10,14 @@
 		try {
 			loading = true;
 			const res = await fetch(`${base}/conversation`, {
-				method: 'POST',
+				method: "POST",
 				headers: {
-					'Content-Type': 'application/json'
-				}
+					"Content-Type": "application/json",
+				},
 			});
 
 			if (!res.ok) {
-				alert('Error while creating conversation: ' + (await res.text()));
+				alert("Error while creating conversation: " + (await res.text()));
 				return;
 			}
 

src/routes/conversation/+server.ts

@@ -1,29 +1,29 @@
-import type { RequestHandler } from './$types';
-import { collections } from '$lib/server/database';
-import { ObjectId } from 'mongodb';
-import { redirect } from '@sveltejs/kit';
-import { base } from '$app/paths';
+import type { RequestHandler } from "./$types";
+import { collections } from "$lib/server/database";
+import { ObjectId } from "mongodb";
+import { redirect } from "@sveltejs/kit";
+import { base } from "$app/paths";
 
 export const POST: RequestHandler = async (input) => {
 	const res = await collections.conversations.insertOne({
 		_id: new ObjectId(),
 		title:
-			'Untitled ' +
+			"Untitled " +
 			((await collections.conversations.countDocuments({ sessionId: input.locals.sessionId })) + 1),
 		messages: [],
 		createdAt: new Date(),
 		updatedAt: new Date(),
-		sessionId: input.locals.sessionId
+		sessionId: input.locals.sessionId,
 	});
 
 	return new Response(
 		JSON.stringify({
-			conversationId: res.insertedId.toString()
+			conversationId: res.insertedId.toString(),
 		}),
-		{ headers: { 'Content-Type': 'application/json' } }
+		{ headers: { "Content-Type": "application/json" } }
 	);
 };
 
 export const GET: RequestHandler = async () => {
-	throw redirect(301, base || '/');
+	throw redirect(301, base || "/");
 };

src/routes/conversation/[id]/+page.server.ts

@@ -1,21 +1,21 @@
-import type { PageServerLoad } from './$types';
-import { collections } from '$lib/server/database';
-import type { Conversation } from '$lib/types/Conversation';
-import { ObjectId } from 'mongodb';
-import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from "./$types";
+import { collections } from "$lib/server/database";
+import type { Conversation } from "$lib/types/Conversation";
+import { ObjectId } from "mongodb";
+import { error } from "@sveltejs/kit";
 
 export const load: PageServerLoad = async (event) => {
 	// todo: add validation on params.id
 	const conversation = await collections.conversations.findOne({
 		_id: new ObjectId(event.params.id),
-		sessionId: event.locals.sessionId
+		sessionId: event.locals.sessionId,
 	});
 
 	if (!conversation) {
-		throw error(404, 'Conversation not found');
+		throw error(404, "Conversation not found");
 	}
 
 	return {
-		messages: conversation.messages
+		messages: conversation.messages,
 	};
 };

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
-	import { pendingMessage } from '$lib/stores/pendingMessage';
-	import { onMount } from 'svelte';
-	import type { PageData } from './$types';
-	import { page } from '$app/stores';
-	import { HfInference } from '@huggingface/inference';
-	import { invalidate } from '$app/navigation';
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { onMount } from "svelte";
+	import type { PageData } from "./$types";
+	import { page } from "$app/stores";
+	import { HfInference } from "@huggingface/inference";
+	import { invalidate } from "$app/navigation";
 
 	export let data: PageData;
 
@@ -30,12 +30,12 @@
 					truncate: 1024,
 					watermark: false,
 					max_new_tokens: 1024,
-					stop: ['<|endoftext|>'],
-					return_full_text: false
-				}
+					stop: ["<|endoftext|>"],
+					return_full_text: false,
+				},
 			},
 			{
-				use_cache: false
+				use_cache: false,
 			}
 		);
 
@@ -47,9 +47,9 @@
 			if (!data.token.special) {
 				const lastMessage = messages.at(-1);
 
-				if (lastMessage?.from !== 'assistant') {
+				if (lastMessage?.from !== "assistant") {
 					// First token has a space at the beginning, trim it
-					messages = [...messages, { from: 'assistant', content: data.token.text.trimStart() }];
+					messages = [...messages, { from: "assistant", content: data.token.text.trimStart() }];
 				} else {
 					lastMessage.content += data.token.text;
 					messages = [...messages];
@@ -65,7 +65,7 @@
 			loading = true;
 			pending = true;
 
-			messages = [...messages, { from: 'user', content: message }];
+			messages = [...messages, { from: "user", content: message }];
 
 			await getTextGenerationStream(message);
 
@@ -79,7 +79,7 @@
 	onMount(async () => {
 		if ($pendingMessage) {
 			const val = $pendingMessage;
-			$pendingMessage = '';
+			$pendingMessage = "";
 
 			if (messages.length === 0) {
 				writeMessage(val);

src/routes/conversation/[id]/+server.ts

@@ -1,12 +1,12 @@
-import { HF_TOKEN } from '$env/static/private';
-import { PUBLIC_MODEL_ENDPOINT } from '$env/static/public';
-import { buildPrompt } from '$lib/buildPrompt.js';
-import { collections } from '$lib/server/database.js';
-import type { Message } from '$lib/types/Message.js';
-import { streamToAsyncIterable } from '$lib/utils/streamToAsyncIterable';
-import { sum } from '$lib/utils/sum';
-import { error } from '@sveltejs/kit';
-import { ObjectId } from 'mongodb';
+import { HF_TOKEN } from "$env/static/private";
+import { PUBLIC_MODEL_ENDPOINT } from "$env/static/public";
+import { buildPrompt } from "$lib/buildPrompt.js";
+import { collections } from "$lib/server/database.js";
+import type { Message } from "$lib/types/Message.js";
+import { streamToAsyncIterable } from "$lib/utils/streamToAsyncIterable";
+import { sum } from "$lib/utils/sum";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
 
 export async function POST({ request, fetch, locals, params }) {
 	// todo: add validation on params.id
@@ -14,29 +14,29 @@ export async function POST({ request, fetch, locals, params }) {
 
 	const conv = await collections.conversations.findOne({
 		_id: convId,
-		sessionId: locals.sessionId
+		sessionId: locals.sessionId,
 	});
 
 	if (!conv) {
-		throw error(404, 'Conversation not found');
+		throw error(404, "Conversation not found");
 	}
 
 	// Todo: validate prompt with zod? or aktype
 	const json = await request.json();
 
-	const messages = [...conv.messages, { from: 'user', content: json.inputs }] satisfies Message[];
+	const messages = [...conv.messages, { from: "user", content: json.inputs }] satisfies Message[];
 	const prompt = buildPrompt(messages);
 
 	const resp = await fetch(PUBLIC_MODEL_ENDPOINT, {
 		headers: {
-			'Content-Type': request.headers.get('Content-Type') ?? 'application/json',
-			Authorization: `Basic ${HF_TOKEN}`
+			"Content-Type": request.headers.get("Content-Type") ?? "application/json",
+			Authorization: `Basic ${HF_TOKEN}`,
 		},
-		method: 'POST',
+		method: "POST",
 		body: JSON.stringify({
 			...json,
-			inputs: prompt
-		})
+			inputs: prompt,
+		}),
 	});
 
 	const [stream1, stream2] = resp.body!.tee();
@@ -49,17 +49,17 @@ export async function POST({ request, fetch, locals, params }) {
 			generated_text = generated_text.slice(prompt.length);
 		}
 
-		messages.push({ from: 'assistant', content: generated_text });
+		messages.push({ from: "assistant", content: generated_text });
 
 		await collections.conversations.updateOne(
 			{
-				_id: convId
+				_id: convId,
 			},
 			{
 				$set: {
 					messages,
-					updatedAt: new Date()
-				}
+					updatedAt: new Date(),
+				},
 			}
 		);
 	}
@@ -70,7 +70,7 @@ export async function POST({ request, fetch, locals, params }) {
 	return new Response(stream1, {
 		headers: Object.fromEntries(resp.headers.entries()),
 		status: resp.status,
-		statusText: resp.statusText
+		statusText: resp.statusText,
 	});
 }
 
@@ -79,11 +79,11 @@ export async function DELETE({ locals, params }) {
 
 	const conv = await collections.conversations.findOne({
 		_id: convId,
-		sessionId: locals.sessionId
+		sessionId: locals.sessionId,
 	});
 
 	if (!conv) {
-		throw error(404, 'Conversation not found');
+		throw error(404, "Conversation not found");
 	}
 
 	if (conv.shares?.length) {
@@ -113,24 +113,24 @@ async function parseGeneratedText(stream: ReadableStream): Promise<string> {
 	// Get last line starting with "data:" and parse it as JSON to get the generated text
 	const message = new TextDecoder().decode(completeInput);
 
-	let lastIndex = message.lastIndexOf('\ndata:');
+	let lastIndex = message.lastIndexOf("\ndata:");
 	if (lastIndex === -1) {
-		lastIndex = message.indexOf('data');
+		lastIndex = message.indexOf("data");
 	}
 
 	if (lastIndex === -1) {
-		console.error('Could not parse in last message');
+		console.error("Could not parse in last message");
 	}
 
-	let lastMessage = message.slice(lastIndex).trim().slice('data:'.length);
-	if (lastMessage.includes('\n')) {
-		lastMessage = lastMessage.slice(0, lastMessage.indexOf('\n'));
+	let lastMessage = message.slice(lastIndex).trim().slice("data:".length);
+	if (lastMessage.includes("\n")) {
+		lastMessage = lastMessage.slice(0, lastMessage.indexOf("\n"));
 	}
 
 	const res = JSON.parse(lastMessage).generated_text;
 
-	if (typeof res !== 'string') {
-		throw new Error('Could not parse generated text');
+	if (typeof res !== "string") {
+		throw new Error("Could not parse generated text");
 	}
 
 	return res;

src/routes/conversation/[id]/share/+server.ts

@@ -1,20 +1,20 @@
-import { base } from '$app/paths';
-import { SHARE_BASE_URL } from '$env/static/private';
-import { collections } from '$lib/server/database.js';
-import type { SharedConversation } from '$lib/types/SharedConversation.js';
-import { sha256 } from '$lib/utils/sha256.js';
-import { error } from '@sveltejs/kit';
-import { ObjectId } from 'mongodb';
-import { nanoid } from 'nanoid';
+import { base } from "$app/paths";
+import { SHARE_BASE_URL } from "$env/static/private";
+import { collections } from "$lib/server/database.js";
+import type { SharedConversation } from "$lib/types/SharedConversation.js";
+import { sha256 } from "$lib/utils/sha256.js";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { nanoid } from "nanoid";
 
 export async function POST({ params, url, locals }) {
 	const conversation = await collections.conversations.findOne({
 		_id: new ObjectId(params.id),
-		sessionId: locals.sessionId
+		sessionId: locals.sessionId,
 	});
 
 	if (!conversation) {
-		throw error(404, 'Conversation not found');
+		throw error(404, "Conversation not found");
 	}
 
 	const hash = await sha256(JSON.stringify(conversation.messages));
@@ -24,9 +24,9 @@ export async function POST({ params, url, locals }) {
 	if (existingShare) {
 		return new Response(
 			JSON.stringify({
-				url: url.origin + `${base}/r/${existingShare._id}`
+				url: url.origin + `${base}/r/${existingShare._id}`,
 			}),
-			{ headers: { 'Content-Type': 'application/json' } }
+			{ headers: { "Content-Type": "application/json" } }
 		);
 	}
 
@@ -36,15 +36,15 @@ export async function POST({ params, url, locals }) {
 		messages: conversation.messages,
 		hash,
 		updatedAt: new Date(),
-		title: conversation.title
+		title: conversation.title,
 	};
 
 	await collections.sharedConversations.insertOne(shared);
 
 	return new Response(
 		JSON.stringify({
-			url: (SHARE_BASE_URL || `${url.origin}${base}`) + `/r/${shared._id}`
+			url: (SHARE_BASE_URL || `${url.origin}${base}`) + `/r/${shared._id}`,
 		}),
-		{ headers: { 'Content-Type': 'application/json' } }
+		{ headers: { "Content-Type": "application/json" } }
 	);
 }

src/routes/r/[id]/+page.server.ts

@@ -1,17 +1,17 @@
-import type { PageServerLoad } from './$types';
-import { collections } from '$lib/server/database';
-import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from "./$types";
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
 
 export const load: PageServerLoad = async ({ params }) => {
 	const conversation = await collections.sharedConversations.findOne({
-		_id: params.id
+		_id: params.id,
 	});
 
 	if (!conversation) {
-		throw error(404, 'Conversation not found');
+		throw error(404, "Conversation not found");
 	}
 
 	return {
-		messages: conversation.messages
+		messages: conversation.messages,
 	};
 };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
-	import type { PageData } from './$types';
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import type { PageData } from "./$types";
 
 	export let data: PageData;
 </script>

src/styles/highlight-js.css

@@ -1 +1 @@
-@import 'highlight.js/styles/atom-one-dark';
+@import "highlight.js/styles/atom-one-dark";

src/styles/main.css

@@ -1,4 +1,4 @@
-@import './highlight-js.css';
+@import "./highlight-js.css";
 
 @tailwind base;
 @tailwind components;

svelte.config.js

@@ -1,9 +1,9 @@
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/kit/vite';
-import dotenv from 'dotenv';
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/kit/vite";
+import dotenv from "dotenv";
 
-dotenv.config({ path: './.env.local' });
-dotenv.config({ path: './.env' });
+dotenv.config({ path: "./.env.local" });
+dotenv.config({ path: "./.env" });
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -15,9 +15,9 @@ const config = {
 		adapter: adapter(),
 
 		paths: {
-			base: process.env.APP_BASE || ''
-		}
-	}
+			base: process.env.APP_BASE || "",
+		},
+	},
 };
 
 export default config;

vite.config.ts

@@ -1,12 +1,12 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-import Icons from 'unplugin-icons/vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+import Icons from "unplugin-icons/vite";
 
 export default defineConfig({
 	plugins: [
 		sveltekit(),
 		Icons({
-			compiler: 'svelte'
-		})
-	]
+			compiler: "svelte",
+		}),
+	],
 });