Merge branch 'main' into front/setting_page_theme

Author: KartikGS

.env

@@ -133,4 +133,6 @@ EXPOSE_API=true
 
 ENABLE_ASSISTANTS=false #set to true to enable assistants feature
 
-ALTERNATIVE_REDIRECT_URLS=`[]` #valide alternative redirect URL for OAuth
+ALTERNATIVE_REDIRECT_URLS=`[]` #valide alternative redirect URL for OAuth
+
+WEBHOOK_URL_REPORT_ASSISTANT=#provide webhook url to get notified when an assistant gets reported

.github/workflows/deploy-release.yml

@@ -25,6 +25,7 @@ jobs:
           OPENID_CONFIG: ${{ secrets.OPENID_CONFIG }}
           MONGODB_URL: ${{ secrets.MONGODB_URL }}
           HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
+          WEBHOOK_URL_REPORT_ASSISTANT: ${{ secrets.WEBHOOK_URL_REPORT_ASSISTANT }}
         run: npm run updateProdEnv
   sync-to-hub:
     runs-on: ubuntu-latest

README.md

@@ -226,7 +226,7 @@ The following is the default `chatPromptTemplate`, although newlines and indenti
 
 #### Multi modal model
 
-We currently only support IDEFICS as a multimodal model, hosted on TGI. You can enable it by using the followin config (if you have a PRO HF Api token):
+We currently only support IDEFICS as a multimodal model, hosted on TGI. You can enable it by using the following config (if you have a PRO HF Api token):
 
 ```env
     {

scripts/updateProdEnv.ts

@@ -6,6 +6,7 @@ const SERPER_API_KEY = process.env.SERPER_API_KEY;
 const OPENID_CONFIG = process.env.OPENID_CONFIG;
 const MONGODB_URL = process.env.MONGODB_URL;
 const HF_TOKEN = process.env.HF_TOKEN ?? process.env.HF_ACCESS_TOKEN; // token used for API requests in prod
+const WEBHOOK_URL_REPORT_ASSISTANT = process.env.WEBHOOK_URL_REPORT_ASSISTANT; // slack webhook url used to get "report assistant" events
 
 // Read the content of the file .env.template
 const PUBLIC_CONFIG = fs.readFileSync(".env.template", "utf8");
@@ -16,6 +17,7 @@ MONGODB_URL=${MONGODB_URL}
 OPENID_CONFIG=${OPENID_CONFIG}
 SERPER_API_KEY=${SERPER_API_KEY}
 HF_TOKEN=${HF_TOKEN}
+WEBHOOK_URL_REPORT_ASSISTANT=${WEBHOOK_URL_REPORT_ASSISTANT}
 `;
 
 // Make an HTTP POST request to add the space secrets

src/lib/components/Pagination.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
+	import { getHref } from "$lib/utils/getHref";
 	import PaginationArrow from "./PaginationArrow.svelte";
 
 	export let classNames = "";
@@ -12,12 +13,6 @@
 	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
 	$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
 
-	function getHref(url: URL | string, pageIdx: number) {
-		const newUrl = new URL(url);
-		newUrl.searchParams.set("p", pageIdx.toString());
-		return newUrl.toString();
-	}
-
 	function getPageIndexes(pageIdx: number, nTotalPages: number) {
 		let pageIdxs: number[] = [];
 
@@ -66,7 +61,7 @@
 		>
 			<li>
 				<PaginationArrow
-					href={getHref($page.url, pageIndex - 1)}
+					href={getHref($page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
 					direction="previous"
 					isDisabled={pageIndex - 1 < 0}
 				/>
@@ -81,15 +76,15 @@
 							: ''}
 						"
 						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
-						href={getHref($page.url, pageIdx)}
+						href={getHref($page.url, { newKeys: { p: pageIdx.toString() } })}
 					>
 						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
 					</a>
 				</li>
 			{/each}
 			<li>
 				<PaginationArrow
-					href={getHref($page.url, pageIndex + 1)}
+					href={getHref($page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
 					direction="next"
 					isDisabled={pageIndex + 1 >= numTotalPages}
 				/>

src/lib/components/SystemPromptModal.svelte

@@ -12,7 +12,7 @@
 	type="button"
 	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
 	on:click={() => (isOpen = !isOpen)}
-	on:keypress={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+	on:keydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
 >
 	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
 </button>

src/lib/components/WebSearchToggle.svelte

@@ -9,13 +9,13 @@
 <div
 	class="flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
 	on:click={toggle}
-	on:keypress={toggle}
+	on:keydown={toggle}
 	aria-checked={$webSearchParameters.useSearch}
 	aria-label="web search toggle"
 	role="switch"
 	tabindex="0"
 >
-	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
+	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keydown />
 	<div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Search web</div>
 	<div class="group relative w-max">
 		<CarbonInformation class="text-xs text-gray-500" />

src/lib/components/chat/AssistantIntroduction.svelte

@@ -47,8 +47,7 @@
 					<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"
+							href="{base}/assistants?user={assistant.createdByName}"
 						>
 							{assistant.createdByName}
 						</a>

src/lib/components/chat/ChatInput.svelte

@@ -22,6 +22,12 @@
 		// submit on enter
 		if (event.key === "Enter" && !event.shiftKey && !isCompositionOn) {
 			event.preventDefault();
+			// blur to close keyboard on mobile
+			textareaElement.blur();
+			// refocus so that user on desktop can start typing without needing to reclick on textarea
+			if (innerWidth > TABLET_VIEWPORT_WIDTH) {
+				textareaElement.focus();
+			}
 			dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
 		}
 	}
@@ -53,7 +59,7 @@
 		on:keydown={handleKeydown}
 		on:compositionstart={() => (isCompositionOn = true)}
 		on:compositionend={() => (isCompositionOn = false)}
-		on:keypress
+		on:beforeinput
 		{placeholder}
 	/>
 </div>

src/lib/components/chat/ChatMessage.svelte

@@ -138,7 +138,7 @@
 		class="group relative -mb-8 flex items-start justify-start gap-4 pb-8 leading-relaxed"
 		role="presentation"
 		on:click={() => (isTapped = !isTapped)}
-		on:keypress={() => (isTapped = !isTapped)}
+		on:keydown={() => (isTapped = !isTapped)}
 	>
 		{#if $page.data?.assistant?.avatar}
 			<img

src/lib/components/chat/ChatWindow.svelte

@@ -212,7 +212,7 @@
 								placeholder="Ask anything"
 								bind:value={message}
 								on:submit={handleSubmit}
-								on:keypress={(ev) => {
+								on:beforeinput={(ev) => {
 									if ($page.data.loginRequired) {
 										ev.preventDefault();
 										loginModalOpen = true;

src/lib/utils/getHref.ts

@@ -0,0 +1,41 @@
+export function getHref(
+	url: URL | string,
+	modifications: {
+		newKeys?: Record<string, string | undefined | null>;
+		existingKeys?: { behaviour: "delete_except" | "delete"; keys: string[] };
+	}
+) {
+	const newUrl = new URL(url);
+	const { newKeys, existingKeys } = modifications;
+
+	// exsiting keys logic
+	if (existingKeys) {
+		const { behaviour, keys } = existingKeys;
+		if (behaviour === "delete") {
+			for (const key of keys) {
+				newUrl.searchParams.delete(key);
+			}
+		} else {
+			// delete_except
+			const keysToPreserve = keys;
+			for (const key of [...newUrl.searchParams.keys()]) {
+				if (!keysToPreserve.includes(key)) {
+					newUrl.searchParams.delete(key);
+				}
+			}
+		}
+	}
+
+	// new keys logic
+	if (newKeys) {
+		for (const [key, val] of Object.entries(newKeys)) {
+			if (val) {
+				newUrl.searchParams.set(key, val);
+			} else {
+				newUrl.searchParams.delete(key);
+			}
+		}
+	}
+
+	return newUrl.toString();
+}

src/routes/assistant/[assistantId]/+page.svelte

@@ -73,8 +73,7 @@
 			<p class="mt-2 text-sm text-gray-500">
 				Created by <a
 					class="hover:underline"
-					href="https://hf.co/{data.assistant.createdByName}"
-					target="_blank"
+					href="{base}/assistants?user={data.assistant.createdByName}"
 				>
 					{data.assistant.createdByName}
 				</a>

src/routes/assistants/+page.server.ts

@@ -2,24 +2,33 @@ import { base } from "$app/paths";
 import { ENABLE_ASSISTANTS } from "$env/static/private";
 import { collections } from "$lib/server/database.js";
 import type { Assistant } from "$lib/types/Assistant";
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import type { Filter } from "mongodb";
 
 const NUM_PER_PAGE = 24;
 
-export const load = async ({ url }) => {
+export const load = async ({ url, locals }) => {
 	if (!ENABLE_ASSISTANTS) {
 		throw redirect(302, `${base}/`);
 	}
 
 	const modelId = url.searchParams.get("modelId");
 	const pageIndex = parseInt(url.searchParams.get("p") ?? "0");
+	const createdByName = url.searchParams.get("user");
+	const createdByCurrentUser = locals.user?.username && locals.user.username === createdByName;
+
+	if (createdByName) {
+		const existingUser = await collections.users.findOne({ username: createdByName });
+		if (!existingUser) {
+			throw error(404, `User "${createdByName}" doesn't exist`);
+		}
+	}
 
 	// fetch the top assistants sorted by user count from biggest to smallest, filter out all assistants with only 1 users. filter by model too if modelId is provided
 	const filter: Filter<Assistant> = {
-		userCount: { $gt: 1 },
 		modelId: modelId ?? { $exists: true },
-		featured: true,
+		...(!createdByCurrentUser && { userCount: { $gt: 1 } }),
+		...(createdByName ? { createdByName } : { featured: true }),
 	};
 	const assistants = await collections.assistants
 		.find(filter)

src/routes/assistants/+page.svelte

@@ -10,16 +10,23 @@
 
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import CarbonEarthAmerica from "~icons/carbon/earth-americas-filled";
+	// import CarbonViewOff from "~icons/carbon/view-off-filled";
 	import Pagination from "$lib/components/Pagination.svelte";
+	import { getHref } from "$lib/utils/getHref";
 
 	export let data: PageData;
 
+	$: assistantsCreator = $page.url.searchParams.get("user");
+	$: createdByMe = data.user?.username && data.user.username === assistantsCreator;
+
 	const onModelChange = (e: Event) => {
-		const newUrl = new URL($page.url);
-		newUrl.search = ""; // clear searchParams (such as "p" for pagination)
-		if ((e.target as HTMLSelectElement).value) {
-			newUrl.searchParams.set("modelId", (e.target as HTMLSelectElement).value);
-		}
+		const newUrl = getHref($page.url, {
+			newKeys: { modelId: (e.target as HTMLSelectElement).value },
+			existingKeys: { behaviour: "delete_except", keys: ["user"] },
+		});
 		goto(newUrl);
 	};
 </script>
@@ -79,12 +86,71 @@
 				<CarbonAdd />Create New assistant
 			</a>
 		</div>
-		<div class="mt-10 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
-			{#each data.assistants as assistant}
+
+		<div class="mt-7 flex items-center gap-x-2 text-sm">
+			{#if assistantsCreator && !createdByMe}
+				<div
+					class="flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-50 px-3 py-1 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+				>
+					{assistantsCreator}'s Assistants
+					<a
+						href={getHref($page.url, {
+							existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+						})}
+						class="group"
+						><CarbonClose
+							class="text-xs group-hover:text-gray-800 dark:group-hover:text-gray-300"
+						/></a
+					>
+				</div>
+				{#if isHuggingChat}
+					<a
+						href="https://hf.co/{assistantsCreator}"
+						target="_blank"
+						class="ml-auto flex items-center text-xs text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+						><CarbonArrowUpRight class="mr-1 flex-none text-[0.58rem]" target="_blank" />View {assistantsCreator}
+						on HF</a
+					>
+				{/if}
+			{:else}
+				<a
+					href={getHref($page.url, {
+						existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p"] },
+					})}
+					class="flex items-center gap-1.5 rounded-full border px-3 py-1 {!assistantsCreator
+						? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'
+						: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
+				>
+					<CarbonEarthAmerica class="text-xs" />
+					Community
+				</a>
+				{#if data.user?.username}
+					<a
+						href={getHref($page.url, {
+							newKeys: { user: data.user.username },
+							existingKeys: { behaviour: "delete", keys: ["modelId", "p"] },
+						})}
+						class="flex items-center gap-1.5 rounded-full border px-3 py-1 {assistantsCreator &&
+						createdByMe
+							? 'border-gray-300 bg-gray-50  dark:border-gray-600 dark:bg-gray-700 dark:text-white'
+							: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
+						>{data.user.username}
+					</a>
+				{/if}
+			{/if}
+		</div>
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
+			{#each data.assistants as assistant (assistant._id)}
 				<a
 					href="{base}/assistant/{assistant._id}"
-					class="flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
+					class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
 				>
+					<!-- {#if assistant.userCount && assistant.userCount > 1}
+						<div class="absolute right-2 top-2" title="share with others to make it public">
+							<CarbonViewOff class="opacity-70" />
+						</div>
+					{/if} -->
 					{#if assistant.avatar}
 						<img
 							src="{base}/settings/assistants/{assistant._id}/avatar.jpg"
@@ -110,8 +176,7 @@
 						<p class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500">
 							Created by <a
 								class="hover:underline"
-								href="https://hf.co/{assistant.createdByName}"
-								target="_blank"
+								href="{base}/assistants?user={assistant.createdByName}"
 							>
 								{assistant.createdByName}
 							</a>