Split app structure & create convos (#20)

src/hooks.server.ts

@@ -6,14 +6,17 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	event.locals.sessionId = token || crypto.randomUUID();
 
-	// Refresh cookie expiration date
-	event.cookies.set('session', event.locals.sessionId, {
-		path: '/',
-		sameSite: 'lax',
-		secure: true,
-		httpOnly: true,
-		expires: addYears(new Date(), 1)
-	});
+	// Setting a cookie breaks /api/conversation, maybe due to the proxy
+	if (!event.url.pathname.startsWith('/api')) {
+		// Refresh cookie expiration date
+		event.cookies.set('session', event.locals.sessionId, {
+			path: '/',
+			sameSite: 'lax',
+			secure: true,
+			httpOnly: true,
+			expires: addYears(new Date(), 1)
+		});
+	}
 
 	const response = await resolve(event);
 

src/lib/Types.ts

@@ -1,28 +0,0 @@
-export type Message =
-	| {
-			from: 'user';
-			content: string;
-	  }
-	| {
-			from: 'bot';
-			content: string;
-	  };
-
-export interface Token {
-	id: number;
-	text: string;
-	logprob: number;
-	special: boolean;
-}
-
-export interface StreamResponse {
-	/**
-	 * Generated token
-	 */
-	token: Token;
-	/**
-	 * Complete generated text
-	 * Only available when the generation is finished
-	 */
-	generated_text?: string;
-}

src/lib/components/chat/ChatInput.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
 	export let value = '';
 	export let minRows = 1;
 	export let maxRows: null | number = null;
 	export let placeholder = '';
+	export let disabled = false;
 	export let autofocus = false;
 
-	const dispatch = createEventDispatcher();
-
 	$: minHeight = `${1 + minRows * 1.5}em`;
 	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
 
 	function handleKeydown(event: KeyboardEvent) {
 		// submit on enter
 		if (event.key === 'Enter' && !event.shiftKey) {
-			dispatch('submit');
 			event.preventDefault();
+
+			textareaElement.closest('form')?.requestSubmit();
 		}
 	}
+
+	let textareaElement: HTMLTextAreaElement;
 </script>
 
 <div class="relative flex-1 min-w-0">
@@ -32,6 +32,8 @@
 		rows="1"
 		class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar-custom overflow-x-hidden overflow-y-scroll"
 		bind:value
+		bind:this={textareaElement}
+		{disabled}
 		on:keydown={handleKeydown}
 		{placeholder}
 		{autofocus}

src/lib/components/chat/ChatMessage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Message } from '$lib/Types';
+	import type { Message } from '$lib/types/Message';
 
 	export let message: Message;
 </script>
 
-{#if message.from === 'bot'}
+{#if message.from === 'assistant'}
 	<div class="flex items-start justify-start gap-4 leading-relaxed">
 		<img
 			alt=""

src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,23 @@
+<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';
+
+	export let messages: Message[];
+
+	let chatContainer: HTMLElement;
+</script>
+
+<div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
+	<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
+		{#each messages as message}
+			<ChatMessage {message} />
+		{:else}
+			<ChatIntroduction />
+		{/each}
+		<div class="h-32 flex-none" />
+	</div>
+	<ScrollToBottomBtn class="bottom-10 right-12" scrollNode={chatContainer} />
+</div>

src/lib/components/chat/ChatWindow.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Message } from '$lib/types/Message';
+	import { createEventDispatcher } from 'svelte';
+	import ChatMessages from './ChatMessages.svelte';
+	import ChatInput from './ChatInput.svelte';
+
+	export let messages: Message[] = [];
+	export let disabled: boolean;
+
+	let message: string;
+
+	const dispatch = createEventDispatcher<{ message: string }>();
+</script>
+
+<div class="relative h-screen">
+	<nav class="sm:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800">
+		<button>[ ]</button>
+		<button>New Chat</button>
+		<button>+</button>
+	</nav>
+	<ChatMessages {messages} />
+	<div
+		class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
+	>
+		<form
+			on:submit|preventDefault={() => {
+				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 transition-all"
+		>
+			<div class="w-full flex flex-1 border-none bg-transparent">
+				<ChatInput
+					placeholder="Ask anything"
+					bind:value={message}
+					{disabled}
+					autofocus
+					maxRows={10}
+				/>
+				<button
+					class="p-1 px-[0.7rem] self-end my-1 h-[2.4rem] rounded-lg hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-60 dark:disabled:opacity-40 flex-shrink-0 transition-all mx-1"
+					disabled={!message || disabled}
+					type="submit"
+				>
+					<svg
+						class="text-gray-500 dark:text-gray-300 pointer-events-none"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+						aria-hidden="true"
+						focusable="false"
+						role="img"
+						width="1em"
+						height="1em"
+						preserveAspectRatio="xMidYMid meet"
+						viewBox="0 0 32 32"
+						><path
+							d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
+							fill="currentColor"
+						/></svg
+					>
+				</button>
+			</div>
+		</form>
+	</div>
+</div>

src/lib/stores/pendingMessage.ts

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

src/lib/types/Message.ts

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

src/routes/{+page.server.ts → +layout.server.ts}

@@ -1,8 +1,8 @@
-import type { PageServerLoad } from './$types';
+import type { LayoutServerLoad } from './$types';
 import { collections } from '$lib/server/database';
 import type { Conversation } from '$lib/types/Conversation';
 
-export const load: PageServerLoad = async (event) => {
+export const load: LayoutServerLoad = async (event) => {
 	const { conversations } = collections;
 
 	return {

src/routes/+layout.svelte

@@ -1,5 +1,58 @@
 <script lang="ts">
 	import '../styles.css';
+	import type { LayoutData } from './$types';
+
+	export let data: LayoutData;
+
+	function switchTheme() {
+		const { classList } = document.querySelector('html') as HTMLElement;
+		if (classList.contains('dark')) {
+			classList.remove('dark');
+			localStorage.theme = 'light';
+		} else {
+			classList.add('dark');
+			localStorage.theme = 'dark';
+		}
+	}
 </script>
 
-<slot />
+<div
+	class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
+>
+	<nav
+		class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
+	>
+		<div class="flex-none sticky top-0 p-3 flex flex-col">
+			<button
+				on:click={() => location.reload()}
+				class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600"
+				>New Chat</button
+			>
+		</div>
+		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
+			{#each data.conversations as conv}
+				<a
+					href="/conversation/{conv.id}"
+					class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+				>
+					{conv.title}
+				</a>
+			{/each}
+		</div>
+		<div class="flex flex-col p-3 gap-2">
+			<button
+				on:click={switchTheme}
+				class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+			>
+				Theme
+			</button>
+			<a
+				href="/"
+				class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+			>
+				Settings
+			</a>
+		</div>
+	</nav>
+	<slot />
+</div>

src/routes/+page.svelte

@@ -1,207 +1,36 @@
 <script lang="ts">
-	import type { Message } from '$lib/Types';
-
-	import { HfInference } from '@huggingface/inference';
-
-	import ChatMessage from '$lib/components/chat/ChatMessage.svelte';
-	import ChatIntroduction from '$lib/components/chat/ChatIntroduction.svelte';
-	import ChatInput from '$lib/components/chat/ChatInput.svelte';
-
-	import {
-		PUBLIC_ASSISTANT_MESSAGE_TOKEN,
-		PUBLIC_SEP_TOKEN,
-		PUBLIC_USER_MESSAGE_TOKEN
-	} from '$env/static/public';
-	import { page } from '$app/stores';
-	import type { PageData } from './$types';
-
-	export let data: PageData;
-
-	const userToken = PUBLIC_USER_MESSAGE_TOKEN || '<|prompter|>';
-	const assistantToken = PUBLIC_ASSISTANT_MESSAGE_TOKEN || '<|assistant|>';
-	const sepToken = PUBLIC_SEP_TOKEN || '<|endoftext|>';
-	import { snapScrollToBottom } from '$lib/actions/snapScrollToBottom';
-	import ScrollToBottomBtn from '$lib/components/ScrollToBottomBtn.svelte';
-
-	const hf = new HfInference();
-	const model = hf.endpoint(`${$page.url.origin}/api/conversation`);
-
-	let messages: Message[] = [];
-	let message = '';
-	let chatContainer: HTMLElement;
-
-	function switchTheme() {
-		const { classList } = document.querySelector('html') as HTMLElement;
-		if (classList.contains('dark')) {
-			classList.remove('dark');
-			localStorage.theme = 'light';
-		} else {
-			classList.add('dark');
-			localStorage.theme = 'dark';
-		}
-	}
-
-	async function getTextGenerationStream(inputs: string) {
-		const response = model.textGenerationStream(
-			{
-				inputs,
-				parameters: {
-					// Taken from https://huggingface.co/spaces/huggingface/open-assistant-private-testing/blob/main/app.py#L54
-					// @ts-ignore
-					stop: ['<|endoftext|>'],
-					max_new_tokens: 1024,
-					truncate: 1024,
-					typical_p: 0.2
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
+	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
+	import { pendingMessage } from '$lib/stores/pendingMessage';
+
+	let loading = false;
+
+	async function createConversation(message: string) {
+		try {
+			loading = true;
+			const res = await fetch('/conversation', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
 				}
-			},
-			{
-				use_cache: false
-			}
-		);
-
-		// Regex to check if the text finishes by "<" but is not a piece of code like "`<img>`"
-		const endOfTextRegex = /(?<!`)<(?!`)/;
-
-		for await (const data of response) {
-			if (!data) break;
-
-			try {
-				if (!data.token.special) {
-					if (messages.at(-1)?.from !== 'bot') {
-						// First token has a space at the beginning, trim it
-						messages = [...messages, { from: 'bot', content: data.token.text.trimStart() }];
-					} else {
-						const isEndOfText = endOfTextRegex.test(data.token.text);
+			});
 
-						messages.at(-1)!.content += isEndOfText
-							? data.token.text.replace('<', '')
-							: data.token.text;
-						messages = messages;
-
-						if (isEndOfText) break;
-					}
-				}
-			} catch (error) {
-				console.error(error);
-				break;
+			if (!res.ok) {
+				alert('Error while creating conversation: ' + (await res.text()));
+				return;
 			}
-		}
-	}
 
-	function onWrite() {
-		if (!message) return;
+			const { conversationId } = await res.json();
 
-		messages = [...messages, { from: 'user', content: message }];
-		message = '';
-		const inputs =
-			messages
-				.map(
-					(m) =>
-						(m.from === 'user' ? userToken + m.content : assistantToken + m.content) +
-						(m.content.endsWith(sepToken) ? '' : sepToken)
-				)
-				.join('') + assistantToken;
+			// Ugly hack to use a store as temp storage, feel free to improve ^^
+			pendingMessage.set(message);
 
-		getTextGenerationStream(inputs);
+			// invalidateAll to update list of conversations
+			await goto(`/conversation/${conversationId}`, { invalidateAll: true });
+		} finally {
+			loading = false;
+		}
 	}
 </script>
 
-<div
-	class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
->
-	<nav
-		class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
-	>
-		<div class="flex-none sticky top-0 p-3 flex flex-col">
-			<button
-				on:click={() => location.reload()}
-				class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600"
-				>New Chat</button
-			>
-		</div>
-		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
-			{#each data.conversations as conv}
-				<a
-					href="/conversation/{conv.id}"
-					class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-				>
-					{conv.title}
-				</a>
-			{/each}
-		</div>
-		<div class="flex flex-col p-3 gap-2">
-			<button
-				on:click={switchTheme}
-				class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-			>
-				Theme
-			</button>
-			<a
-				href="/"
-				class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-			>
-				Settings
-			</a>
-		</div>
-	</nav>
-	<div class="relative h-screen">
-		<nav
-			class="sm:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800"
-		>
-			<button>[ ]</button>
-			<button>New Chat</button>
-			<button>+</button>
-		</nav>
-		<div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
-			<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
-				{#each messages as message}
-					<ChatMessage {message} />
-				{:else}
-					<ChatIntroduction />
-				{/each}
-				<div class="h-32 flex-none" />
-			</div>
-			<ScrollToBottomBtn class="bottom-10 right-12" scrollNode={chatContainer} />
-		</div>
-		<div
-			class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
-		>
-			<form
-				on:submit={onWrite}
-				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 transition-all"
-			>
-				<div class="w-full flex flex-1 border-none bg-transparent">
-					<ChatInput
-						placeholder="Ask anything"
-						bind:value={message}
-						on:submit={onWrite}
-						autofocus
-						maxRows={10}
-					/>
-					<button
-						class="p-1 px-[0.7rem] self-end my-1 h-[2.4rem] rounded-lg hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-60 dark:disabled:opacity-40 flex-shrink-0 transition-all mx-1"
-						disabled={!message}
-						type="submit"
-					>
-						<svg
-							class="text-gray-500 dark:text-gray-300 pointer-events-none"
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							aria-hidden="true"
-							focusable="false"
-							role="img"
-							width="1em"
-							height="1em"
-							preserveAspectRatio="xMidYMid meet"
-							viewBox="0 0 32 32"
-							><path
-								d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
-								fill="currentColor"
-							/></svg
-						></button
-					>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
+<ChatWindow on:message={(ev) => createConversation(ev.detail)} disabled={loading} />

src/routes/api/conversation/+server.ts

@@ -1,7 +1,7 @@
 import { HF_TOKEN } from '$env/static/private';
 import { PUBLIC_MODEL_ENDPOINT } from '$env/static/public';
 
-export async function POST({ request }) {
+export async function POST({ request, fetch }) {
 	return await fetch(PUBLIC_MODEL_ENDPOINT, {
 		headers: {
 			...request.headers,

src/routes/conversation/+server.ts

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

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

@@ -0,0 +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';
+
+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
+	});
+
+	if (!conversation) {
+		throw error(404, 'Conversation not found');
+	}
+
+	return {
+		messages: conversation.messages
+	};
+};

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

@@ -0,0 +1,106 @@
+<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 {
+		PUBLIC_ASSISTANT_MESSAGE_TOKEN,
+		PUBLIC_SEP_TOKEN,
+		PUBLIC_USER_MESSAGE_TOKEN
+	} from '$env/static/public';
+	import { HfInference } from '@huggingface/inference';
+
+	export let data: PageData;
+
+	$: messages = data.messages;
+
+	const userToken = PUBLIC_USER_MESSAGE_TOKEN;
+	const assistantToken = PUBLIC_ASSISTANT_MESSAGE_TOKEN;
+	const sepToken = PUBLIC_SEP_TOKEN;
+
+	const hf = new HfInference();
+	const model = hf.endpoint(`${$page.url.origin}/api/conversation`);
+
+	let loading = false;
+
+	async function getTextGenerationStream(inputs: string) {
+		const response = model.textGenerationStream(
+			{
+				inputs,
+				parameters: {
+					// Taken from https://huggingface.co/spaces/huggingface/open-assistant-private-testing/blob/main/app.py#L54
+					// @ts-ignore
+					stop: ['<|endoftext|>'],
+					max_new_tokens: 1024,
+					truncate: 1024,
+					typical_p: 0.2
+				}
+			},
+			{
+				use_cache: false
+			}
+		);
+
+		// Regex to check if the text finishes by "<" but is not a piece of code like "`<img>`"
+		const endOfTextRegex = /(?<!`)<(?!`)/;
+
+		for await (const data of response) {
+			if (!data) break;
+
+			if (!data.token.special) {
+				if (messages.at(-1)?.from !== 'assistant') {
+					// 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);
+
+					messages.at(-1)!.content += isEndOfText
+						? data.token.text.replace('<', '')
+						: data.token.text;
+					messages = messages;
+
+					if (isEndOfText) break;
+				}
+			}
+		}
+
+		// todo: if everything went well, store message + response in DB
+	}
+
+	async function writeMessage(message: string) {
+		if (!message.trim()) return;
+
+		try {
+			loading = true;
+
+			messages = [...messages, { from: 'user', content: message }];
+			message = '';
+			const inputs =
+				messages
+					.map(
+						(m) =>
+							(m.from === 'user' ? userToken + m.content : assistantToken + m.content) +
+							(m.content.endsWith(sepToken) ? '' : sepToken)
+					)
+					.join('') + assistantToken;
+
+			await getTextGenerationStream(inputs);
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(async () => {
+		if ($pendingMessage) {
+			const val = $pendingMessage;
+			$pendingMessage = '';
+
+			if (messages.length === 0) {
+				writeMessage(val);
+			}
+		}
+	});
+</script>
+
+<ChatWindow disabled={loading} {messages} on:message={(message) => writeMessage(message.detail)} />