File size: 2,900 Bytes
7d98692 1d04bf7 4489403 7d7a53f 4489403 21b8785 4331e77 21b8785 4331e77 f29cdb8 4331e77 7d98692 4331e77 742f467 70bf8f4 4331e77 31daf3d 93ad7b7 4331e77 93ad7b7 742f467 65c580d 31daf3d 6318834 742f467 5e50694 742f467 31daf3d 0edbae3 603973f 0edbae3 61292c5 0edbae3 4489403 564943c 4331e77 564943c 21b8785 564943c 4489403 8176282 d185c42 6835f58 8176282 6835f58 742f467 4489403 5e50694 742f467 4331e77 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 |
<script lang="ts">
import Logo from "$lib/components/icons/Logo.svelte";
import type { Model } from "$lib/types/Model";
import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
const publicConfig = usePublicConfig();
interface Props {
currentModel: Model;
onmessage?: (content: string) => void;
}
let { currentModel: _currentModel, onmessage }: Props = $props();
$effect(() => {
// referenced to appease linter while UI blocks are commented out
void _currentModel;
void onmessage;
});
</script>
<div class="my-auto grid items-center justify-center gap-8 text-center">
<div
class="flex -translate-y-16 select-none items-center rounded-xl text-3xl font-semibold md:-translate-y-12 md:text-5xl"
>
<Logo classNames="size-12 md:size-20 dark:invert mr-0.5" />
{publicConfig.PUBLIC_APP_NAME}
</div>
<!-- <div class="lg:col-span-1">
<div>
<div class="mb-3 flex items-center text-2xl font-semibold">
<Logo classNames="mr-1 flex-none dark:invert" />
{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"
>
{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="aspect-square size-4 rounded border bg-white 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>
<div class="h-40 sm:h-24"></div> -->
</div>
|