Assistants: UI tweaks for release (#764)

* increase settings visibility

* hideemojis = hide assistants avatars

* mobile

* text balance

* Revert "hideemojis = hide assistants avatars"

This reverts commit 6ec0d689cb2f446590cf2b137e9c3d0482a16a81.

* always show assistant avatar

* mobile scroll to assistants

* rm comment

* full width start message

* /assistants thumbnail

* model selector

* width

* font-size

* lint

* min width on desktop too

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

src/lib/components/AssistantSettings.svelte

@@ -211,7 +211,7 @@
 			</label>
 
 			<label>
-				<span class="mb-1 text-sm font-semibold">Start messages</span>
+				<span class="mb-1 text-sm font-semibold">User start messages</span>
 				<div class="flex flex-col gap-2 md:max-h-32">
 					<input
 						name="exampleInput1"

src/lib/components/NavConversationItem.svelte

@@ -37,7 +37,7 @@
 		{#if confirmDelete}
 			<span class="mr-1 font-semibold"> Delete </span>
 		{/if}
-		{#if conv.avatarHash && !$settings.hideEmojiOnSidebar}
+		{#if conv.avatarHash}
 			<img
 				src="{base}/settings/assistants/{conv.assistantId}/avatar?hash={conv.avatarHash}"
 				alt="Assistant avatar"

src/lib/components/chat/AssistantIntroduction.svelte

@@ -16,7 +16,9 @@
 	<div
 		class="relative mt-auto rounded-2xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800/60 dark:text-gray-300"
 	>
-		<div class="flex items-center gap-4 p-4 pr-10 md:p-8 md:pt-10 xl:gap-8">
+		<div
+			class="flex min-w-[80dvw] items-center gap-4 p-4 pr-1 sm:min-w-[440px] md:p-8 md:pt-10 xl:gap-8"
+		>
 			{#if assistant.avatar}
 				<img
 					src={`${base}/settings/assistants/${assistant._id.toString()}/avatar?hash=${
@@ -33,14 +35,11 @@
 				</div>
 			{/if}
 
-			<div class="flex h-full flex-col gap-2">
-				<p
-					class="w-fit truncate text-ellipsis rounded-full border bg-white px-3 py-1 text-xs text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-400"
-				>
-					Assistant
-				</p>
+			<div class="flex h-full flex-col gap-2 text-balance">
+				<p class="-mb-1">Assistant</p>
+
 				<p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
-				<p class="line-clamp-6 text-balance text-sm text-gray-500 dark:text-gray-400">
+				<p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
 					{assistant.description}
 				</p>
 
@@ -60,15 +59,19 @@
 		<div class="absolute right-3 top-3 md:right-4 md:top-4">
 			<a
 				href="{base}/settings/assistants/{assistant._id.toString()}"
-				class="flex size-7 items-center justify-center rounded-full border bg-gray-200 p-1 text-xs hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-				><IconGear /></a
+				class="flex items-center gap-1.5 rounded-full border bg-white py-1 pl-3 pr-2.5 text-xs text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
+				><IconGear class="text-xxs" />Settings</a
 			>
 		</div>
 	</div>
 	{#if assistant.exampleInputs}
 		<div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
 			<div class="md:col-span-2 md:mt-6">
-				<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+				<div
+					class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
+						? 'md:grid-cols-2'
+						: ''}"
+				>
 					{#each assistant.exampleInputs as example}
 						<button
 							type="button"

src/lib/components/chat/ChatWindow.svelte

@@ -7,6 +7,7 @@
 	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import CarbonCaretDown from "~icons/carbon/caret-down";
 
 	import EosIconsLoading from "~icons/eos-icons/loading";
 
@@ -256,8 +257,10 @@
 							>{currentModel.displayName}</a
 						>{:else}
 						{@const model = models.find((m) => m.id === assistant?.modelId)}
-						<a href="{base}/settings/assistants/{assistant._id}" class="hover:underline"
-							>{model?.displayName}</a
+						<a
+							href="{base}/settings/assistants/{assistant._id}"
+							class="inline-flex items-center border-b hover:text-gray-600 dark:border-gray-700 dark:hover:text-gray-300"
+							>{model?.displayName}<CarbonCaretDown class="text-xxs" /></a
 						>{/if} <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may
 					be inaccurate or false.
 				</p>

src/routes/+layout.svelte

@@ -124,7 +124,7 @@
 
 	<!-- use those meta tags everywhere except on the share assistant page -->
 	<!-- feel free to refacto if there's a better way -->
-	{#if !$page.url.pathname.includes("/assistant/")}
+	{#if !$page.url.pathname.includes("/assistant/") && $page.route.id !== "/assistants"}
 		<meta property="og:title" content={PUBLIC_APP_NAME} />
 		<meta property="og:type" content="website" />
 		<meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" />

src/routes/assistants/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
 
+	import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
@@ -22,6 +25,24 @@
 	};
 </script>
 
+<svelte:head>
+	{#if isHuggingChat}
+		<title>HuggingChat - Assistants</title>
+		<meta property="og:title" content="HuggingChat - Assistants" />
+		<meta property="og:type" content="link" />
+		<meta
+			property="og:description"
+			content="Browse HuggingChat assistants made by the community."
+		/>
+		<meta
+			property="og:image"
+			content="{PUBLIC_ORIGIN ||
+				$page.url.origin}{base}/{PUBLIC_APP_ASSETS}/assistants-thumbnail.png"
+		/>
+		<meta property="og:url" content={$page.url.href} />
+	{/if}
+</svelte:head>
+
 <div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
 	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
 		<div class="flex items-center">
@@ -33,7 +54,7 @@
 		<h3 class="text-gray-500">Browse popular assistants made by the community</h3>
 		<div class="mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
 			<select
-				class="mt-1 rounded-lg border border-gray-300 bg-gray-50 p-2 text-xs text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+				class="mt-1 h-[34px] rounded-lg border border-gray-300 bg-gray-50 px-2 text-sm text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
 				bind:value={selectedModel}
 				on:change={onModelChange}
 			>
@@ -45,16 +66,16 @@
 
 			<a
 				href={`${base}/settings/assistants/new`}
-				class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 text-center shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
+				class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
 			>
 				<CarbonAdd />Create New assistant
 			</a>
 		</div>
-		<div class="mt-10 grid grid-cols-2 gap-4 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
+		<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}
 				<a
 					href="{base}/assistant/{assistant._id}"
-					class="flex flex-col items-center justify-center overflow-hidden 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="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.avatar}
 						<img
@@ -74,13 +95,11 @@
 					>
 						{assistant.name}
 					</h3>
-					<p
-						class="line-clamp-4 text-balance text-xxs text-gray-700 sm:line-clamp-2 sm:text-xs dark:text-gray-400"
-					>
+					<p class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400">
 						{assistant.description}
 					</p>
 					{#if assistant.createdByName}
-						<p class="mt-auto pt-2 text-xxs text-gray-400 sm:text-xs dark:text-gray-500">
+						<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}"

src/routes/settings/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import { base } from "$app/paths";
 	import { clickOutside } from "$lib/actions/clickOutside";
 	import { afterNavigate, goto } from "$app/navigation";
@@ -15,6 +16,13 @@
 	export let data;
 
 	let previousPage: string = base;
+	let assistantsSection: HTMLHeadingElement;
+
+	onMount(() => {
+		if ($page.params?.assistantId) {
+			assistantsSection.scrollIntoView();
+		}
+	});
 
 	afterNavigate(({ from }) => {
 		if (!from?.url.pathname.includes("settings")) {
@@ -71,7 +79,9 @@
 			{/each}
 			<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
 			{#if data.enableAssistants && (!isHuggingChat || data.assistants.length >= 1)}
-				<h3 class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">Assistants</h3>
+				<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
+					Assistants
+				</h3>
 
 				{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
 					<a

src/routes/settings/+page.svelte

@@ -56,7 +56,7 @@
 				target="_blank"
 				rel="noreferrer"
 				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
-				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " /> Give your feedback on HuggingChat</a
+				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
 			>
 			<button
 				on:click|preventDefault={() => (isConfirmingDeletion = true)}

src/routes/settings/assistants/[assistantId]/+page.svelte

@@ -137,16 +137,6 @@
 		</div>
 	</div>
 
-	<!-- <div>
-		<h2 class="mb-2 text-lg font-semibold">Model used</h2>
-
-		<div
-			class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
-		>
-			<input disabled class="flex-1" value="Model" />
-		</div>
-	</div> -->
-
 	<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
 
 	<textarea