Spaces:
Running
Running
File size: 3,560 Bytes
df3243b 9264459 df3243b 9264459 df3243b 9264459 df3243b 52281dd df3243b 5a5937a 9264459 5a5937a df3243b 22d10ff df3243b 797e348 df3243b 797e348 df3243b 5a5937a df3243b 9264459 df3243b f66535d df3243b 9264459 6c83605 df3243b 5a5937a df3243b 5a5937a df3243b |
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 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import IconGear from "~icons/bi/gear-fill";
import { base } from "$app/paths";
import type { Assistant } from "$lib/types/Assistant";
import IconInternet from "../icons/IconInternet.svelte";
export let assistant: Pick<
Assistant,
| "avatar"
| "name"
| "rag"
| "modelId"
| "createdByName"
| "exampleInputs"
| "_id"
| "description"
>;
const dispatch = createEventDispatcher<{ message: string }>();
$: hasRag =
assistant?.rag?.allowAllDomains ||
(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
(assistant?.rag?.allowedLinks?.length ?? 0) > 0;
</script>
<div class="flex h-full w-full flex-col content-center items-center justify-center pb-52">
<div
class="relative mt-auto rounded-2xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800/60 dark:text-gray-300"
>
<div
class="mt-3 flex min-w-[80dvw] items-center gap-4 p-4 pr-1 sm:min-w-[440px] md:p-8 md:pt-10 xl:gap-8"
>
{#if assistant.avatar}
<img
src={`${base}/settings/assistants/${assistant._id.toString()}/avatar.jpg?hash=${
assistant.avatar
}`}
alt="avatar"
class="size-16 flex-none rounded-full object-cover max-sm:self-start md:size-32"
/>
{:else}
<div
class="flex size-12 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 max-sm:self-start sm:text-4xl md:size-32 dark:bg-gray-600"
>
{assistant?.name[0]}
</div>
{/if}
<div class="flex h-full flex-col gap-2 text-balance">
<p class="-mb-1">Assistant</p>
<p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
{#if assistant.description}
<p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
{assistant.description}
</p>
{/if}
{#if hasRag}
<div
class="flex h-5 w-fit items-center gap-1 rounded-full bg-blue-500/10 pl-1 pr-2 text-xs"
title="This assistant uses the websearch."
>
<IconInternet classNames="text-sm text-blue-600" />
Has internet access
</div>
{/if}
{#if assistant.createdByName}
<p class="pt-2 text-sm text-gray-400 dark:text-gray-500">
Created by <a
class="hover:underline"
href="{base}/assistants?user={assistant.createdByName}"
>
{assistant.createdByName}
</a>
</p>
{/if}
</div>
</div>
<div class="absolute right-3 top-3 md:right-4 md:top-4">
<a
href="{base}/settings/assistants/{assistant._id.toString()}"
class="flex items-center gap-1.5 rounded-full border bg-white py-1 pl-3 pr-2.5 text-xs text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
><IconGear class="text-xxs" />Settings</a
>
</div>
</div>
{#if assistant.exampleInputs}
<div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
<div class="md:col-span-2 md:mt-6">
<div
class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
? 'md:grid-cols-2'
: ''}"
>
{#each assistant.exampleInputs as example}
<button
type="button"
class="truncate whitespace-nowrap rounded-xl border bg-gray-50 px-3 py-2 text-left text-smd text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
on:click={() => dispatch("message", example)}
>
{example}
</button>
{/each}
</div>
</div>
</div>
{/if}
</div>
|