feat(assistants): better distinction between my own assistants and other people's assistants (#1437)

src/routes/settings/(nav)/+layout.svelte

@@ -75,30 +75,66 @@
 		{/each}
 		<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
 		{#if data.enableAssistants}
-			<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
+			<h3 bind:this={assistantsSection} class="pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
 				Assistants
 			</h3>
+			<!-- My Assistants -->
+			<h4 class="py-2 pl-5 text-[.7rem] text-gray-600 sm:pl-1">My Assistants</h4>
+
+			{#each data.assistants.filter((assistant) => assistant.createdByMe) as assistant}
+				<a
+					href="{base}/settings/assistants/{assistant._id.toString()}"
+					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
+					{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+				>
+					{#if assistant.avatar}
+						<img
+							src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
+							alt="Avatar"
+							class="h-6 w-6 rounded-full"
+						/>
+					{:else}
+						<div
+							class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
+						>
+							{assistant.name[0]}
+						</div>
+					{/if}
+					<div class="truncate text-gray-900">{assistant.name}</div>
+					{#if assistant._id.toString() === $settings.activeModel}
+						<div
+							class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+						>
+							Active
+						</div>
+					{/if}
+				</a>
+			{/each}
 			{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
 				<a
 					href="{base}/settings/assistants/new"
 					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
+				{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
 					<CarbonAdd />
 					<div class="truncate">Create new assistant</div>
 				</a>
 			{/if}
-			{#each data.assistants as assistant}
+
+			<!-- Other Assistants -->
+			<h4 class="pl-3 pt-3 text-[.7rem] text-gray-600 sm:pl-1">Other Assistants</h4>
+
+			{#each data.assistants.filter((assistant) => !assistant.createdByMe) as assistant}
 				<a
 					href="{base}/settings/assistants/{assistant._id.toString()}"
 					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+						{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
 					{#if assistant.avatar}
 						<img
 							src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
 							alt="Avatar"
-							class="h-6 w-6 rounded-full object-cover"
+							class="h-6 w-6 rounded-full"
 						/>
 					{:else}
 						<div
@@ -125,9 +161,10 @@
 			</a>
 		{/if}
 
+		<div class="my-2 mt-auto w-full border-b border-gray-200" />
 		<a
 			href="{base}/settings"
-			class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
+			class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
 				{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
 		>
 			<UserIcon class="text-sm" />