Duplicate from huggingchat/chat-ui

Co-authored-by: Eliott Coyac <coyotte508@users.noreply.huggingface.co>

.env

@@ -0,0 +1,26 @@
+# 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
+
+# Increase depending on the model
+PUBLIC_MAX_INPUT_TOKENS=1000
+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=</s>
+PUBLIC_PREPROMPT="Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful."
+PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
+
+# Copy this in .env.local with and replace "hf_<token>" your HF token from https://huggingface.co/settings/token
+# You can also change the model from OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5 to your own model
+MODEL_ENDPOINTS=`[{
+  "endpoint": "https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5", 
+  "authorization": "Bearer hf_<token>", 
+  "weight": 1
+}]`

.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", "prettier-plugin-tailwindcss"],
+	"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,16 @@
+# 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 --link --chown=1000 . .
+
+RUN npm i
+
+RUN --mount=type=secret,id=DOTENV_LOCAL,dst=.env.local npm run build
+
+CMD pm2 start build/index.js -i $CPU_CORES --no-daemon

PRIVACY.md

@@ -0,0 +1,35 @@
+## Privacy
+
+> Last updated: May 2nd, 2023
+
+In this `v0.1` of HuggingChat, 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.
+
+By default, your conversations are shared with the model's authors (for the `v0.1` model, to <a target="_blank" href="https://open-assistant.io/dashboard">Open Assistant</a>) to improve their training data and model over time. Model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
+
+If you disable data sharing in your settings, your conversations will not be used for any downstream usage (including for research or model training purposes), and they will only be stored to let you access past conversations. You can click on the Delete icon to delete any past conversation at any moment.
+
+🗓 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 privacy@huggingface.co.
+
+## 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 (done ✅)

README.md

@@ -0,0 +1,69 @@
+---
+title: chat-ui
+emoji: 🔥
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+base_path: /chat
+app_port: 3000
+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.
+
+Basically you need to create a `.env.local` with the following contents:
+
+```
+MONGODB_URL=<url to mongo, for example a free MongoDB Atlas sandbox instance>
+MODEL_ENDPOINTS=`[{
+  "endpoint": "https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+  "authorization": "Bearer <hf_token>",
+  "weight": 1
+}]`
+```
+
+Where the contents in `<...>` are replaced by the MongoDB URL and your [HF Access Token](https://huggingface.co/settings/tokens).
+
+## Duplicating to a Space
+
+Create a `DOTENV_LOCAL` secret to your space with the following contents:
+
+```
+MONGODB_URL=<url to mongo, for example a free MongoDB Atlas sandbox instance>
+MODEL_ENDPOINTS=`[{
+  "endpoint": "https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+  "authorization": "Bearer <hf_token>",
+  "weight": 1
+}]`
+```
+
+Where the contents in `<...>` are replaced by the MongoDB URL and your [HF Access Token](https://huggingface.co/settings/tokens).
+
+## 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,50 @@
+{
+	"name": "chat-ui",
+	"version": "0.1.0",
+	"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",
+		"prettier-plugin-tailwindcss": "^0.2.7",
+		"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.2.0",
+		"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,45 @@
+<!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");
+			}
+
+			// For some reason, Sveltekit doesn't let us load env variables from .env here, so we load it from hooks.server.ts
+			window.gaId = "%gaId%";
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+		<div class="contents h-full">%sveltekit.body%</div>
+
+		<!-- Google Tag Manager -->
+		<script>
+			if (window.gaId) {
+				const script = document.createElement("script");
+				script.src = "https://www.googletagmanager.com/gtag/js?id=" + window.gaId;
+				script.async = true;
+				document.head.appendChild(script);
+
+				window.dataLayer = window.dataLayer || [];
+				function gtag() {
+					dataLayer.push(arguments);
+				}
+				gtag("js", new Date());
+				/// ^ See https://developers.google.com/tag-platform/gtagjs/install
+				gtag("config", window.gaId);
+				gtag("consent", "default", { ad_storage: "denied", analytics_storage: "denied" });
+				/// ^ See https://developers.google.com/tag-platform/gtagjs/reference#consent
+				/// TODO: ask the user for their consent and update this with gtag('consent', 'update')
+			}
+		</script>
+	</body>
+</html>

src/hooks.server.ts

@@ -0,0 +1,37 @@
+import { dev } from "$app/environment";
+import { COOKIE_NAME } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
+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: dev ? "lax" : "none",
+		secure: !dev,
+		httpOnly: true,
+		expires: addYears(new Date(), 1),
+	});
+
+	let replaced = false;
+
+	const response = await resolve(event, {
+		transformPageChunk: (chunk) => {
+			// For some reason, Sveltekit doesn't let us load env variables from .env in the app.html template
+			if (replaced || !chunk.html.includes("%gaId%")) {
+				return chunk.html;
+			}
+			replaced = true;
+
+			return chunk.html.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID);
+		},
+	});
+
+	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,33 @@
+import {
+	PUBLIC_ASSISTANT_MESSAGE_TOKEN,
+	PUBLIC_MAX_INPUT_TOKENS,
+	PUBLIC_PREPROMPT,
+	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 (
+		PUBLIC_PREPROMPT +
+		"\n-----\n" +
+		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 my-4 rounded-lg">
+	<pre
+		class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><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 rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {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/EthicsModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { PUBLIC_VERSION } from "$env/static/public";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import type { Settings } from "$lib/types/Settings";
+	import { updateSettings } from "$lib/updateSettings";
+
+	export let settings: Omit<Settings, "sessionId">;
+</script>
+
+<Modal>
+	<div
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-yellow-500/40 via-yellow-500/10 to-yellow-500/0 px-4 pb-10 pt-9 text-center"
+	>
+		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
+			<Logo classNames="text-3xl mr-1.5" />HuggingChat
+			{#if typeof PUBLIC_VERSION !== "undefined"}
+				<div
+					class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
+				>
+					v{PUBLIC_VERSION}
+				</div>
+			{/if}
+		</h2>
+		<p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
+			This application is for demonstration purposes only.
+		</p>
+		<p class="text-gray-800">
+			AI is an area of active research with known problems such as biased generation and
+			misinformation. Do not use this application for high-stakes decisions or advice.
+		</p>
+		<p class="px-2 text-sm text-gray-500">
+			Your conversations will be shared with model authors unless you disable it from your settings.
+		</p>
+		<!-- The updateSettings call will invalidate the settings, which will reload the page without the modal -->
+		<button
+			type="button"
+			on:click={() => updateSettings({ ...settings, ethicsModalAcceptedAt: new Date() })}
+			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
+		>
+			Start chatting
+		</button>
+	</div>
+</Modal>

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 | undefined;
+
+	$: 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="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
+>
+	<button
+		type="button"
+		class="-ml-3 flex h-9 w-9 shrink-0 items-center justify-center"
+		on:click={() => dispatch("toggle", true)}
+		aria-label="Open menu"
+		bind:this={openEl}><CarbonTextAlignJustify /></button
+	>
+	<span class="truncate px-4">{title}</span>
+	<a href={base || "/"} class="-mr-3 flex h-9 w-9 shrink-0 items-center justify-center"
+		><CarbonAdd /></a
+	>
+</nav>
+<nav
+	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
+		? 'block'
+		: 'hidden'}"
+>
+	<div class="flex h-12 items-center px-4">
+		<button
+			type="button"
+			class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"
+			on:click={() => dispatch("toggle", false)}
+			aria-label="Close menu"
+			bind:this={closeEl}><CarbonClose /></button
+		>
+	</div>
+	<slot />
+</nav>

src/lib/components/Modal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cubicOut } from "svelte/easing";
+	import { fade } from "svelte/transition";
+</script>
+
+<div
+	transition:fade={{ easing: cubicOut, duration: 300 }}
+	class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
+>
+	<div class="-mt-10 max-w-sm overflow-hidden rounded-2xl bg-white shadow-2xl md:-mt-20">
+		<slot />
+	</div>
+</div>

src/lib/components/NavMenu.svelte

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

src/lib/components/ScrollToBottomBtn.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { onDestroy } from "svelte";
+	import IconChevron from "./icons/IconChevron.svelte";
+
+	export let scrollNode: HTMLElement;
+	export { className as class };
+
+	let visible: boolean = false;
+	let className = "";
+	let observer: ResizeObserver | null = null;
+
+	$: if (scrollNode) {
+		destroy();
+
+		if (window.ResizeObserver) {
+			observer = new ResizeObserver(() => {
+				updateVisibility();
+			});
+			observer.observe(scrollNode);
+		}
+		scrollNode.addEventListener("scroll", updateVisibility);
+	}
+
+	function updateVisibility() {
+		if (!scrollNode) return;
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+
+	onDestroy(destroy);
+</script>
+
+{#if visible}
+	<button
+		transition:fade|local={{ duration: 150 }}
+		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
+		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
+		><IconChevron classNames="mt-[2px]" /></button
+	>
+{/if}

src/lib/components/SettingsModal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import Switch from "$lib/components/Switch.svelte";
+	import type { Settings } from "$lib/types/Settings";
+	import { updateSettings } from "$lib/updateSettings";
+
+	export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal>
+	<div class="flex w-full flex-col gap-5 p-6">
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Settings</h2>
+			<button class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+
+		<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500" for="switch">
+			<Switch name="switch" bind:checked={settings.shareConversationsWithModelAuthors} />
+			Share conversations with model authors
+		</label>
+
+		<p class="text-gray-800">
+			Sharing your data will help improve the training data and make open models better over time.
+		</p>
+		<p class="text-gray-800">
+			You can change this setting at any time, it applies to all your conversations.
+		</p>
+		<p class="text-gray-800">
+			Read more about this model's authors,
+			<a
+				href="https://open-assistant.io/"
+				target="_blank"
+				rel="noreferrer"
+				class="underline decoration-gray-300 hover:decoration-gray-700">Open Assistant</a
+			>.
+		</p>
+		<button
+			type="button"
+			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
+			on:click={() =>
+				updateSettings({
+					shareConversationsWithModelAuthors: settings.shareConversationsWithModelAuthors,
+				}).then((res) => {
+					if (res) {
+						dispatch("close");
+					}
+				})}
+		>
+			Apply
+		</button>
+	</div>
+</Modal>

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="btn absolute flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 
+    {className}
+    {visible ? 'visible opacity-100' : 'invisible opacity-0'}
+    "
+>
+	<CarbonPause class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
+</button>

src/lib/components/Switch.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let checked: boolean;
+	export let name: string;
+</script>
+
+<div
+	class="relative inline-flex h-5 w-9 items-center rounded-full p-1 shadow-inner transition-all {checked
+		? 'bg-black'
+		: 'bg-gray-300 hover:bg-gray-400'}"
+>
+	<input
+		bind:checked
+		type="checkbox"
+		{name}
+		id={name}
+		class="peer absolute inset-0 cursor-pointer opacity-0"
+	/>
+	<div
+		class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-3.5"
+	/>
+</div>

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="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
+>
+	<div
+		class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+	>
+		<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 px-2 py-1 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 min-w-0 flex-1">
+	<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="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent"
+		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,112 @@
+<script lang="ts">
+	import {
+		PUBLIC_DISABLE_INTRO_TILES,
+		PUBLIC_MODEL_ID,
+		PUBLIC_MODEL_NAME,
+		PUBLIC_VERSION,
+	} 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="my-auto grid gap-8 lg:grid-cols-3">
+	<div class="lg:col-span-1">
+		<div>
+			<div class="mb-3 flex items-center text-2xl font-semibold">
+				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
+				HuggingChat
+				{#if typeof PUBLIC_VERSION !== "undefined"}
+					<div
+						class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
+					>
+						v{PUBLIC_VERSION}
+					</div>
+				{/if}
+			</div>
+			<p class="text-base text-gray-600 dark:text-gray-400">
+				Making the community's best AI chat models available to everyone.
+			</p>
+		</div>
+	</div>
+	<div class="lg:col-span-2 lg:pl-24">
+		<div class="overflow-hidden rounded-xl border dark:border-gray-800">
+			<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 rounded-xl bg-gray-100 px-3 py-2 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-300"
+			>
+				<a
+					href="https://huggingface.co/{PUBLIC_MODEL_ID}"
+					target="_blank"
+					rel="noreferrer"
+					class="flex items-center hover:underline"
+				>
+					<CarbonArrowUpRight class="mr-1.5 text-xs 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="mr-1.5 text-xs text-gray-400" />
+					Dataset
+					<div class="max-sm:hidden">&nbsp;page</div>
+				</a>
+				<a
+					href="https://open-assistant.io/"
+					target="_blank"
+					class="ml-auto flex items-center hover:underline"
+					rel="noreferrer"
+				>
+					<CarbonEarth class="mr-1.5 text-xs 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 gap-3 lg:grid-cols-3 lg:gap-5">
+				<button
+					type="button"
+					class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+					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="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+					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="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+					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,116 @@
+<script lang="ts">
+	import { marked } from "marked";
+	import type { Message } from "$lib/types/Message";
+	import { afterUpdate, createEventDispatcher } from "svelte";
+	import { deepestChild } from "$lib/utils/deepestChild";
+
+	import CodeBlock from "../CodeBlock.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import { PUBLIC_SEP_TOKEN } from "$env/static/public";
+
+	function sanitizeMd(md: string) {
+		return md
+			.replace(/<\|[a-z]*$/, "")
+			.replace(/<\|[a-z]+\|$/, "")
+			.replace(/<$/, "")
+			.replaceAll(PUBLIC_SEP_TOKEN, " ")
+			.replaceAll(/<\|[a-z]+\|>/g, " ")
+			.replaceAll(/<br\s?\/?>/gi, "\n")
+			.trim()
+			.replaceAll("<", "&lt;");
+	}
+	function unsanitizeMd(md: string) {
+		return md.replaceAll("&lt;", "<");
+	}
+
+	export let message: Message;
+	export let loading: boolean = false;
+
+	const dispatch = createEventDispatcher<{ retry: void }>();
+
+	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,
+		breaks: 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 h-3 w-3 flex-none select-none rounded-full shadow-lg"
+		/>
+		<div
+			class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px] rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
+		>
+			{#if !message.content}
+				<IconLoading classNames="absolute inset-0 m-auto" />
+			{/if}
+			<div
+				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+				bind:this={contentEl}
+			>
+				{#each tokens as token}
+					{#if token.type === "code"}
+						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
+					{:else}
+						{@html marked(token.raw, options)}
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}
+{#if message.from === "user"}
+	<div class="group relative flex items-start justify-start gap-4 max-sm:text-sm">
+		<div class="mt-5 h-3 w-3 flex-none rounded-full" />
+		<div class="whitespace-break-spaces rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400">
+			{message.content.trim()}
+		</div>
+		{#if !loading && message.id}
+			<button
+				class="absolute right-0 top-3.5 cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
+				title="Retry"
+				type="button"
+				on:click={() => dispatch("retry")}
+			>
+				<CarbonRotate360 />
+			</button>
+		{/if}
+	</div>
+{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
+	import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
+	import { createEventDispatcher, tick } from "svelte";
+
+	import ChatIntroduction from "./ChatIntroduction.svelte";
+	import ChatMessage from "./ChatMessage.svelte";
+	import { randomUUID } from "$lib/utils/randomUuid";
+
+	const dispatch = createEventDispatcher<{ retry: { id: Message["id"]; content: string } }>();
+
+	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[messages.length - 1]?.from === "user") {
+		scrollToBottom();
+	}
+</script>
+
+<div
+	class="scrollbar-custom mr-1 h-full overflow-y-auto"
+	use:snapScrollToBottom={messages.length ? messages : false}
+	bind:this={chatContainer}
+>
+	<div class="mx-auto flex h-full max-w-3xl flex-col gap-5 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
+		{#each messages as message, i}
+			<ChatMessage
+				loading={loading && i === messages.length - 1}
+				{message}
+				on:retry={() => dispatch("retry", { id: message.id, content: message.content })}
+			/>
+		{:else}
+			<ChatIntroduction on:message />
+		{/each}
+		{#if pending}
+			<ChatMessage message={{ from: "assistant", content: "", id: randomUUID() }} />
+		{/if}
+		<div class="h-32 flex-none" />
+	</div>
+	<ScrollToBottomBtn
+		class="bottom-36 right-4 max-md:hidden lg:right-10"
+		scrollNode={chatContainer}
+	/>
+</div>

src/lib/components/chat/ChatWindow.svelte

@@ -0,0 +1,95 @@
+<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;
+		retry: { id: Message["id"]; content: string };
+	}>();
+
+	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
+		on:retry={(ev) => {
+			if (!loading) dispatch("retry", ev.detail);
+		}}
+	/>
+	<div
+		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
+	>
+		<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="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500 "
+		>
+			<div class="flex w-full flex-1 border-none bg-transparent">
+				<ChatInput
+					placeholder="Ask anything"
+					bind:value={message}
+					on:submit={handleSubmit}
+					autofocus
+					maxRows={10}
+				/>
+				<button
+					class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
+					disabled={!message || loading || disabled}
+					type="submit"
+				>
+					<CarbonSendAltFilled />
+				</button>
+			</div>
+		</form>
+		<div class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 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:text-gray-400 hover:underline max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
+					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,31 @@
+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";
+import type { Settings } from "$lib/types/Settings";
+
+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");
+const settings = db.collection<Settings>("settings");
+
+export { client, db };
+export const collections = { conversations, sharedConversations, abortedGenerations, settings };
+
+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 });
+	// Sparse so that we can have settings on userId later
+	settings.createIndex({ sessionId: 1 }, { unique: true, sparse: 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,27 @@
+import { base } from "$app/paths";
+import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+import { share } from "./utils/share";
+
+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();
+
+		share(url, title);
+	} 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/stores/pendingMessageIdToRetry.ts

@@ -0,0 +1,4 @@
+import type { Message } from "$lib/types/Message";
+import { writable } from "svelte/store";
+
+export const pendingMessageIdToRetry = writable<Message["id"] | null>(null);

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,8 @@
+// Ideally shouldn't be needed, see https://github.com/huggingface/chat-ui/pull/88#issuecomment-1523173850
+
+import type { Conversation } from "./Conversation";
+import type { Timestamps } from "./Timestamps";
+
+export interface AbortedGeneration extends Timestamps {
+	conversationId: Conversation["_id"];
+}