Spaces:
Paused
Paused
| <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> | |