Spaces:
Paused
Paused
File size: 3,696 Bytes
ba0ce97 | 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 | <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";
import AgentModeToggle from "$lib/components/agent/AgentModeToggle.svelte";
import type { ConversationMode } from "$lib/components/agent/types";
const publicConfig = usePublicConfig();
interface Props {
currentModel: Model;
onmessage?: (content: string) => void;
mode?: ConversationMode;
showModeToggle?: boolean;
onmodechange?: (mode: ConversationMode) => void;
}
let {
currentModel: _currentModel,
onmessage,
mode = "chat",
showModeToggle = false,
onmodechange,
}: Props = $props();
$effect(() => {
// referenced to appease linter while UI blocks are commented out
void _currentModel;
void onmessage;
});
</script>
<div
class="my-auto flex flex-col items-center justify-center gap-5 text-center {showModeToggle
? '-translate-y-10 md:-translate-y-8'
: '-translate-y-16 md:-translate-y-12'}"
>
<div
class="flex items-center rounded-xl text-[1.6rem] font-semibold select-none md:text-[2.55rem]"
>
<Logo classNames="size-[2.55rem] md:size-[4.25rem] dark:invert mr-0.5" />
{publicConfig.PUBLIC_APP_NAME}
</div>
{#if showModeToggle}
<div class="flex flex-col items-center gap-2.5">
<AgentModeToggle
{mode}
disabled={!onmodechange}
onchange={onmodechange}
label="Start in Chat or Agent mode"
/>
<p class="max-w-sm px-4 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
Chat for answers, or Agent to work in a repository.
</p>
</div>
{/if}
<!-- <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-sm border bg-white dark:border-gray-700"
src={currentModel.logoUrl}
alt=""
/>
{:else}
<div
class="size-4 rounded-sm 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>
|