Spaces:
Paused
Paused
| <script lang="ts"> | |
| import { onMount } from "svelte"; | |
| import { base } from "$app/paths"; | |
| import { afterNavigate, goto } from "$app/navigation"; | |
| import { page } from "$app/stores"; | |
| import { useSettingsStore } from "$lib/stores/settings"; | |
| import CarbonClose from "~icons/carbon/close"; | |
| import CarbonArrowUpRight from "~icons/carbon/ArrowUpRight"; | |
| import CarbonAdd from "~icons/carbon/add"; | |
| import UserIcon from "~icons/carbon/user"; | |
| import type { LayoutData } from "../$types"; | |
| export let data: LayoutData; | |
| let previousPage: string = base; | |
| let assistantsSection: HTMLHeadingElement; | |
| onMount(() => { | |
| if ($page.params?.assistantId) { | |
| assistantsSection.scrollIntoView(); | |
| } | |
| }); | |
| afterNavigate(({ from }) => { | |
| if (!from?.url.pathname.includes("settings")) { | |
| previousPage = from?.url.toString() || previousPage; | |
| } | |
| }); | |
| const settings = useSettingsStore(); | |
| </script> | |
| <div | |
| class="grid h-full w-full grid-cols-1 grid-rows-[auto,1fr] content-start gap-x-4 overflow-hidden p-4 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8" | |
| > | |
| <div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3"> | |
| <h2 class="text-xl font-bold">Settings</h2> | |
| <button | |
| class="btn rounded-lg" | |
| on:click={() => { | |
| goto(previousPage); | |
| }} | |
| > | |
| <CarbonClose class="text-xl text-gray-900 hover:text-black" /> | |
| </button> | |
| </div> | |
| <div | |
| class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6" | |
| > | |
| <h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3> | |
| {#each data.models.filter((el) => !el.unlisted) as model} | |
| <a | |
| href="{base}/settings/{model.id}" | |
| 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 | |
| {model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}" | |
| > | |
| <div class="truncate">{model.displayName}</div> | |
| {#if model.id === $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 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"> | |
| Assistants | |
| </h3> | |
| {#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' : ''}" | |
| > | |
| <CarbonAdd /> | |
| <div class="truncate">Create new assistant</div> | |
| </a> | |
| {/if} | |
| {#each data.assistants 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 object-cover" | |
| /> | |
| {: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">{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} | |
| <a | |
| href="{base}/assistants" | |
| 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" | |
| ><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " /> | |
| <div class="truncate">Browse Assistants</div> | |
| </a> | |
| {/if} | |
| <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 | |
| {$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}" | |
| > | |
| <UserIcon class="text-sm" /> | |
| Application Settings | |
| </a> | |
| </div> | |
| <div | |
| class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 max-md:pt-4 md:col-span-2 md:row-span-2" | |
| > | |
| <slot /> | |
| </div> | |
| </div> | |