File size: 3,328 Bytes
992a8de 786115c 992a8de 719f09e 91ec91f 992a8de 786115c 992a8de 786115c 992a8de 786115c 992a8de 786115c 992a8de |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<script lang="ts">
import { base } from "$app/paths";
import { clickOutside } from "$lib/actions/clickOutside";
import { afterNavigate, goto } from "$app/navigation";
import { useSettingsStore } from "$lib/stores/settings";
import type { PageData } from "./$types";
import { applyAction, enhance } from "$app/forms";
import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
import { page } from "$app/stores";
export let data: PageData;
let previousPage: string = base;
afterNavigate(({ from }) => {
if (!from?.url.pathname.includes("settings")) {
previousPage = from?.url.pathname || previousPage;
}
});
const settings = useSettingsStore();
</script>
<svelte:head>
<meta property="og:title" content={data.assistant.name + " - " + PUBLIC_APP_NAME} />
<meta property="og:type" content="link" />
<meta
property="og:description"
content={`Use the ${data.assistant.name} assistant inside of ${PUBLIC_APP_NAME}`}
/>
<meta
property="og:image"
content="{PUBLIC_ORIGIN || $page.url.origin}{base}/assistant/{data.assistant._id}/thumbnail.png"
/>
<meta property="og:url" content={$page.url.href} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div
class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
>
<dialog
open
use:clickOutside={() => {
goto(previousPage);
}}
class="z-10 flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-2xl bg-white p-4 pt-6 text-center shadow-2xl outline-none max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
>
{#if data.assistant.avatar}
<img
class="size-16 flex-none rounded-full object-cover sm:size-24"
src="{base}/settings/assistants/{data.assistant._id}/avatar.jpg?hash={data.assistant
.avatar}"
alt="avatar"
/>
{:else}
<div
class="flex size-16 flex-none items-center justify-center rounded-full bg-gray-300 text-2xl font-bold uppercase text-gray-500 sm:size-24"
>
{data.assistant.name[0]}
</div>
{/if}
<h1 class="text-balance text-xl font-bold">
{data.assistant.name}
</h1>
{#if data.assistant.description}
<h3 class="line-clamp-6 text-balance text-sm text-gray-500">
{data.assistant.description}
</h3>
{/if}
{#if data.assistant.createdByName}
<p class="mt-2 text-sm text-gray-500">
Created by <a
class="hover:underline"
href="https://hf.co/{data.assistant.createdByName}"
target="_blank"
>
{data.assistant.createdByName}
</a>
</p>
{/if}
<button
class="mt-4 w-full rounded-full bg-gray-200 px-4 py-2 font-semibold text-gray-700"
on:click={() => {
goto(previousPage);
}}
>
Cancel
</button>
<form
method="POST"
action="{base}/settings/assistants/{data.assistant._id}?/subscribe"
class="w-full"
use:enhance={() => {
return async ({ result }) => {
// `result` is an `ActionResult` object
if (result.type === "success") {
$settings.activeModel = data.assistant._id;
goto(`${base}`);
} else {
await applyAction(result);
}
};
}}
>
<button
type="submit"
class=" w-full rounded-full bg-black px-4 py-3 font-semibold text-white"
>
Start chatting
</button>
</form>
</dialog>
</div>
|