File size: 4,826 Bytes
992a8de 91ec91f 992a8de 719f09e 992a8de 7766f89 786115c 992a8de 786115c 992a8de 786115c 992a8de 7766f89 992a8de 7766f89 992a8de 786115c 992a8de 719f09e 1f50904 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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<script lang="ts">
import { enhance } from "$app/forms";
import { base } from "$app/paths";
import { page } from "$app/stores";
import { PUBLIC_ORIGIN, PUBLIC_SHARE_PREFIX } from "$env/static/public";
import { useSettingsStore } from "$lib/stores/settings";
import type { PageData } from "./$types";
import CarbonPen from "~icons/carbon/pen";
import CarbonTrash from "~icons/carbon/trash-can";
import CarbonCopy from "~icons/carbon/copy-file";
import CarbonFlag from "~icons/carbon/flag";
import CarbonLink from "~icons/carbon/link";
import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
export let data: PageData;
$: assistant = data.assistants.find((el) => el._id.toString() === $page.params.assistantId);
const settings = useSettingsStore();
$: isActive = $settings.activeModel === $page.params.assistantId;
const prefix = PUBLIC_SHARE_PREFIX || `${PUBLIC_ORIGIN || $page.url.origin}${base}`;
$: shareUrl = `${prefix}/assistant/${assistant?._id}`;
</script>
<div class="flex h-full flex-col gap-2">
<div class="flex gap-6">
{#if assistant?.avatar}
<!-- crop image if not square -->
<img
src={`${base}/settings/assistants/${assistant?._id}/avatar.jpg?hash=${assistant?.avatar}`}
alt="Avatar"
class="size-16 flex-none rounded-full object-cover sm:size-24"
/>
{:else}
<div
class="flex size-16 flex-none items-center justify-center rounded-full bg-gray-300 text-4xl font-semibold uppercase text-gray-500 sm:size-24"
>
{assistant?.name[0]}
</div>
{/if}
<div class="flex-1">
<div class="mb-1.5">
<h1 class="mr-2 inline text-xl font-semibold">
{assistant?.name}
</h1>
<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
>public</span
>
</div>
{#if assistant?.description}
<p class="mb-2 line-clamp-2 text-sm text-gray-500">
{assistant.description}
</p>
{/if}
<p class="text-sm text-gray-500">
Model: <span class="font-semibold"> {assistant?.modelId} </span>
<span class="text-gray-300">•</span> Created by
<a class="underline" target="_blank" href={"https://hf.co/" + assistant?.createdByName}>
{assistant?.createdByName}
</a>
</p>
<div
class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
>
<button
class="{isActive
? 'bg-gray-100 text-gray-800'
: 'bg-black !text-white'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
disabled={isActive}
name="Activate model"
on:click|stopPropagation={() => {
$settings.activeModel = $page.params.assistantId;
}}
>
{isActive ? "Active" : "Activate"}
</button>
{#if assistant?.createdByMe}
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"
><CarbonPen class="mr-1.5 inline text-xs" />Edit
</a>
<form method="POST" action="?/delete" use:enhance>
<button type="submit" class="flex items-center underline">
<CarbonTrash class="mr-1.5 inline text-xs" />Delete</button
>
</form>
{:else}
<form method="POST" action="?/unsubscribe" use:enhance>
<button type="submit" class="underline">
<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
>
</form>
<form method="POST" action="?/edit" use:enhance class="hidden">
<button type="submit" class="underline">
<CarbonCopy class="mr-1.5 inline text-xs" />Duplicate</button
>
</form>
{#if !assistant?.reported}
<form method="POST" action="?/report" use:enhance>
<button type="submit" class="underline">
<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
>
</form>
{:else}
<button type="button" disabled class="text-gray-700">
<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button
>
{/if}
{/if}
</div>
</div>
</div>
<div>
<h2 class="text-lg font-semibold">Direct URL</h2>
<p class="pb-2 text-sm text-gray-500">Share this link for people to use your assistant.</p>
<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 truncate bg-inherit" value={shareUrl} />
<CopyToClipBoardBtn
value={shareUrl}
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
>
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
<CarbonLink />Copy
</div>
</CopyToClipBoardBtn>
</div>
</div>
<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
<textarea
disabled
class="min-h-[8lh] w-full flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 disabled:cursor-not-allowed 2xl:min-h-[12lh]"
>{assistant?.preprompt}</textarea
>
</div>
|