File size: 3,587 Bytes
7d98692 1d04bf7 8176282 379c3f5 4489403 8176282 806c0e0 7d7a53f 4489403 21b8785 f29cdb8 99dce38 7d98692 70bf8f4 742f467 70bf8f4 faafb92 31daf3d 93ad7b7 31daf3d 93ad7b7 742f467 65c580d 31daf3d 6318834 742f467 5e50694 742f467 31daf3d 0edbae3 603973f 0edbae3 61292c5 0edbae3 4489403 564943c 21b8785 564943c 4489403 8176282 d185c42 6835f58 8176282 6835f58 742f467 4489403 5e50694 742f467 d4d6f64 ec59d54 0c45efe d4d6f64 4489403 0c45efe 21b8785 4489403 742f467 0c45efe 21b8785 7d98692 | 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 | <script lang="ts">
import Logo from "$lib/components/icons/Logo.svelte";
import { createEventDispatcher } from "svelte";
import IconGear from "~icons/bi/gear-fill";
import AnnouncementBanner from "../AnnouncementBanner.svelte";
import type { Model } from "$lib/types/Model";
import ModelCardMetadata from "../ModelCardMetadata.svelte";
import { base } from "$app/paths";
import JSON5 from "json5";
import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
const publicConfig = usePublicConfig();
interface Props {
currentModel: Model;
}
let { currentModel }: Props = $props();
const dispatch = createEventDispatcher<{ message: string }>();
</script>
<div class="my-auto grid gap-8 lg:grid-cols-3">
<div class="lg:col-span-1">
<div>
<div class="mb-3 flex items-center text-2xl font-semibold">
<Logo classNames="mr-1 flex-none" />
{publicConfig.PUBLIC_APP_NAME}
<div
class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
>
v{publicConfig.PUBLIC_VERSION}
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-400">
{publicConfig.PUBLIC_APP_DESCRIPTION ||
"Making the community's best AI chat models available to everyone."}
</p>
</div>
</div>
<div class="lg:col-span-2 lg:pl-24">
{#each JSON5.parse(publicConfig.PUBLIC_ANNOUNCEMENT_BANNERS || "[]") as banner}
<AnnouncementBanner classNames="mb-4" title={banner.title}>
<a
target={banner.external ? "_blank" : "_self"}
href={banner.linkHref}
class="mr-2 flex items-center underline hover:no-underline">{banner.linkTitle}</a
>
</AnnouncementBanner>
{/each}
<div class="overflow-hidden rounded-xl border dark:border-gray-800">
<div class="flex p-3">
<div>
<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
<div class="flex items-center gap-1.5 font-semibold max-sm:text-smd">
{#if currentModel.logoUrl}
<img
class=" overflown aspect-square size-4 rounded border dark:border-gray-700"
src={currentModel.logoUrl}
alt=""
/>
{:else}
<div
class="size-4 rounded border border-transparent bg-gray-300 dark:bg-gray-800"
></div>
{/if}
{currentModel.displayName}
</div>
</div>
<a
href="{base}/settings/{currentModel.id}"
aria-label="Settings"
class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
><IconGear /></a
>
</div>
<ModelCardMetadata variant="dark" model={currentModel} />
</div>
</div>
{#if currentModel.promptExamples}
<div class="lg:col-span-3 lg:mt-6">
<p class="mb-3 text-center text-gray-600 dark:text-gray-300 lg:text-left">Examples</p>
<div
class="flex max-h-60 gap-2 overflow-x-auto pb-2 text-center scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 lg:grid lg:grid-cols-3 lg:overflow-y-auto lg:text-left"
>
{#each currentModel.promptExamples as example}
<button
type="button"
class="flex-shrink-0 rounded-xl border bg-gray-50 p-2.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-3 lg:w-full xl:p-3.5 xl:text-base"
onclick={() => dispatch("message", example.prompt)}
>
{example.title}
</button>
{/each}
</div>
</div>
{/if}
<div class="h-40 sm:h-24"></div>
</div>
|