Duplicate from huggingchat/chat-ui

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

.env

@@ -0,0 +1,19 @@
+# Use .env.local to change these variables, or directly change your env
+# DO NOT EDIT THIS FILE WITH SENSITIVE DATA
+
+MONGODB_URL=#your mongodb URL here
+MONGODB_DB_NAME=chat-ui
+COOKIE_NAME=hf-chat
+
+PUBLIC_MAX_INPUT_TOKENS=1024
+PUBLIC_ORIGIN=#https://hf.co
+PUBLIC_MODEL_NAME=OpenAssistant/oasst-sft-6-llama-30b # public facing link
+PUBLIC_MODEL_ID=OpenAssistant/oasst-sft-6-llama-30b-xor # used to link to model page
+PUBLIC_DISABLE_INTRO_TILES=false
+PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
+PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
+PUBLIC_SEP_TOKEN=<|endoftext|>
+
+# [{"endpoint": "https://api-inference.huggingface.co/models/...", authorization: "Bearer hf_<token>", weight: 1}] to load balance
+# Eg if one endpoint has weight 2 and the other has weight 1, the first endpoint will be called twice as often
+MODEL_ENDPOINTS=`[]`

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +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" }],
+	settings: {
+		"svelte3/typescript": () => require("typescript"),
+	},
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2020,
+	},
+	rules: {
+		"no-shadow": ["error"],
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.codeActionsOnSave": {
+		"source.fixAll": true
+	}
+}

Dockerfile

@@ -0,0 +1,22 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM node:19
+
+RUN npm install -g pm2
+
+WORKDIR /app
+
+COPY . .
+
+RUN npm i
+
+RUN chown -R 1000:1000 /app
+
+RUN --mount=type=secret,id=DOTENV_LOCAL,mode=0444,required=true cat /run/secrets/DOTENV_LOCAL > .env.local
+   
+RUN npm run build
+
+ENV PORT 7860
+
+CMD pm2 start build/index.js -i $CPU_CORES --no-daemon

PRIVACY.md

@@ -0,0 +1,33 @@
+## Privacy
+
+In this `v0` of HuggingChat, we only store messages to display them to the user, not for any other usage (including for research or model training purposes).
+
+Please note that in `v0`, users are not authenticated in any way, i.e. this app doesn't have access to your HF user account even if you're logged in to huggingface.co. The app is only using an anonymous session cookie. ❗️ Warning ❗️ this means if you switch browsers or clear cookies, you will currently lose your conversations.
+
+In a future version, we are considering exposing a setting for users to share their conversations with the model authors (here OpenAssistant) to improve their training data and their model over time. In other terms, model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
+
+🗓 Please also consult huggingface.co's main privacy policy at https://huggingface.co/privacy. To exercise any of your legal privacy rights, please send an email to [email protected].
+
+## About available LLMs
+
+The goal of this app is to showcase that it is now (April 2023) possible to build an open source alternative to ChatGPT. 💪
+
+For now, it's running OpenAssistant's [latest LLaMA based model](https://huggingface.co/OpenAssistant/oasst-sft-6-llama-30b-xor) (which is one of the current best open source chat models), but the plan in the longer-term is to expose all good-quality chat models from the Hub.
+
+We are not affiliated with Open Assistant, but if you want to contribute to the training data for the next generation of open models, please consider contributing to https://open-assistant.io/ ❤️
+
+## Technical details
+
+This app is running in a [Space](https://huggingface.co/docs/hub/spaces-overview), which entails that the code for this UI is open source: https://huggingface.co/spaces/huggingchat/chat-ui/tree/main.
+The inference backend is running [text-generation-inference](https://github.com/huggingface/text-generation-inference) on HuggingFace's Inference API infrastructure.
+
+It is therefore possible to deploy a copy of this app to a Space and customize it (swap model, add some UI elements, or store user messages according to your own Terms and conditions)
+
+We welcome any feedback on this app: please participate to the public discussion at https://huggingface.co/spaces/huggingchat/chat-ui/discussions
+
+<a target="_blank" href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-discussion-xl.svg" title="open a discussion"></a>
+
+## Coming soon
+
+- LLM watermarking
+- User setting to share conversations with model authors

README.md

@@ -0,0 +1,40 @@
+---
+title: chat-ui
+emoji: 🔥
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+base_path: /chat
+duplicated_from: huggingchat/chat-ui
+---
+
+# Chat UI
+
+A chat interface using open source models, eg OpenAssistant.
+
+## Launch
+
+```bash
+npm install
+npm run dev
+```
+
+## Environment
+
+Default configuration is in `.env`. Put custom config and secrets in `.env.local`, it will override the values in `.env`.
+
+Check out [.env](./.env) to see what needs to be set.
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

@@ -0,0 +1,49 @@
+{
+	"name": "chat-ui",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@iconify-json/carbon": "^1.1.16",
+		"@sveltejs/adapter-node": "^1.2.0",
+		"@sveltejs/kit": "^1.5.0",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/marked": "^4.0.8",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"unplugin-icons": "^0.16.1",
+		"vite": "^4.0.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@huggingface/inference": "^2.1.2",
+		"autoprefixer": "^10.4.14",
+		"date-fns": "^2.29.3",
+		"dotenv": "^16.0.3",
+		"highlight.js": "^11.7.0",
+		"marked": "^4.3.0",
+		"mongodb": "^5.3.0",
+		"nanoid": "^4.0.2",
+		"postcss": "^8.4.21",
+		"tailwind-scrollbar": "^3.0.0",
+		"tailwindcss": "^3.3.1",
+		"zod": "^3.21.4"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/app.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="unplugin-icons/types/svelte" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			sessionId: string;
+		}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<title>HuggingChat</title>
+		<script>
+			if (
+				localStorage.theme === "dark" ||
+				(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+			) {
+				document.documentElement.classList.add("dark");
+			}
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900 h-full">
+		<div class="contents h-full">%sveltekit.body%</div>
+	</body>
+</html>

src/hooks.server.ts

@@ -0,0 +1,24 @@
+import { dev } from "$app/environment";
+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);
+
+	event.locals.sessionId = token || crypto.randomUUID();
+
+	// Refresh cookie expiration date
+	event.cookies.set(COOKIE_NAME, event.locals.sessionId, {
+		path: "/",
+		// So that it works inside the space's iframe
+		sameSite: "none",
+		secure: !dev,
+		httpOnly: true,
+		expires: addYears(new Date(), 1),
+	});
+
+	const response = await resolve(event);
+
+	return response;
+};

src/lib/actions/snapScrollToBottom.ts

@@ -0,0 +1,54 @@
+import { navigating } from "$app/stores";
+import { tick } from "svelte";
+import { get } from "svelte/store";
+
+const detachedOffset = 10;
+
+/**
+ * @param node element to snap scroll to bottom
+ * @param dependency pass in a dependency to update scroll on changes.
+ */
+export const snapScrollToBottom = (node: HTMLElement, dependency: any) => {
+	let prevScrollValue = node.scrollTop;
+	let isDetached = false;
+
+	const handleScroll = () => {
+		// if user scrolled up, we detach
+		if (node.scrollTop < prevScrollValue) {
+			isDetached = true;
+		}
+
+		// if user scrolled back to within 10px of bottom, we reattach
+		if (node.scrollTop - (node.scrollHeight - node.clientHeight) >= -detachedOffset) {
+			isDetached = false;
+		}
+
+		prevScrollValue = node.scrollTop;
+	};
+
+	const updateScroll = async (_options: { force?: boolean } = {}) => {
+		const defaultOptions = { force: false };
+		const options = { ...defaultOptions, ..._options };
+		const { force } = options;
+
+		if (!force && isDetached && !get(navigating)) return;
+
+		// wait for next tick to ensure that the DOM is updated
+		await tick();
+
+		node.scrollTo({ top: node.scrollHeight });
+	};
+
+	node.addEventListener("scroll", handleScroll);
+
+	if (dependency) {
+		updateScroll({ force: true });
+	}
+
+	return {
+		update: updateScroll,
+		destroy: () => {
+			node.removeEventListener("scroll", handleScroll);
+		},
+	};
+};

src/lib/buildPrompt.ts

@@ -0,0 +1,28 @@
+import {
+	PUBLIC_ASSISTANT_MESSAGE_TOKEN,
+	PUBLIC_MAX_INPUT_TOKENS,
+	PUBLIC_SEP_TOKEN,
+	PUBLIC_USER_MESSAGE_TOKEN,
+} from "$env/static/public";
+import type { Message } from "./types/Message";
+
+/**
+ * Convert [{user: "assistant", content: "hi"}, {user: "user", content: "hello"}] to:
+ *
+ * <|assistant|>hi<|endoftext|><|prompter|>hello<|endoftext|><|assistant|>
+ */
+export function buildPrompt(messages: Message[]): string {
+	const prompt =
+		messages
+			.map(
+				(m) =>
+					(m.from === "user"
+						? PUBLIC_USER_MESSAGE_TOKEN + m.content
+						: PUBLIC_ASSISTANT_MESSAGE_TOKEN + m.content) +
+					(m.content.endsWith(PUBLIC_SEP_TOKEN) ? "" : PUBLIC_SEP_TOKEN)
+			)
+			.join("") + PUBLIC_ASSISTANT_MESSAGE_TOKEN;
+
+	// Not super precise, but it's truncated in the model's backend anyway
+	return prompt.split(" ").slice(-parseInt(PUBLIC_MAX_INPUT_TOKENS)).join(" ");
+}

src/lib/components/CodeBlock.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { afterUpdate } from "svelte";
+	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
+
+	export let code = "";
+	export let lang = "";
+
+	$: highlightedCode = "";
+
+	afterUpdate(async () => {
+		const { default: hljs } = await import("highlight.js");
+		const language = hljs.getLanguage(lang);
+
+		highlightedCode = hljs.highlightAuto(code, language?.aliases).value;
+	});
+</script>
+
+<div class="group relative rounded-lg my-4">
+	<pre
+		class="overflow-auto scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 px-5"><code
+			class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
+		></pre>
+	<CopyToClipBoardBtn
+		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
+		value={code}
+	/>
+</div>

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/MobileNav.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { navigating } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+	import { browser } from "$app/environment";
+	import { base } from "$app/paths";
+
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonAdd from "~icons/carbon/add";
+	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
+
+	export let isOpen = false;
+	export let title: string;
+
+	$: title = title || "New Chat";
+
+	let closeEl: HTMLButtonElement;
+	let openEl: HTMLButtonElement;
+
+	const dispatch = createEventDispatcher();
+
+	$: if ($navigating) {
+		dispatch("toggle", false);
+	}
+
+	$: if (isOpen && closeEl) {
+		closeEl.focus();
+	} else if (!isOpen && browser && document.activeElement === closeEl) {
+		openEl.focus();
+	}
+</script>
+
+<nav
+	class="md:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800 bg-gray-50 dark:bg-gray-800/70"
+>
+	<button
+		type="button"
+		class="flex items-center justify-center w-9 h-9 -ml-3 shrink-0"
+		on:click={() => dispatch("toggle", true)}
+		aria-label="Open menu"
+		bind:this={openEl}><CarbonTextAlignJustify /></button
+	>
+	<span class="px-4 truncate">{title}</span>
+	<a href={base || "/"} class="flex items-center justify-center w-9 h-9 -mr-3 shrink-0"
+		><CarbonAdd /></a
+	>
+</nav>
+<nav
+	class="fixed inset-0 z-50 grid grid-rows-[auto,auto,1fr,auto] grid-cols-1 max-h-screen bg-white dark:bg-gray-900 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 {isOpen
+		? 'block'
+		: 'hidden'}"
+>
+	<div class="flex items-center px-4 h-12">
+		<button
+			type="button"
+			class="flex items-center justify-center ml-auto w-9 h-9 -mr-3"
+			on:click={() => dispatch("toggle", false)}
+			aria-label="Close menu"
+			bind:this={closeEl}><CarbonClose /></button
+		>
+	</div>
+	<slot />
+</nav>

src/lib/components/NavMenu.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { createEventDispatcher } from "svelte";
+
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonExport from "~icons/carbon/export";
+
+	import { switchTheme } from "$lib/switchTheme";
+	import { PUBLIC_ORIGIN } from "$env/static/public";
+
+	const dispatch = createEventDispatcher<{
+		shareConversation: { id: string; title: string };
+		deleteConversation: string;
+	}>();
+
+	export let conversations: Array<{
+		id: string;
+		title: string;
+	}> = [];
+</script>
+
+<div class="flex-none max-sm:pt-0 sticky top-0 px-3 py-3.5 flex items-center justify-between">
+	<a class="rounded-xl font-semibold text-lg flex items-center" href="{PUBLIC_ORIGIN}{base}/">
+		<Logo classNames="mr-1 text-3xl" />
+		HuggingChat
+	</a>
+	<a
+		href={base || "/"}
+		class="flex border py-0.5 px-2 rounded-lg shadow-sm hover:shadow-none bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
+	>
+		New Chat
+	</a>
+</div>
+<div
+	class="flex flex-col overflow-y-auto scrollbar-custom px-3 pb-3 pt-2 gap-1  bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
+>
+	{#each conversations as conv}
+		<a
+			data-sveltekit-noscroll
+			href="{base}/conversation/{conv.id}"
+			class="group pl-3 pr-2 h-11 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5 {conv.id ===
+			$page.params.id
+				? 'bg-gray-100 dark:bg-gray-700'
+				: ''}"
+		>
+			<div class="flex-1 truncate">{conv.title}</div>
+
+			<button
+				type="button"
+				class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center  rounded"
+				title="Share conversation"
+				on:click|preventDefault={() =>
+					dispatch("shareConversation", { id: conv.id, title: conv.title })}
+			>
+				<CarbonExport class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs" />
+			</button>
+
+			<button
+				type="button"
+				class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
+				title="Delete conversation"
+				on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
+			>
+				<CarbonTrashCan
+					class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs"
+				/>
+			</button>
+		</a>
+	{/each}
+</div>
+<div
+	class="flex flex-col p-3 gap-2 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl mt-0.5 text-sm"
+>
+	<button
+		on:click={switchTheme}
+		type="button"
+		class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
+	>
+		Theme
+	</button>
+	<a
+		href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
+		target="_blank"
+		rel="noreferrer"
+		class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
+	>
+		Feedback
+	</a>
+	<a
+		href="{base}/privacy"
+		class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
+	>
+		About & Privacy
+	</a>
+</div>

src/lib/components/ScrollToBottomBtn.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	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 = "";
+
+	$: if (scrollNode) {
+		scrollNode.addEventListener("scroll", onScroll);
+	}
+
+	function onScroll() {
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	onDestroy(() => {
+		if (!scrollNode) return;
+		scrollNode.removeEventListener("scroll", onScroll);
+	});
+</script>
+
+{#if visible}
+	<button
+		transition:fade={{ duration: 150 }}
+		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
+		class="btn absolute flex rounded-full border w-[41px] h-[41px] shadow-md dark:shadow-gray-950 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all {className}"
+		><IconChevron classNames="mt-[2px]" /></button
+	>
+{/if}

src/lib/components/StopGeneratingBtn.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import CarbonPause from "~icons/carbon/pause-filled";
+
+	export let visible: boolean = false;
+	export let className = "";
+</script>
+
+<button
+	type="button"
+	on:click
+	class="absolute btn flex rounded-lg border py-1 px-3 shadow-sm bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all 
+    {className}
+    {visible ? 'opacity-100 visible' : 'opacity-0 invisible'}
+    "
+>
+	<CarbonPause class="mr-1 -ml-1 w-[1.1875rem] h-[1.25rem] text-gray-400" /> Stop generating
+</button>

src/lib/components/Toast.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	export let message = "";
+</script>
+
+<div
+	transition:fade={{ duration: 300 }}
+	class="fixed right-0 top-12 md:top-0 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pt-2 md:pt-5 pr-2 md:pr-8 pl-36 pb-36 z-20 pointer-events-none"
+>
+	<div
+		class="flex items-center bg-white/90 dark:bg-gray-900/80 rounded-full py-1 px-3 shadow-sm pointer-events-auto"
+	>
+		<IconDazzled classNames="text-2xl mr-2" />
+		<h2 class="font-semibold">{message}</h2>
+	</div>
+</div>

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/ChatInput.svelte

@@ -0,0 +1,54 @@
+<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<{submit: void}>();
+
+	$: 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) {
+			event.preventDefault();
+			dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
+		}
+	}
+
+	let textareaElement: HTMLTextAreaElement;
+</script>
+
+<div class="relative flex-1 min-w-0">
+	<pre
+		class="invisible py-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
+
+	<textarea
+		enterkeyhint="send"
+		tabindex="0"
+		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}
+	/>
+</div>
+
+<style>
+	pre,
+	textarea {
+		font-family: inherit;
+		box-sizing: border-box;
+		line-height: 1.5;
+	}
+</style>

src/lib/components/chat/ChatIntroduction.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import {
+		PUBLIC_DISABLE_INTRO_TILES,
+		PUBLIC_MODEL_ID,
+		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";
+
+	const dispatch = createEventDispatcher<{ message: string }>();
+</script>
+
+<div class="grid lg:grid-cols-3 gap-8 my-auto">
+	<div class="lg:col-span-1">
+		<div>
+			<div class="text-2xl font-semibold mb-3 flex items-center">
+				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
+				HuggingChat
+				<div
+					class="text-base h-6 px-2 rounded-lg text-gray-400 bg-gray-50 ml-3 flex items-center border border-gray-100 dark:bg-gray-800 dark:border-gray-700/60"
+				>
+					v0
+				</div>
+			</div>
+			<p class="text-base text-gray-600 dark:text-gray-400">
+				Making the best open source AI chat models available to everyone.
+			</p>
+		</div>
+	</div>
+	<div class="lg:col-span-2 lg:pl-24">
+		<div class="border dark:border-gray-800 rounded-xl overflow-hidden">
+			<div class="p-3">
+				<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
+				<div class="font-semibold">{PUBLIC_MODEL_NAME}</div>
+			</div>
+			<div
+				class="flex items-center gap-5 px-3 py-2 bg-gray-100 rounded-xl text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
+			>
+				<a
+					href="https://huggingface.co/{PUBLIC_MODEL_ID}"
+					target="_blank"
+					rel="noreferrer"
+					class="flex items-center hover:underline"
+				>
+					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
+					Model
+					<div class="max-sm:hidden">&nbsp;page</div>
+				</a>
+				<a
+					href="https://huggingface.co/datasets/OpenAssistant/oasst1"
+					target="_blank"
+					rel="noreferrer"
+					class="flex items-center hover:underline"
+				>
+					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
+					Dataset
+					<div class="max-sm:hidden">&nbsp;page</div>
+				</a>
+				<a
+					href="https://open-assistant.io/"
+					target="_blank"
+					class="flex items-center hover:underline ml-auto"
+					rel="noreferrer"
+				>
+					<CarbonEarth class="text-xs mr-1.5 text-gray-400" />
+					Open Assistant Website
+				</a>
+			</div>
+		</div>
+	</div>
+	{#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">
+				<button
+					type="button"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm: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",
+							"As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
+						)}
+				>
+					"Write an email from bullet list"
+				</button>
+				<button
+					type="button"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm: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 basic snake game in python, give explanations for each step."
+						)}
+				>
+					"Code a snake game"
+				</button>
+				<button
+					type="button"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm: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 delicious lemon cheesecake?")}
+				>
+					"Assist in a task"
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/components/chat/ChatMessage.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { marked } from "marked";
+	import type { Message } from "$lib/types/Message";
+	import { afterUpdate } from "svelte";
+	import { deepestChild } from "$lib/utils/deepestChild";
+
+	import CodeBlock from "../CodeBlock.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
+
+	function sanitizeMd(md: string) {
+		return md
+			.replace(/<\|[a-z]*$/, "")
+			.replace(/<\|[a-z]+\|$/, "")
+			.replace(/<$/, "")
+			.replaceAll(/<\|[a-z]+\|>/g, " ")
+			.trim()
+			.replaceAll("&", "&amp;")
+			.replaceAll("<", "&lt;");
+	}
+	function unsanitizeMd(md: string) {
+		return md.replaceAll("&lt;", "<").replaceAll("&amp;", "&");
+	}
+
+	export let message: Message;
+	export let loading: boolean = false;
+
+	let contentEl: HTMLElement;
+	let loadingEl: any;
+	let pendingTimeout: NodeJS.Timeout;
+
+	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,
+		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 w-3 h-3 flex-none rounded-full shadow-lg"
+		/>
+		<div
+			class="relative rounded-2xl prose-pre:my-2 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 text-gray-600 dark:text-gray-300 min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px]"
+		>
+			{#if !message.content}
+				<IconLoading classNames="absolute inset-0 m-auto" />
+			{/if}
+			<div
+				class="prose max-sm:prose-sm dark:prose-invert prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-headings:font-semibold max-w-none"
+				bind:this={contentEl}
+			>
+				{#each tokens as token}
+					{#if token.type === "code"}
+						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
+					{:else}
+						{@html marked.parser([token], options)}
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}
+{#if message.from === "user"}
+	<div class="flex items-start justify-start gap-4 max-sm:text-sm">
+		<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">
+			{message.content.trim()}
+		</div>
+	</div>
+{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
+	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
+	import { tick } from "svelte";
+
+	import ChatIntroduction from "./ChatIntroduction.svelte";
+	import ChatMessage from "./ChatMessage.svelte";
+
+	export let messages: Message[];
+	export let loading: boolean;
+	export let pending: boolean;
+
+	let chatContainer: HTMLElement;
+
+	async function scrollToBottom() {
+		await tick();
+		chatContainer.scrollTop = chatContainer.scrollHeight;
+	}
+
+	// If last message is from user, scroll to bottom
+	$: if (messages.at(-1)?.from === "user") {
+		scrollToBottom();
+	}
+</script>
+
+<div
+	class="overflow-y-auto h-full scrollbar-custom mr-1"
+	use:snapScrollToBottom={messages.length ? messages : false}
+	bind:this={chatContainer}
+>
+	<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-5 sm:gap-8 h-full">
+		{#each messages as message, i}
+			<ChatMessage loading={loading && i === messages.length - 1} {message} />
+		{:else}
+			<ChatIntroduction on:message />
+		{/each}
+		{#if pending}
+			<ChatMessage message={{ from: "assistant", content: "" }} />
+		{/if}
+		<div class="h-32 flex-none" />
+	</div>
+	<ScrollToBottomBtn
+		class="max-md:hidden bottom-36 right-4 lg:right-10"
+		scrollNode={chatContainer}
+	/>
+</div>

src/lib/components/chat/ChatWindow.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import { createEventDispatcher } from "svelte";
+
+	import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
+	import CarbonExport from "~icons/carbon/export";
+
+	import ChatMessages from "./ChatMessages.svelte";
+	import ChatInput from "./ChatInput.svelte";
+	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
+	import { PUBLIC_MODEL_ID, PUBLIC_MODEL_NAME } from "$env/static/public";
+
+	export let messages: Message[] = [];
+	export let disabled: boolean = false;
+	export let loading: boolean = false;
+	export let pending: boolean = false;
+
+	let message: string;
+
+	const dispatch = createEventDispatcher<{ message: string; share: void; stop: void }>();
+
+	const handleSubmit = () => {
+		if (loading) return;
+		dispatch("message", message);
+		message = "";
+	};
+</script>
+
+<div class="relative min-h-0 min-w-0">
+	<ChatMessages {loading} {pending} {messages} on:message />
+	<div
+		class="flex flex-col pointer-events-none [&>*]:pointer-events-auto 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 via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full z-0"
+	>
+		<StopGeneratingBtn
+			visible={loading}
+			className="right-5 mr-[1px] md:mr-0 md:right-7 top-6 md:top-10 z-10"
+			on:click={() => dispatch("stop")}
+		/>
+		<form
+			on:submit|preventDefault={handleSubmit}
+			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 "
+		>
+			<div class="w-full flex flex-1 border-none bg-transparent">
+				<ChatInput
+					placeholder="Ask anything"
+					bind:value={message}
+					on:submit={handleSubmit}
+					autofocus
+					maxRows={10}
+				/>
+				<button
+					class="btn p-1 px-[0.7rem] self-end bg-transparent my-1 h-[2.4rem] text-gray-400 rounded-lg enabled:dark:hover:text-gray-100 enabled:hover:text-gray-700 disabled:opacity-60 dark:disabled:opacity-40 mx-1"
+					disabled={!message || loading || disabled}
+					type="submit"
+				>
+					<CarbonSendAltFilled />
+				</button>
+			</div>
+		</form>
+		<div class="flex text-xs text-gray-400/90 mt-2 justify-between self-stretch px-1 max-sm:gap-2">
+			<p>
+				Model: <a
+					href="https://huggingface.co/{PUBLIC_MODEL_ID}"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:underline">{PUBLIC_MODEL_NAME}</a
+				> <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may be inaccurate
+				or false.
+			</p>
+			{#if messages.length}
+				<button
+					class="flex flex-none items-center hover:underline hover:text-gray-400 dark:max-sm:bg-gray-800 max-sm:bg-gray-50 max-sm:px-2.5 max-sm:rounded-lg"
+					type="button"
+					on:click={() => dispatch("share")}
+				>
+					<CarbonExport class="text-[.6rem] sm:mr-1.5 sm:text-yellow-500" />
+					<div class="max-sm:hidden">Share this conversation</div>
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>

src/lib/components/icons/IconChevron.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let classNames: string = "";
+</script>
+
+<svg
+	width="15"
+	height="8"
+	viewBox="0 0 15 8"
+	class={classNames}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.67236 1L7.67236 7L13.6724 1"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

src/lib/components/icons/IconCopy.svelte

@@ -0,0 +1,26 @@
+<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/lib/components/icons/IconDazzled.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	fill="none"
+	viewBox="0 0 26 23"
+>
+	<path
+		fill="url(#a)"
+		d="M.93 10.65A10.17 10.17 0 0 1 11.11.48h4.67a9.45 9.45 0 0 1 0 18.89H4.53L1.62 22.2a.38.38 0 0 1-.69-.28V10.65Z"
+	/>
+	<path
+		fill="#000"
+		fill-rule="evenodd"
+		d="M11.52 7.4a1.86 1.86 0 1 1-3.72 0 1.86 1.86 0 0 1 3.72 0Zm7.57 0a1.86 1.86 0 1 1-3.73 0 1.86 1.86 0 0 1 3.73 0ZM8.9 12.9a.55.55 0 0 0-.11.35.76.76 0 0 1-1.51 0c0-.95.67-1.94 1.76-1.94 1.09 0 1.76 1 1.76 1.94H9.3a.55.55 0 0 0-.12-.35c-.06-.07-.1-.08-.13-.08s-.08 0-.14.08Zm4.04 0a.55.55 0 0 0-.12.35h-1.51c0-.95.68-1.94 1.76-1.94 1.1 0 1.77 1 1.77 1.94h-1.51a.55.55 0 0 0-.12-.35c-.06-.07-.11-.08-.14-.08-.02 0-.07 0-.13.08Zm-1.89.79c-.02 0-.07-.01-.13-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.75 1.95 1.1 0 1.77-1 1.77-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.14.08Zm4.04 0c-.03 0-.08-.01-.14-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.76 1.95 1.08 0 1.76-1 1.76-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.13.08Zm1.76-.44c0-.16.05-.28.12-.35.06-.07.1-.08.13-.08s.08 0 .14.08c.06.07.11.2.11.35a.76.76 0 0 0 1.51 0c0-.95-.67-1.94-1.76-1.94-1.09 0-1.76 1-1.76 1.94h1.5Z"
+		clip-rule="evenodd"
+	/>
+	<defs>
+		<radialGradient
+			id="a"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(0 31.37 -34.85 0 13.08 -9.02)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD21E" />
+			<stop offset="1" stop-color="red" />
+		</radialGradient>
+	</defs>
+</svg>

src/lib/components/icons/IconLoading.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let classNames: string = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="40px"
+	height="25px"
+	viewBox="0 0 60 40"
+	preserveAspectRatio="xMidYMid"
+	class={classNames}
+>
+	{#each Array(3) as _, index}
+		<g transform={`translate(${20 * index + 10} 20)`}>
+			{index}
+			<circle cx="0" cy="0" r="6" fill="currentColor">
+				<animateTransform
+					attributeName="transform"
+					type="scale"
+					begin={`${-0.375 + 0.15 * index}s`}
+					calcMode="spline"
+					keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
+					values="0.5;1;0.5"
+					keyTimes="0;0.5;1"
+					dur="1s"
+					repeatCount="indefinite"
+				/>
+			</circle>
+		</g>
+	{/each}
+</svg>

src/lib/components/icons/Logo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let classNames: string = "";
+</script>
+
+<svg
+	width="1em"
+	height="1em"
+	class={classNames}
+	viewBox="0 0 13 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill="#FFD21E"
+		d="M1.76 5.63a3.7 3.7 0 0 1 3.7-3.7h1.7a3.43 3.43 0 0 1 0 6.87H3.07L2.01 9.83a.14.14 0 0 1-.25-.1v-4.1Z"
+	/>
+	<path
+		fill="#32343D"
+		d="M7.37 4.8c.13.05.19.33.33.25a.54.54 0 0 0 .22-.73.54.54 0 0 0-.73-.22.54.54 0 0 0-.22.73c.06.13.27-.08.4-.03ZM4.83 4.8c-.14.05-.2.33-.33.25a.54.54 0 0 1-.23-.73A.54.54 0 0 1 5 4.1c.26.14.36.47.22.73-.06.13-.27-.08-.4-.03ZM6.12 7.4c1.06 0 1.4-.96 1.4-1.44 0-.49-.62.26-1.4.26-.77 0-1.4-.75-1.4-.26 0 .48.34 1.43 1.4 1.43Z"
+	/>
+	<path
+		fill="#FF323D"
+		d="M6.97 7.12c-.2.16-.49.27-.85.27-.34 0-.6-.1-.81-.24a.94.94 0 0 1 .57-.49c.04-.01.09.06.13.14.05.07.1.15.14.15.05 0 .1-.08.14-.15.05-.08.1-.15.14-.13a.93.93 0 0 1 .54.45Z"
+	/>
+</svg>

src/lib/server/abortedGenerations.ts

@@ -0,0 +1,29 @@
+// Shouldn't be needed if we dove into sveltekit internals, see https://github.com/huggingface/chat-ui/pull/88#issuecomment-1523173850
+
+import { setTimeout } from "node:timers/promises";
+import { collections } from "./database";
+
+let closed = false;
+process.on("SIGINT", () => {
+	closed = true;
+});
+
+export let abortedGenerations: Map<string, Date> = new Map();
+
+async function maintainAbortedGenerations() {
+	while (!closed) {
+		await setTimeout(1000);
+
+		try {
+			const aborts = await collections.abortedGenerations.find({}).sort({ createdAt: 1 }).toArray();
+
+			abortedGenerations = new Map(
+				aborts.map(({ conversationId, createdAt }) => [conversationId.toString(), createdAt])
+			);
+		} catch (err) {
+			console.error(err);
+		}
+	}
+}
+
+maintainAbortedGenerations();

src/lib/server/database.ts

@@ -0,0 +1,27 @@
+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 type { AbortedGeneration } from "$lib/types/AbortedGeneration";
+
+const client = new MongoClient(MONGODB_URL, {
+	// directConnection: true
+});
+
+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 abortedGenerations = db.collection<AbortedGeneration>("abortedGenerations");
+
+export { client, db };
+export const collections = { conversations, sharedConversations, abortedGenerations };
+
+client.on("open", () => {
+	conversations.createIndex({ sessionId: 1, updatedAt: -1 });
+	abortedGenerations.createIndex({ updatedAt: 1 }, { expireAfterSeconds: 30 });
+	abortedGenerations.createIndex({ conversationId: 1 }, { unique: true });
+	sharedConversations.createIndex({ hash: 1 }, { unique: true });
+});

src/lib/server/modelEndpoint.ts

@@ -0,0 +1,21 @@
+import { MODEL_ENDPOINTS } from "$env/static/private";
+import { sum } from "$lib/utils/sum";
+
+const endpoints: Array<{ endpoint: string; authorization: string; weight: number }> =
+	JSON.parse(MODEL_ENDPOINTS);
+const totalWeight = sum(endpoints.map((e) => e.weight));
+
+/**
+ * Find a random load-balanced endpoint
+ */
+export function modelEndpoint(): { endpoint: string; authorization: string; weight: number } {
+	let random = Math.random() * totalWeight;
+	for (const endpoint of endpoints) {
+		if (random < endpoint.weight) {
+			return endpoint;
+		}
+		random -= endpoint.weight;
+	}
+
+	throw new Error("Invalid config, no endpoint found");
+}

src/lib/shareConversation.ts

@@ -0,0 +1,34 @@
+import { base } from "$app/paths";
+import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+
+export async function shareConversation(id: string, title: string) {
+	try {
+		const res = await fetch(`${base}/conversation/${id}/share`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		});
+
+		if (!res.ok) {
+			error.set("Error while sharing conversation, try again.");
+			console.error("Error while sharing conversation: " + (await res.text()));
+			return;
+		}
+
+		const { url } = await res.json();
+
+		if (navigator.share) {
+			navigator.share({
+				title,
+				text: "Share this chat with others",
+				url,
+			});
+		} else {
+			prompt("Copy this public url to share:", url);
+		}
+	} catch (err) {
+		error.set(ERROR_MESSAGES.default);
+		console.error(err);
+	}
+}

src/lib/stores/errors.ts

@@ -0,0 +1,7 @@
+import { writable } from "svelte/store";
+
+export const ERROR_MESSAGES = {
+	default: "Oops, something went wrong.",
+};
+
+export const error = writable<string | null>(null);

src/lib/stores/pendingMessage.ts

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

src/lib/switchTheme.ts

@@ -0,0 +1,10 @@
+export 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";
+	}
+}

src/lib/types/AbortedGeneration.ts

@@ -0,0 +1,9 @@
+// Ideally shouldn't be needed, see https://github.com/huggingface/chat-ui/pull/88#issuecomment-1523173850
+
+import type { Conversation } from "./Conversation";
+
+export interface AbortedGeneration {
+	createdAt: Date;
+	updatedAt: Date;
+	conversationId: Conversation["_id"];
+}

src/lib/types/Conversation.ts

@@ -0,0 +1,19 @@
+import type { ObjectId } from "mongodb";
+import type { Message } from "./Message";
+
+export interface Conversation {
+	_id: ObjectId;
+
+	// Can be undefined for shared convo then deleted
+	sessionId: string;
+
+	title: string;
+	messages: Message[];
+
+	createdAt: Date;
+	updatedAt: Date;
+
+	meta?: {
+		fromShareId?: string;
+	};
+}

src/lib/types/Message.ts

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

src/lib/types/SharedConversation.ts

@@ -0,0 +1,13 @@
+import type { Message } from "./Message";
+
+export interface SharedConversation {
+	_id: string;
+
+	hash: string;
+
+	title: string;
+	messages: Message[];
+
+	createdAt: Date;
+	updatedAt: Date;
+}

src/lib/types/UrlDependency.ts

@@ -0,0 +1,4 @@
+/* eslint-disable no-shadow */
+export enum UrlDependency {
+	ConversationList = "conversation:list",
+}

src/lib/utils/concatUint8Arrays.ts

@@ -0,0 +1,12 @@
+import { sum } from "./sum";
+
+export function concatUint8Arrays(arrays: Uint8Array[]): Uint8Array {
+	const totalLength = sum(arrays.map((a) => a.length));
+	const result = new Uint8Array(totalLength);
+	let offset = 0;
+	for (const array of arrays) {
+		result.set(array, offset);
+		offset += array.length;
+	}
+	return result;
+}