Duplicate from huggingchat/chat-ui

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

.env

@@ -0,0 +1,78 @@
+# Use .env.local to change these variables
+# DO NOT EDIT THIS FILE WITH SENSITIVE DATA
+
+MONGODB_URL=#your mongodb URL here
+MONGODB_DB_NAME=chat-ui
+COOKIE_NAME=hf-chat
+HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
+# 'name', 'userMessageToken', 'assistantMessageToken', 'parameters' are required
+MODELS=`[
+  {
+    "name": "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+    "datasetName": "OpenAssistant/oasst1",
+    "description": "A good alternative to ChatGPT",
+    "websiteUrl": "https://open-assistant.io",
+    "userMessageToken": "<|prompter|>",
+    "assistantMessageToken": "<|assistant|>",
+    "messageEndToken": "</s>",
+    "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.\n-----\n",
+    "promptExamples": [
+      {
+        "title": "Write an email from bullet list",
+        "prompt": "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)"
+      }, {
+        "title": "Code a snake game",
+        "prompt": "Code a basic snake game in python, give explanations for each step."
+      }, {
+        "title": "Assist in a task",
+        "prompt": "How do I make a delicious lemon cheesecake?"
+      }
+    ],
+    "parameters": {
+      "temperature": 0.9,
+      "top_p": 0.95,
+      "repetition_penalty": 1.2,
+      "top_k": 50,
+      "truncate": 1000,
+      "max_new_tokens": 1024
+    }
+  },
+  {
+    "name":"bigcode/starcoderbase",
+    "displayName":"BigCode/StarCoderBase",
+    "datasetName":"bigcode/the-stack-dedup",
+    "description": "A good model for answering technical questions",
+    "websiteUrl":"https://huggingface.co/bigcode/",
+    "prepromptUrl": "https://huggingface.co/datasets/coyotte508/bigcodeprompt/raw/main/prompt.txt",
+    "promptExamples": [
+      {
+        "title": "Write a code snippet",
+        "prompt": "Write a function that loads a file and filters line starting with \"Star\"?"
+      }, {
+        "title": "Explain a technical concept",
+        "prompt": "What is a Dockerfile?"
+      }, {
+        "title": "Solve a technical task",
+        "prompt": "How to install pytorch with cuda?"
+      }
+    ],
+    "userMessageToken": "\n\nHuman: ",
+    "assistantMessageToken": "\n\nAssistant:",
+    "parameters": {
+      "temperature": 0.1,
+      "top_p": 0.9,
+      "repetition_penalty": 1.2,
+      "truncate": 8000,
+      "max_new_tokens": 2000,
+      "stop": ["Human:", "-----", "Assistant:"]
+    }
+  }
+]`
+
+PUBLIC_ORIGIN=#https://hf.co
+PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
+PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID=#UA-XXXXXXXX-X / Leave empty to disable
+
+PARQUET_EXPORT_DATASET=
+PARQUET_EXPORT_HF_TOKEN=
+PARQUET_EXPORT_SECRET=

.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,25 @@
+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"],
+		"@typescript-eslint/no-explicit-any": "error",
+		"@typescript-eslint/no-non-null-assertion": "error",
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+};

.github/workflows/lint-and-test.yml

@@ -0,0 +1,27 @@
+name: Lint and test
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+      - run: |
+          npm install ci
+      - name: "Checking lint/format errors"
+        run: |
+          npm run lint
+      - name: "Checking type errors"
+        run: |
+          npm run check

.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 [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 (done ✅)

README.md

@@ -0,0 +1,71 @@
+---
+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>
+HF_ACCESS_TOKEN=<your HF access token from 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>
+HF_ACCESS_TOKEN=<your HF access token from https://huggingface.co/settings/tokens>
+```
+
+Where the contents in `<...>` are replaced by the MongoDB URL and your [HF Access Token](https://huggingface.co/settings/tokens).
+
+## Running Local Inference
+
+Both the example above use the HF Inference API or HF Endpoints API.
+
+If you want to run the model locally, you need to run this inference server locally: https://github.com/huggingface/text-generation-inference
+
+And add this to your `.env.local`:
+
+```
+MODELS=`[{"name": "...", "endpoints": [{"url": "127.0.0.1:8080/generate_stream"}]}]`
+```
+
+## 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,53 @@
+{
+	"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.4",
+		"@sveltejs/kit": "^1.15.10",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/marked": "^4.0.8",
+		"@types/parquetjs": "^0.10.3",
+		"@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.58.0",
+		"svelte-check": "^3.2.0",
+		"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",
+		"@huggingface/hub": "^0.5.1",
+		"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",
+		"parquetjs": "^0.11.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,73 @@
+<!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%";
+			window.gaIdDeprecated = "%gaIdDeprecated%";
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+		<div id="app" 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>
+
+		<!-- Google Analytics v3 (deprecated on 1 July 2023) -->
+		<script>
+			if (window.gaIdDeprecated) {
+				(function (i, s, o, g, r, a, m) {
+					i["GoogleAnalyticsObject"] = r;
+					(i[r] =
+						i[r] ||
+						function () {
+							(i[r].q = i[r].q || []).push(arguments);
+						}),
+						(i[r].l = 1 * new Date());
+					(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+					a.async = 1;
+					a.src = g;
+					m.parentNode.insertBefore(a, m);
+				})(
+					window,
+					document,
+					"script",
+					"https://www.google-analytics.com/analytics.js",
+					"ganalytics"
+				);
+				ganalytics("create", window.gaIdDeprecated, "auto");
+				ganalytics("send", "pageview");
+			}
+		</script>
+	</body>
+</html>

src/hooks.server.ts

@@ -0,0 +1,72 @@
+import { dev } from "$app/environment";
+import { COOKIE_NAME } from "$env/static/private";
+import type { Handle } from "@sveltejs/kit";
+import {
+	PUBLIC_GOOGLE_ANALYTICS_ID,
+	PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID,
+} from "$env/static/public";
+import { addYears } from "date-fns";
+import { collections } from "$lib/server/database";
+import { base } from "$app/paths";
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const token = event.cookies.get(COOKIE_NAME);
+
+	event.locals.sessionId = token || crypto.randomUUID();
+
+	if (
+		event.request.method === "POST" &&
+		!event.url.pathname.startsWith(`${base}/settings`) &&
+		!event.url.pathname.startsWith(`${base}/admin`)
+	) {
+		const hasAcceptedEthicsModal = await collections.settings.countDocuments({
+			sessionId: event.locals.sessionId,
+			ethicsModalAcceptedAt: { $exists: true },
+		});
+
+		if (!hasAcceptedEthicsModal) {
+			const sendJson =
+				event.request.headers.get("accept")?.includes("application/json") ||
+				event.request.headers.get("content-type")?.includes("application/json");
+			return new Response(
+				sendJson
+					? JSON.stringify({ error: "You need to accept the welcome modal first" })
+					: "You need to accept the welcome modal first",
+				{
+					status: 405,
+					headers: {
+						"content-type": sendJson ? "application/json" : "text/plain",
+					},
+				}
+			);
+		}
+	}
+
+	// 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%") || !chunk.html.includes("%gaIdDeprecated%")) {
+				return chunk.html;
+			}
+			replaced = true;
+
+			return chunk.html
+				.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID)
+				.replace("%gaIdDeprecated%", PUBLIC_DEPRECATED_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: unknown) => {
+	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,30 @@
+import type { BackendModel } from "./server/models";
+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: Pick<Message, "from" | "content">[],
+	model: BackendModel
+): string {
+	const prompt =
+		messages
+			.map(
+				(m) =>
+					(m.from === "user"
+						? model.userMessageToken + m.content
+						: model.assistantMessageToken + m.content) +
+					(model.messageEndToken
+						? m.content.endsWith(model.messageEndToken)
+							? ""
+							: model.messageEndToken
+						: "")
+			)
+			.join("") + model.assistantMessageToken;
+
+	// Not super precise, but it's truncated in the model's backend anyway
+	return model.preprompt + prompt.split(" ").slice(-model.parameters.truncate).join(" ");
+}

src/lib/components/AnnouncementBanner.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let title = "";
+	export let classNames = "";
+</script>
+
+<div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
+	<span
+		class="mr-2 inline-flex items-center rounded-lg bg-gradient-to-br from-yellow-300 px-2 py-1 text-xxs font-medium uppercase leading-3 text-yellow-700 dark:from-[#373010] dark:text-yellow-400"
+		>New</span
+	>
+	{title}
+	<div class="ml-auto shrink-0">
+		<slot />
+	</div>
+</div>

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: ReturnType<typeof setTimeout>;
+
+	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,47 @@
+<script lang="ts">
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+	import { PUBLIC_VERSION } from "$env/static/public";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import type { LayoutData } from "../../routes/$types";
+
+	export let settings: LayoutData["settings"];
+</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
+			<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>
+		</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>
+		<form action="{base}/settings" use:enhance method="POST">
+			<input type="hidden" name="ethicsModalAccepted" value={true} />
+			{#each Object.entries(settings) as [key, val]}
+				<input type="hidden" name={key} value={val} />
+			{/each}
+			<button
+				type="submit"
+				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>
+		</form>
+	</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,59 @@
+<script lang="ts">
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import { cubicOut } from "svelte/easing";
+	import { fade } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import { browser } from "$app/environment";
+
+	export let width = "max-w-sm";
+
+	let backdropEl: HTMLDivElement;
+	let modalEl: HTMLDivElement;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dispatch("close");
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === backdropEl) {
+			dispatch("close");
+		}
+	}
+
+	onMount(() => {
+		document.getElementById("app")?.setAttribute("inert", "true");
+		modalEl.focus();
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		document.getElementById("app")?.removeAttribute("inert");
+	});
+</script>
+
+<Portal>
+	<div
+		role="presentation"
+		tabindex="-1"
+		bind:this={backdropEl}
+		on:click={handleBackdropClick}
+		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
+			role="dialog"
+			tabindex="-1"
+			bind:this={modalEl}
+			on:keydown={handleKeydown}
+			class="-mt-10 overflow-hidden rounded-2xl bg-white shadow-2xl outline-none md:-mt-20 {width}"
+		>
+			<slot />
+		</div>
+	</div>
+</Portal>

src/lib/components/ModelCardMetadata.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import CarbonEarth from "~icons/carbon/earth";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import type { Model } from "$lib/types/Model";
+
+	export let model: Pick<Model, "name" | "datasetName" | "websiteUrl">;
+
+	export let variant: "light" | "dark" = "light";
+</script>
+
+<div
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm 
+	{variant === 'dark'
+		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
+		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
+>
+	<a
+		href="https://huggingface.co/{model.name}"
+		target="_blank"
+		rel="noreferrer"
+		class="flex items-center hover:underline"
+		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+		Model
+		<div class="max-sm:hidden">&nbsp;page</div></a
+	>
+	{#if model.datasetName}
+		<a
+			href="https://huggingface.co/datasets/{model.datasetName}"
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Dataset
+			<div class="max-sm:hidden">&nbsp;page</div></a
+		>
+	{/if}
+	{#if model.websiteUrl}
+		<a
+			href={model.websiteUrl}
+			target="_blank"
+			class="ml-auto flex items-center hover:underline"
+			rel="noreferrer"
+		>
+			<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Website
+		</a>
+	{/if}
+</div>

src/lib/components/ModelsModal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
+	import ModelCardMetadata from "./ModelCardMetadata.svelte";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../routes/$types";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+
+	export let settings: LayoutData["settings"];
+	export let models: Array<Model>;
+
+	let selectedModelId = settings.activeModel;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal width="max-w-lg" on:close>
+	<form
+		action="{base}/settings"
+		method="post"
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		class="flex w-full flex-col gap-5 p-6"
+	>
+		{#each Object.entries(settings).filter(([k]) => k !== "activeModel") as [key, val]}
+			<input type="hidden" name={key} value={val} />
+		{/each}
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Models</h2>
+			<button type="button" class="group" on:click={() => dispatch("close")}>
+				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+			</button>
+		</div>
+
+		<div class="space-y-4">
+			{#each models as model}
+				<div
+					class="rounded-xl border border-gray-100 {model.id === selectedModelId
+						? 'bg-gradient-to-r from-yellow-200/40 via-yellow-500/10'
+						: ''}"
+				>
+					<label class="group flex cursor-pointer p-3" on:change aria-label={model.displayName}>
+						<input
+							type="radio"
+							class="sr-only"
+							name="activeModel"
+							value={model.id}
+							bind:group={selectedModelId}
+						/>
+						<span>
+							<span class="text-md block font-semibold leading-tight text-gray-800"
+								>{model.displayName}</span
+							>
+							{#if model.description}
+								<span class="text-xs text-[#9FA8B5]">{model.description}</span>
+							{/if}
+						</span>
+						<CarbonCheckmark
+							class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {model.id === selectedModelId
+								? 'text-yellow-400'
+								: 'text-transparent group-hover:text-gray-200'}"
+						/>
+					</label>
+					<ModelCardMetadata {model} />
+				</div>
+			{/each}
+		</div>
+		<button
+			type="submit"
+			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"
+		>
+			Apply
+		</button>
+	</form>
+</Modal>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	let el: HTMLElement;
+
+	onMount(() => {
+		el.ownerDocument.body.appendChild(el);
+	});
+
+	onDestroy(() => {
+		if (el?.parentNode) {
+			el.parentNode.removeChild(el);
+		}
+	});
+</script>
+
+<div bind:this={el} class="contents" hidden>
+	<slot />
+</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 = 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,65 @@
+<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 { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+
+	export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+</script>
+
+<Modal on:close>
+	<form
+		class="flex w-full flex-col gap-5 p-6"
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		method="post"
+		action="{base}/settings"
+	>
+		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+			<h2>Settings</h2>
+			<button type="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">
+			{#each Object.entries(settings).filter(([k]) => k !== "shareConversationsWithModelAuthors") as [key, val]}
+				<input type="hidden" name={key} value={val} />
+			{/each}
+			<Switch
+				name="shareConversationsWithModelAuthors"
+				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="submit"
+			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"
+		>
+			Apply
+		</button>
+	</form>
+</Modal>

src/lib/components/StopGeneratingBtn.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import CarbonPause from "~icons/carbon/pause-filled";
+
+	export let visible = 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,11 @@
+<script lang="ts">
+	export let checked: boolean;
+	export let name: string;
+</script>
+
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
+<div
+	class="relative inline-flex h-5 w-9 items-center rounded-full bg-gray-300 p-1 shadow-inner transition-all peer-checked:bg-black hover:bg-gray-400  peer-checked:[&>div]:translate-x-3.5"
+>
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
+</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 whitespace-pre-wrap p-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
+
+	<textarea
+		enterkeyhint="send"
+		tabindex="0"
+		rows="1"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		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,84 @@
+<script lang="ts">
+	import { PUBLIC_VERSION } from "$env/static/public";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import { createEventDispatcher } from "svelte";
+	import IconChevron from "$lib/components/icons/IconChevron.svelte";
+	import AnnouncementBanner from "../AnnouncementBanner.svelte";
+	import ModelsModal from "../ModelsModal.svelte";
+	import type { Model } from "$lib/types/Model";
+	import ModelCardMetadata from "../ModelCardMetadata.svelte";
+	import type { LayoutData } from "../../../routes/$types";
+	import { findCurrentModel } from "$lib/utils/models";
+
+	export let currentModel: Model;
+	export let settings: LayoutData["settings"];
+	export let models: Model[];
+
+	let isModelsModalOpen = false;
+
+	$: currentModelMetadata = findCurrentModel(models, settings.activeModel);
+
+	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
+				<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>
+			</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">
+		<AnnouncementBanner classNames="mb-4" title="BigCode/StarCoder is now available">
+			<button
+				type="button"
+				on:click={() => (isModelsModalOpen = true)}
+				class="mr-2 flex items-center underline hover:no-underline"
+				><IconChevron classNames="mr-1" /> Switch model</button
+			>
+		</AnnouncementBanner>
+		{#if isModelsModalOpen}
+			<ModelsModal {settings} {models} on:close={() => (isModelsModalOpen = false)} />
+		{/if}
+		<div class="overflow-hidden rounded-xl border dark:border-gray-800">
+			<div class="flex p-3">
+				<div>
+					<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
+					<div class="font-semibold">{currentModel.displayName}</div>
+				</div>
+				<button
+					type="button"
+					on:click={() => (isModelsModalOpen = true)}
+					class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
+					><IconChevron /></button
+				>
+			</div>
+			<ModelCardMetadata variant="dark" model={currentModel} />
+		</div>
+	</div>
+	{#if currentModelMetadata.promptExamples}
+		<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">
+				{#each currentModelMetadata.promptExamples as example}
+					<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", example.prompt)}
+					>
+						{example.title}
+					</button>
+				{/each}
+			</div>
+		</div>{/if}
+</div>

src/lib/components/chat/ChatMessage.svelte

@@ -0,0 +1,144 @@
+<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 { page } from "$app/stores";
+
+	import CodeBlock from "../CodeBlock.svelte";
+	import IconLoading from "../icons/IconLoading.svelte";
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	import CarbonDownload from "~icons/carbon/download";
+	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
+	import type { Model } from "$lib/types/Model";
+
+	function sanitizeMd(md: string) {
+		let ret = md
+			.replace(/<\|[a-z]*$/, "")
+			.replace(/<\|[a-z]+\|$/, "")
+			.replace(/<$/, "")
+			.replaceAll(PUBLIC_SEP_TOKEN, " ")
+			.replaceAll(/<\|[a-z]+\|>/g, " ")
+			.replaceAll(/<br\s?\/?>/gi, "\n")
+			.replaceAll("<", "&lt;")
+			.trim();
+
+		for (const stop of [...(model.parameters.stop ?? []), "<|endoftext|>"]) {
+			if (ret.endsWith(stop)) {
+				ret = ret.slice(0, -stop.length).trim();
+			}
+		}
+
+		return ret;
+	}
+	function unsanitizeMd(md: string) {
+		return md.replaceAll("&lt;", "<");
+	}
+
+	export let model: Model;
+	export let message: Message;
+	export let loading = false;
+
+	const dispatch = createEventDispatcher<{ retry: void }>();
+
+	let contentEl: HTMLElement;
+	let loadingEl: IconLoading;
+	let pendingTimeout: ReturnType<typeof setTimeout>;
+
+	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);
+		}
+	});
+
+	$: downloadLink =
+		message.from === "user" ? `${$page.url.pathname}/message/${message.id}/prompt` : undefined;
+</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}
+			<div class="absolute right-0 top-3.5 flex gap-2 lg:-right-2">
+				{#if downloadLink}
+					<a
+						class="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"
+						title="Download prompt and parameters"
+						type="button"
+						target="_blank"
+						href={downloadLink}
+					>
+						<CarbonDownload />
+					</a>
+				{/if}
+				<button
+					class="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>
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/components/chat/ChatMessages.svelte

@@ -0,0 +1,65 @@
+<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";
+	import type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../../routes/$types";
+
+	const dispatch = createEventDispatcher<{ retry: { id: Message["id"]; content: string } }>();
+
+	export let messages: Message[];
+	export let loading: boolean;
+	export let pending: boolean;
+	export let currentModel: Model;
+	export let settings: LayoutData["settings"];
+	export let models: Model[] | undefined;
+
+	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}
+				model={currentModel}
+				on:retry={() => dispatch("retry", { id: message.id, content: message.content })}
+			/>
+		{:else}
+			{#if models}
+				<ChatIntroduction {settings} {models} {currentModel} on:message />
+			{/if}
+		{/each}
+		{#if pending}
+			<ChatMessage
+				message={{ from: "assistant", content: "", id: randomUUID() }}
+				model={currentModel}
+			/>
+		{/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,102 @@
+<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 type { Model } from "$lib/types/Model";
+	import type { LayoutData } from "../../../routes/$types";
+
+	export let messages: Message[] = [];
+	export let disabled = false;
+	export let loading = false;
+	export let pending = false;
+	export let currentModel: Model;
+	export let models: Model[] | undefined = undefined;
+	export let settings: LayoutData["settings"];
+
+	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}
+		{settings}
+		{currentModel}
+		{models}
+		{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={4}
+				/>
+				<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/{currentModel.name}"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:underline">{currentModel.displayName}</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 = "";
+</script>
+
+<svg
+	width="1em"
+	height="1em"
+	viewBox="0 0 15 6"
+	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 = "";
+</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 = "";
+</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/constants/publicSepToken.ts

@@ -0,0 +1 @@
+export const PUBLIC_SEP_TOKEN = "</s>";

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,32 @@
+import { HF_ACCESS_TOKEN } from "$env/static/private";
+import { sum } from "$lib/utils/sum";
+import type { BackendModel } from "./models";
+
+/**
+ * Find a random load-balanced endpoint
+ */
+export function modelEndpoint(model: BackendModel): {
+	url: string;
+	authorization: string;
+	weight: number;
+} {
+	if (!model.endpoints) {
+		return {
+			url: `https://api-inference.huggingface.co/models/${model.name}`,
+			authorization: `Bearer ${HF_ACCESS_TOKEN}`,
+			weight: 1,
+		};
+	}
+	const endpoints = model.endpoints;
+	const totalWeight = sum(endpoints.map((e) => e.weight));
+
+	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");
+}