File size: 4,976 Bytes
992a8de
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
719f09e
992a8de
 
 
 
 
 
 
 
 
7766f89
992a8de
 
 
 
 
7766f89
992a8de
 
 
 
 
 
 
7766f89
 
992a8de
7766f89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
992a8de
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
719f09e
 
7766f89
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
149
150
151
152
153
154
155
156
157
158
159
160
<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?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">
			<h1 class="text-xl font-semibold">
				{assistant?.name}
			</h1>

			{#if assistant?.description}
				<p class="mb-1 text-sm text-gray-500">
					{assistant.description}
				</p>
			{/if}

			<p class="text-sm text-gray-500">
				Model: <span class="font-semibold"> {assistant?.modelId} </span>
			</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">
			People with this link will be able to use your assistant.
			{#if !assistant?.createdByMe && assistant?.createdByName}
				Created by <a
					class="underline"
					target="_blank"
					href={"https://hf.co/" + assistant?.createdByName}
				>
					{assistant?.createdByName}
				</a>
			{/if}
		</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>

	<!-- <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
		disabled
		class="min-h-[8lh] w-full flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-gray-600 disabled:cursor-not-allowed 2xl:min-h-[12lh]"
		>{assistant?.preprompt}</textarea
	>
</div>