Add settings (#134)

Co-authored-by: Eliott C. <coyotte508@gmail.com>
Co-authored-by: coyotte508 <coyotte508@gmail.com>
Co-authored-by: Julien Chaumond <julien@huggingface.co>

.env

@@ -15,7 +15,6 @@ 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_VERSION=0
 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

PRIVACY.md

@@ -1,10 +1,12 @@
 ## Privacy
 
-In this `v0` of HuggingChat, we only store messages to display them to the user, not for any other usage (including for research or model training purposes).
+> Last updated: April 28, 2023
 
-Please note that in `v0`, users are not authenticated in any way, i.e. this app doesn't have access to your HF user account even if you're logged in to huggingface.co. The app is only using an anonymous session cookie. ❗️ Warning ❗️ this means if you switch browsers or clear cookies, you will currently lose your conversations.
+In 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.
 
-In a future version, we are considering exposing a setting for users to share their conversations with the model authors (here OpenAssistant) to improve their training data and their model over time. In other terms, model authors are the custodians of the data collected by their model, even if it's hosted on our platform.
+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.
 
@@ -30,4 +32,4 @@ We welcome any feedback on this app: please participate to the public discussion
 ## Coming soon
 
 - LLM watermarking
-- User setting to share conversations with model authors
+- User setting to share conversations with model authors (done ✅)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chat-ui",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/lib/components/EthicsModal.svelte

@@ -2,51 +2,43 @@
 	import { PUBLIC_VERSION } from "$env/static/public";
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import { onMount } from "svelte";
+	import type { Settings } from "$lib/types/Settings";
+	import { updateSettings } from "$lib/updateSettings";
 
-	let ethicsModal = false;
-
-	const LOCAL_STORAGE_KEY = "has-seen-ethics-modal";
-
-	onMount(() => {
-		ethicsModal = localStorage.getItem(LOCAL_STORAGE_KEY) === null;
-	});
-
-	const handleClick = () => {
-		ethicsModal = false;
-		localStorage.setItem(LOCAL_STORAGE_KEY, "true");
-	};
+	export let settings: Omit<Settings, "sessionId">;
 </script>
 
-{#if ethicsModal}
-	<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"
+<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"
 		>
-			<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>
-			<button
-				type="button"
-				on:click={handleClick}
-				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>
-{/if}
+			Start chatting
+		</button>
+	</div>
+</Modal>

src/lib/components/NavMenu.svelte

@@ -13,6 +13,7 @@
 	const dispatch = createEventDispatcher<{
 		shareConversation: { id: string; title: string };
 		deleteConversation: string;
+		clickSettings: void;
 		editConversationTitle: { id: string; title: string };
 	}>();
 
@@ -75,7 +76,7 @@
 	{/each}
 </div>
 <div
-	class="mt-0.5 flex flex-col gap-2 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
+	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}
@@ -84,6 +85,13 @@
 	>
 		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"

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">
+			Changing this setting will apply to all your conversations, past and future.
+		</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/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/server/database.ts

@@ -3,6 +3,7 @@ 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
@@ -15,13 +16,16 @@ 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 };
+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/types/AbortedGeneration.ts

@@ -1,9 +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 {
-	createdAt: Date;
-	updatedAt: Date;
+export interface AbortedGeneration extends Timestamps {
 	conversationId: Conversation["_id"];
 }

src/lib/types/Conversation.ts

@@ -1,7 +1,8 @@
 import type { ObjectId } from "mongodb";
 import type { Message } from "./Message";
+import type { Timestamps } from "./Timestamps";
 
-export interface Conversation {
+export interface Conversation extends Timestamps {
 	_id: ObjectId;
 
 	// Can be undefined for shared convo then deleted
@@ -10,9 +11,6 @@ export interface Conversation {
 	title: string;
 	messages: Message[];
 
-	createdAt: Date;
-	updatedAt: Date;
-
 	meta?: {
 		fromShareId?: string;
 	};

src/lib/types/Settings.ts

@@ -0,0 +1,13 @@
+import type { Timestamps } from "./Timestamps";
+
+export interface Settings extends Timestamps {
+	sessionId: string;
+
+	/**
+	 * Note: Only conversations with this settings explictly set to true should be shared.
+	 *
+	 * This setting is explicitly set to true when users accept the ethics modal.
+	 * */
+	shareConversationsWithModelAuthors: boolean;
+	ethicsModalAcceptedAt: Date | null;
+}

src/lib/types/SharedConversation.ts

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

src/lib/types/Timestamps.ts

@@ -0,0 +1,4 @@
+export interface Timestamps {
+	createdAt: Date;
+	updatedAt: Date;
+}

src/lib/types/UrlDependency.ts

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

src/lib/updateSettings.ts

@@ -0,0 +1,27 @@
+import { invalidate } from "$app/navigation";
+import { base } from "$app/paths";
+import { error } from "$lib/stores/errors";
+import type { Settings } from "./types/Settings";
+import { UrlDependency } from "./types/UrlDependency";
+
+export async function updateSettings(
+	settings: Partial<Omit<Settings, "sessionId">>
+): Promise<boolean> {
+	try {
+		const res = await fetch(`${base}/settings`, {
+			method: "PATCH",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(settings),
+		});
+		if (!res.ok) {
+			error.set("Error while updating settings, try again.");
+			return false;
+		}
+		await invalidate(UrlDependency.Settings);
+		return true;
+	} catch (err) {
+		console.error(err);
+		error.set(String(err));
+		return false;
+	}
+}

src/routes/+layout.server.ts

@@ -7,6 +7,9 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 	const { conversations } = collections;
 
 	depends(UrlDependency.ConversationList);
+	depends(UrlDependency.Settings);
+
+	const settings = await collections.settings.findOne({ sessionId: locals.sessionId });
 
 	return {
 		conversations: await conversations
@@ -22,5 +25,9 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 			})
 			.map((conv) => ({ id: conv._id.toString(), title: conv.title }))
 			.toArray(),
+		settings: {
+			shareConversationsWithModelAuthors: settings?.shareConversationsWithModelAuthors ?? true,
+			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
+		},
 	};
 };

src/routes/+layout.svelte

@@ -14,10 +14,12 @@
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
 	import EthicsModal from "$lib/components/EthicsModal.svelte";
+	import SettingsModal from "$lib/components/SettingsModal.svelte";
 
 	export let data;
 
 	let isNavOpen = false;
+	let isSettingsOpen = false;
 	let errorToastTimeout: NodeJS.Timeout;
 	let currentError: string | null;
 
@@ -113,6 +115,7 @@
 			conversations={data.conversations}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
+			on:clickSettings={() => (isSettingsOpen = true)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</MobileNav>
@@ -121,12 +124,18 @@
 			conversations={data.conversations}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
+			on:clickSettings={() => (isSettingsOpen = true)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</nav>
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}
-	<EthicsModal />
+	{#if isSettingsOpen}
+		<SettingsModal on:close={() => (isSettingsOpen = false)} settings={data.settings} />
+	{/if}
+	{#if !data.settings.ethicsModalAcceptedAt}
+		<EthicsModal settings={data.settings} />
+	{/if}
 	<slot />
 </div>

src/routes/settings/+server.ts

@@ -0,0 +1,34 @@
+import { collections } from "$lib/server/database.js";
+import { subMinutes } from "date-fns";
+import { z } from "zod";
+
+export async function PATCH({ locals, request }) {
+	const json = await request.json();
+
+	const settings = z
+		.object({
+			shareConversationsWithModelAuthors: z.boolean().default(true),
+			ethicsModalAcceptedAt: z.optional(z.date({ coerce: true }).min(subMinutes(new Date(), 5))),
+		})
+		.parse(json);
+
+	await collections.settings.updateOne(
+		{
+			sessionId: locals.sessionId,
+		},
+		{
+			$set: {
+				...settings,
+				updatedAt: new Date(),
+			},
+			$setOnInsert: {
+				createdAt: new Date(),
+			},
+		},
+		{
+			upsert: true,
+		}
+	);
+
+	return new Response();
+}

svelte.config.js

@@ -1,10 +1,13 @@
 import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/kit/vite";
 import dotenv from "dotenv";
+import pkg from "./package.json" assert { type: "json" };
 
 dotenv.config({ path: "./.env.local" });
 dotenv.config({ path: "./.env" });
 
+process.env.PUBLIC_VERSION = pkg.version.replace(/\.0\b/g, "");
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors