Merge branch 'main' into feat/rework_prompt_examples

src/hooks.server.ts

@@ -249,6 +249,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (
 		!event.url.pathname.startsWith(`${base}/login`) &&
 		!event.url.pathname.startsWith(`${base}/admin`) &&
+		!event.url.pathname.startsWith(`${base}/settings`) &&
 		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
 	) {
 		if (

src/lib/components/DisclaimerModal.svelte

@@ -11,7 +11,7 @@
 	const settings = useSettingsStore();
 </script>
 
-<Modal>
+<Modal on:close>
 	<div
 		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center sm:px-6"
 	>
@@ -29,27 +29,29 @@
 		</p>
 
 		<div class="flex w-full flex-col items-center gap-2">
-			{#if $page.data.guestMode || !$page.data.loginEnabled}
-				<button
-					class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					class:bg-white={$page.data.loginEnabled}
-					class:text-gray-800={$page.data.loginEnabled}
-					class:hover:bg-slate-100={$page.data.loginEnabled}
-					on:click|preventDefault|stopPropagation={() => {
-						if (!cookiesAreEnabled()) {
-							window.open(window.location.href, "_blank");
-						}
+			<button
+				class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+				class:bg-white={$page.data.loginEnabled}
+				class:text-gray-800={$page.data.loginEnabled}
+				class:hover:bg-slate-100={$page.data.loginEnabled}
+				on:click|preventDefault|stopPropagation={() => {
+					if (!cookiesAreEnabled()) {
+						window.open(window.location.href, "_blank");
+					}
 
-						$settings.ethicsModalAccepted = true;
-					}}
-				>
-					{#if $page.data.loginEnabled}
-						Try as guest
+					$settings.ethicsModalAccepted = true;
+				}}
+			>
+				{#if $page.data.loginEnabled}
+					{#if $page.data.guestMode}
+						Continue as guest
 					{:else}
-						Start chatting
+						Explore the app
 					{/if}
-				</button>
-			{/if}
+				{:else}
+					Start chatting
+				{/if}
+			</button>
 			{#if $page.data.loginEnabled}
 				<form action="{base}/login" target="_parent" method="POST" class="w-full">
 					<button

src/lib/components/MobileNav.svelte

@@ -10,7 +10,7 @@
 	import IconNew from "$lib/components/icons/IconNew.svelte";
 
 	export let isOpen = false;
-	export let title: string | undefined;
+	export let title: Promise<string | undefined> | string;
 
 	$: title = title ?? "New Chat";
 
@@ -40,7 +40,11 @@
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
-	<span class="truncate px-4">{title}</span>
+	{#await title}
+		<div class="flex h-full items-center justify-center" />
+	{:then title}
+		<span class="truncate px-4">{title ?? ""}</span>
+	{/await}
 	<a
 		class:invisible={!$page.params.id}
 		href="{base}/"

src/lib/components/NavConversationItem.svelte

@@ -34,9 +34,9 @@
 		{#if confirmDelete}
 			<span class="mr-1 font-semibold"> Delete </span>
 		{/if}
-		{#if conv.avatarHash}
+		{#if conv.avatarUrl}
 			<img
-				src="{base}/settings/assistants/{conv.assistantId}/avatar.jpg?hash={conv.avatarHash}"
+				src="{base}{conv.avatarUrl}"
 				alt="Assistant avatar"
 				class="mr-1.5 inline size-4 flex-none rounded-full object-cover"
 			/>

src/lib/components/NavMenu.svelte

@@ -11,7 +11,8 @@
 	import type { Model } from "$lib/types/Model";
 	import { page } from "$app/stores";
 
-	export let conversations: ConvSidebar[] = [];
+	import { fade } from "svelte/transition";
+	export let conversations: Promise<ConvSidebar[]>;
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
 
@@ -25,16 +26,16 @@
 		new Date().setMonth(new Date().getMonth() - 1),
 	];
 
-	$: groupedConversations = {
-		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
-		week: conversations.filter(
+	$: groupedConversations = conversations.then((convs) => ({
+		today: convs.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
+		week: convs.filter(
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
 		),
-		month: conversations.filter(
+		month: convs.filter(
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
 		),
-		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
-	};
+		older: convs.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
+	}));
 
 	const titles: { [key: string]: string } = {
 		today: "Today",
@@ -65,16 +66,31 @@
 <div
 	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 >
-	{#each Object.entries(groupedConversations) as [group, convs]}
-		{#if convs.length}
-			<h4 class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500">
-				{titles[group]}
-			</h4>
-			{#each convs as conv}
-				<NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
-			{/each}
+	{#await groupedConversations}
+		{#if $page.data.nConversations > 0}
+			<div class="overflow-y-hidden">
+				<div class="flex animate-pulse flex-col gap-4">
+					<div class="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+					{#each Array(100) as _}
+						<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
+					{/each}
+				</div>
+			</div>
 		{/if}
-	{/each}
+	{:then groupedConversations}
+		<div transition:fade class="flex flex-col gap-1">
+			{#each Object.entries(groupedConversations) as [group, convs]}
+				{#if convs.length}
+					<h4 class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500">
+						{titles[group]}
+					</h4>
+					{#each convs as conv}
+						<NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
+					{/each}
+				{/if}
+			{/each}
+		</div>
+	{/await}
 </div>
 <div
 	class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"

src/lib/components/chat/ChatMessage.svelte

@@ -37,6 +37,29 @@
 	import DOMPurify from "isomorphic-dompurify";
 	import { enhance } from "$app/forms";
 	import { browser } from "$app/environment";
+	import type { WebSearchSource } from "$lib/types/WebSearch";
+
+	function addInlineCitations(md: string, webSearchSources: WebSearchSource[] = []): string {
+		const linkStyle =
+			"color: rgb(59, 130, 246); text-decoration: none; hover:text-decoration: underline;";
+
+		return md.replace(/\[(\d+)\]/g, (match: string) => {
+			const indices: number[] = (match.match(/\d+/g) || []).map(Number);
+			const links: string = indices
+				.map((index: number) => {
+					if (index === 0) return " ";
+					const source = webSearchSources[index - 1];
+					if (source) {
+						return `<a href="${source.link}" target="_blank" rel="noreferrer" style="${linkStyle}">${index}</a>`;
+					}
+					return "";
+				})
+				.filter(Boolean)
+				.join(", ");
+
+			return links ? ` <sup>${links}</sup>` : match;
+		});
+	}
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -114,7 +137,7 @@
 		})
 	);
 
-	$: tokens = marked.lexer(sanitizeMd(message.content ?? ""));
+	$: tokens = marked.lexer(addInlineCitations(sanitizeMd(message.content), webSearchSources));
 
 	$: emptyLoad =
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));

src/lib/components/chat/ChatWindow.svelte

@@ -93,7 +93,7 @@
 	const onPaste = (e: ClipboardEvent) => {
 		const textContent = e.clipboardData?.getData("text");
 
-		if (!$settings.directPaste && textContent && textContent.length > 1000) {
+		if (!$settings.directPaste && textContent && textContent.length >= 3984) {
 			e.preventDefault();
 			pastedLongContent = true;
 			setTimeout(() => {

src/lib/server/endpoints/preprocessMessages.ts

@@ -17,7 +17,7 @@ export async function preprocessMessages(
 
 function addWebSearchContext(messages: Message[], webSearch: Message["webSearch"]) {
 	const webSearchContext = webSearch?.contextSources
-		.map(({ context }) => context.trim())
+		.map(({ context }, idx) => `Source [${idx + 1}]\n${context.trim()}`)
 		.join("\n\n----------\n\n");
 
 	// No web search context available, skip
@@ -35,7 +35,8 @@ function addWebSearchContext(messages: Message[], webSearch: Message["webSearch"
 	const finalMessage = {
 		...messages[messages.length - 1],
 		content: `I searched the web using the query: ${webSearch.searchQuery}.
-Today is ${currentDate} and here are the results:
+Today is ${currentDate} and here are the results.
+When answering the question, you must reference the sources you used inline by wrapping the index in brackets like this: [1]. If multiple sources are used, you must reference each one of them without commas like this: [1][2][3].
 =====================
 ${webSearchContext}
 =====================

src/lib/server/models.ts

@@ -337,40 +337,25 @@ const addEndpoint = (m: Awaited<ReturnType<typeof processModel>>) => ({
 	},
 });
 
-const hasInferenceAPI = async (m: Awaited<ReturnType<typeof processModel>>) => {
-	if (!isHuggingChat) {
-		return false;
-	}
-
-	let r: Response;
-	try {
-		r = await fetch(`https://huggingface.co/api/models/${m.id}`);
-	} catch (e) {
-		console.log(e);
-		return false;
-	}
-
-	if (!r.ok) {
-		logger.warn(`Failed to check if ${m.id} has inference API: ${r.statusText}`);
-		return false;
-	}
-
-	const json = await r.json();
-
-	if (json.cardData.inference === false) {
-		return false;
-	}
-
-	return true;
-};
+const inferenceApiIds = isHuggingChat
+	? await fetch(
+			"https://huggingface.co/api/models?pipeline_tag=text-generation&inference=warm&filter=conversational"
+	  )
+			.then((r) => r.json())
+			.then((json) => json.map((r: { id: string }) => r.id))
+			.catch((err) => {
+				logger.error(err, "Failed to fetch inference API ids");
+				return [];
+			})
+	: [];
 
 export const models = await Promise.all(
 	modelsRaw.map((e) =>
 		processModel(e)
 			.then(addEndpoint)
 			.then(async (m) => ({
 				...m,
-				hasInferenceAPI: await hasInferenceAPI(m),
+				hasInferenceAPI: inferenceApiIds.includes(m.id ?? m.name),
 			}))
 	)
 );

src/lib/server/tools/web/search.ts

@@ -25,12 +25,19 @@ const websearch: ConfigTool = {
 	showOutput: false,
 	async *call({ query }, { conv, assistant, messages }) {
 		const webSearchToolResults = yield* runWebSearch(conv, messages, assistant?.rag, String(query));
-		const chunks = webSearchToolResults?.contextSources
-			.map(({ context }) => context)
-			.join("\n------------\n");
+
+		const webSearchContext = webSearchToolResults?.contextSources
+			.map(({ context }, idx) => `Source [${idx + 1}]\n${context.trim()}`)
+			.join("\n\n----------\n\n");
 
 		return {
-			outputs: [{ websearch: chunks }],
+			outputs: [
+				{
+					websearch:
+						webSearchContext +
+						"\n\nWhen answering the question, you must reference the sources you used inline by wrapping the index in brackets like this: [1]. If multiple sources are used, you must reference each one of them without commas like this: [1][2][3].",
+				},
+			],
 			display: false,
 		};
 	},

src/lib/types/ConvSidebar.ts

@@ -4,5 +4,5 @@ export interface ConvSidebar {
 	updatedAt: Date;
 	model?: string;
 	assistantId?: string;
-	avatarHash?: string;
+	avatarUrl?: string;
 }