Assistants feature

.env

@@ -109,4 +109,6 @@ LLM_SUMMERIZATION=true
 # PUBLIC_APP_COLOR=yellow
 # PUBLIC_APP_DESCRIPTION="Making the community's best AI chat models available to everyone."
 # PUBLIC_APP_DATA_SHARING=1
-# PUBLIC_APP_DISCLAIMER=1
+# PUBLIC_APP_DISCLAIMER=1
+
+DISABLE_ASSISTANTS=false # set to true to disable assistants feature

src/lib/components/DisclaimerModal.svelte

@@ -37,8 +37,9 @@
 					class:text-gray-800={$page.data.loginEnabled}
 					class:hover:bg-slate-100={$page.data.loginEnabled}
 					on:click={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
 						if (!cookiesAreEnabled()) {
-							e.preventDefault();
 							window.open(window.location.href, "_blank");
 						}
 

src/lib/components/NavConversationItem.svelte

@@ -7,15 +7,18 @@
 	import CarbonTrashCan from "~icons/carbon/trash-can";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonEdit from "~icons/carbon/edit";
+	import { useSettingsStore } from "$lib/stores/settings";
 
-	export let conv: { id: string; title: string };
+	export let conv: { id: string; title: string; avatarId?: string };
 
 	let confirmDelete = false;
 
 	const dispatch = createEventDispatcher<{
 		deleteConversation: string;
 		editConversationTitle: { id: string; title: string };
 	}>();
+
+	const settings = useSettingsStore();
 </script>
 
 <a
@@ -33,7 +36,16 @@
 		{#if confirmDelete}
 			<span class="font-semibold"> Delete </span>
 		{/if}
-		{conv.title}
+		{#if conv.avatarId && !$settings.hideEmojiOnSidebar}
+			<img
+				src="{base}/settings/assistants/{conv.avatarId}/avatar"
+				alt="Assistant avatar"
+				class="mr-1 inline h-4 w-4 rounded-full"
+			/>
+			{conv.title.replace(/\p{Emoji}/gu, "")}
+		{:else}
+			{conv.title}
+		{/if}
 	</div>
 
 	{#if confirmDelete}

src/lib/components/NavMenu.svelte

@@ -12,6 +12,7 @@
 		id: string;
 		title: string;
 		updatedAt: Date;
+		avatarId?: string;
 	}
 
 	export let conversations: Array<Conv> = [];

src/lib/components/chat/AssistantIntroduction.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import IconGear from "~icons/bi/gear-fill";
+	import { base } from "$app/paths";
+	import type { Assistant } from "$lib/types/Assistant";
+
+	export let assistant: Pick<
+		Assistant,
+		"avatar" | "name" | "modelId" | "createdByName" | "exampleInputs" | "_id" | "description"
+	>;
+
+	const dispatch = createEventDispatcher<{ message: string }>();
+</script>
+
+<div class="flex h-full w-full flex-col content-center items-center justify-center">
+	<div
+		class="relative mt-auto rounded-xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300"
+	>
+		<div class="flex items-center gap-4 p-8 pr-10 pt-10">
+			{#if assistant.avatar}
+				<img
+					src={`${base}/settings/assistants/${assistant._id.toString()}/avatar`}
+					alt="avatar"
+					class="mr-4 h-32 w-32 rounded-full object-cover"
+				/>
+			{:else}
+				<div
+					class="mr-4 flex h-32 w-32 items-center justify-center rounded-full bg-gray-300 object-cover text-4xl font-bold text-gray-500"
+				>
+					{assistant?.name[0].toLocaleUpperCase()}
+				</div>
+			{/if}
+
+			<div class="flex flex-col">
+				<p
+					class="mb-4 w-fit rounded-full bg-gray-200 px-4 py-2 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+				>
+					{assistant.modelId}
+				</p>
+				<p class="text-2xl font-bold">{assistant.name}</p>
+				<p class="text-sm text-gray-500 dark:text-gray-400">
+					{assistant.description}
+				</p>
+
+				<p class="pt-2 text-sm text-gray-400 dark:text-gray-500">
+					Created by <a
+						class="hover:underline"
+						href="https://hf.co/{assistant.createdByName}"
+						target="_blank"
+					>
+						{assistant.createdByName}
+					</a>
+				</p>
+			</div>
+		</div>
+		<a
+			href="{base}/settings/assistants/{assistant._id.toString()}"
+			class="absolute right-3 top-3
+            inline text-gray-400 hover:text-gray-600
+            dark:text-gray-500 dark:hover:text-gray-400
+            "
+		>
+			<IconGear class="h-5 w-5" />
+		</a>
+	</div>
+	{#if assistant.exampleInputs}
+		<div class="mx-auto mt-auto w-full gap-8">
+			<div class="lg:col-span-2 lg:mt-6">
+				<div class="grid gap-3 lg:grid-cols-2 lg:gap-5">
+					{#each assistant.exampleInputs as example}
+						<button
+							type="button"
+							class="rounded-xl border bg-gray-50 p-2.5 text-left 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)}
+						>
+							{example}
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/components/chat/ChatMessages.svelte

@@ -10,12 +10,17 @@
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import { browser } from "$app/environment";
 	import SystemPromptModal from "../SystemPromptModal.svelte";
+	import type { Assistant } from "$lib/types/Assistant";
+	import AssistantIntroduction from "./AssistantIntroduction.svelte";
+	import { page } from "$app/stores";
+	import { base } from "$app/paths";
 
 	export let messages: Message[];
 	export let loading: boolean;
 	export let pending: boolean;
 	export let isAuthor: boolean;
 	export let currentModel: Model;
+	export let assistant: Assistant | undefined;
 	export let models: Model[];
 	export let preprompt: string | undefined;
 	export let readOnly: boolean;
@@ -42,7 +47,28 @@
 >
 	<div class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
 		{#each messages as message, i}
-			{#if i === 0 && preprompt && preprompt != currentModel.preprompt}
+			{#if i === 0 && $page.data?.assistant}
+				<a
+					class="text-md mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 py-1 pl-1 pr-3 font-semibold text-gray-800 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+					href="{base}/settings/assistants/{$page.data.assistant._id}"
+				>
+					{#if $page.data?.assistant.avatar}
+						<img
+							src="{base}/settings/assistants/{$page.data?.assistant._id.toString()}/avatar"
+							alt="Avatar"
+							class="h-6 w-6 rounded-full object-cover"
+						/>
+					{:else}
+						<div
+							class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 font-bold text-gray-500"
+						>
+							{$page.data?.assistant.name[0].toLocaleUpperCase()}
+						</div>
+					{/if}
+
+					{$page.data.assistant.name}
+				</a>
+			{:else if i === 0 && preprompt && preprompt != currentModel.preprompt}
 				<SystemPromptModal preprompt={preprompt ?? ""} />
 			{/if}
 			<ChatMessage
@@ -56,7 +82,11 @@
 				on:vote
 			/>
 		{:else}
-			<ChatIntroduction {models} {currentModel} on:message />
+			{#if !assistant}
+				<ChatIntroduction {models} {currentModel} on:message />
+			{:else}
+				<AssistantIntroduction {assistant} on:message />
+			{/if}
 		{/each}
 		{#if pending}
 			<ChatMessage

src/lib/components/chat/ChatWindow.svelte

@@ -17,19 +17,19 @@
 	import LoginModal from "../LoginModal.svelte";
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import { page } from "$app/stores";
-	import DisclaimerModal from "../DisclaimerModal.svelte";
 	import FileDropzone from "./FileDropzone.svelte";
 	import RetryBtn from "../RetryBtn.svelte";
 	import UploadBtn from "../UploadBtn.svelte";
 	import file2base64 from "$lib/utils/file2base64";
-	import { useSettingsStore } from "$lib/stores/settings";
+	import type { Assistant } from "$lib/types/Assistant";
 
 	export let messages: Message[] = [];
 	export let loading = false;
 	export let pending = false;
 	export let shared = false;
 	export let currentModel: Model;
 	export let models: Model[];
+	export let assistant: Assistant | undefined = undefined;
 	export let webSearchMessages: WebSearchUpdate[] = [];
 	export let preprompt: string | undefined = undefined;
 	export let files: File[] = [];
@@ -71,14 +71,10 @@
 	$: lastIsError = messages[messages.length - 1]?.from === "user" && !loading;
 
 	$: sources = files.map((file) => file2base64(file));
-
-	const settings = useSettingsStore();
 </script>
 
 <div class="relative min-h-0 min-w-0">
-	{#if !$settings.ethicsModalAccepted}
-		<DisclaimerModal />
-	{:else if loginModalOpen}
+	{#if loginModalOpen}
 		<LoginModal
 			on:close={() => {
 				loginModalOpen = false;
@@ -90,6 +86,7 @@
 		{pending}
 		{currentModel}
 		{models}
+		{assistant}
 		{messages}
 		readOnly={isReadOnly}
 		isAuthor={!shared}

src/lib/server/database.ts

@@ -7,6 +7,8 @@ import type { Settings } from "$lib/types/Settings";
 import type { User } from "$lib/types/User";
 import type { MessageEvent } from "$lib/types/MessageEvent";
 import type { Session } from "$lib/types/Session";
+import type { Assistant } from "$lib/types/Assistant";
+import type { Report } from "$lib/types/Report";
 
 if (!MONGODB_URL) {
 	throw new Error(
@@ -23,6 +25,8 @@ export const connectPromise = client.connect().catch(console.error);
 const db = client.db(MONGODB_DB_NAME + (import.meta.env.MODE === "test" ? "-test" : ""));
 
 const conversations = db.collection<Conversation>("conversations");
+const assistants = db.collection<Assistant>("assistants");
+const reports = db.collection<Report>("reports");
 const sharedConversations = db.collection<SharedConversation>("sharedConversations");
 const abortedGenerations = db.collection<AbortedGeneration>("abortedGenerations");
 const settings = db.collection<Settings>("settings");
@@ -34,6 +38,8 @@ const bucket = new GridFSBucket(db, { bucketName: "files" });
 export { client, db };
 export const collections = {
 	conversations,
+	assistants,
+	reports,
 	sharedConversations,
 	abortedGenerations,
 	settings,
@@ -66,4 +72,6 @@ client.on("open", () => {
 	messageEvents.createIndex({ createdAt: 1 }, { expireAfterSeconds: 60 }).catch(console.error);
 	sessions.createIndex({ expiresAt: 1 }, { expireAfterSeconds: 0 }).catch(console.error);
 	sessions.createIndex({ sessionId: 1 }, { unique: true }).catch(console.error);
+	assistants.createIndex({ createdBy: 1 }).catch(console.error);
+	reports.createIndex({ assistantId: 1 }).catch(console.error);
 });

src/lib/stores/settings.ts

@@ -1,5 +1,8 @@
 import { browser } from "$app/environment";
+import { invalidate } from "$app/navigation";
 import { base } from "$app/paths";
+import { UrlDependency } from "$lib/types/UrlDependency";
+import type { ObjectId } from "mongodb";
 import { getContext, setContext } from "svelte";
 import { type Writable, writable, get } from "svelte/store";
 
@@ -11,7 +14,9 @@ type SettingsStore = {
 	activeModel: string;
 	customPrompts: Record<string, string>;
 	recentlySaved: boolean;
+	assistants: Array<ObjectId | string>;
 };
+
 export function useSettingsStore() {
 	return getContext<Writable<SettingsStore>>("settings");
 }
@@ -42,6 +47,7 @@ export function createSettingsStore(initialValue: Omit<SettingsStore, "recentlyS
 					}),
 				});
 
+				invalidate(UrlDependency.ConversationList);
 				// set savedRecently to true for 3s
 				baseStore.update((s) => ({
 					...s,

src/lib/types/Assistant.ts

@@ -0,0 +1,15 @@
+import type { ObjectId } from "mongodb";
+import type { User } from "./User";
+import type { Timestamps } from "./Timestamps";
+
+export interface Assistant extends Timestamps {
+	_id: ObjectId;
+	createdById: User["_id"] | string; // user id or session
+	createdByName?: User["username"];
+	avatar?: boolean;
+	name: string;
+	description?: string;
+	modelId: string;
+	exampleInputs: string[];
+	preprompt: string;
+}

src/lib/types/Conversation.ts

@@ -2,6 +2,7 @@ import type { ObjectId } from "mongodb";
 import type { Message } from "./Message";
 import type { Timestamps } from "./Timestamps";
 import type { User } from "./User";
+import type { Assistant } from "./Assistant";
 
 export interface Conversation extends Timestamps {
 	_id: ObjectId;
@@ -19,4 +20,5 @@ export interface Conversation extends Timestamps {
 	};
 
 	preprompt?: string;
+	assistantId?: Assistant["_id"];
 }

src/lib/types/Report.ts

@@ -0,0 +1,10 @@
+import type { ObjectId } from "mongodb";
+import type { User } from "./User";
+import type { Assistant } from "./Assistant";
+import type { Timestamps } from "./Timestamps";
+
+export interface Report extends Timestamps {
+	_id: ObjectId;
+	createdBy: User["_id"] | string;
+	assistantId: Assistant["_id"];
+}

src/lib/types/Settings.ts

@@ -1,4 +1,5 @@
 import { defaultModel } from "$lib/server/models";
+import type { Assistant } from "./Assistant";
 import type { Timestamps } from "./Timestamps";
 import type { User } from "./User";
 
@@ -18,11 +19,15 @@ export interface Settings extends Timestamps {
 
 	// model name and system prompts
 	customPrompts?: Record<string, string>;
+
+	assistants?: Assistant["_id"][];
 }
 
 // TODO: move this to a constant file along with other constants
 export const DEFAULT_SETTINGS = {
 	shareConversationsWithModelAuthors: true,
 	activeModel: defaultModel.id,
 	hideEmojiOnSidebar: false,
+	customPrompts: {},
+	assistants: [],
 };

src/lib/types/SharedConversation.ts

@@ -10,4 +10,5 @@ export interface SharedConversation extends Timestamps {
 	title: string;
 	messages: Message[];
 	preprompt?: string;
+	assistantId?: string;
 }