File size: 3,024 Bytes
4566da9 b9a2152 4566da9 b9a2152 4566da9 b9a2152 4566da9 b9a2152 4566da9 b9a2152 4566da9 b9a2152 4566da9 |
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 |
<script lang="ts">
import Modal from "$lib/components/Modal.svelte";
import { isPro } from "$lib/stores/isPro";
import IconPro from "$lib/components/icons/IconPro.svelte";
import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
interface Props {
close: () => void;
}
let { close }: Props = $props();
</script>
<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
<div
class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
>
<div
class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
>
<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
<div
class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
>
{#if $isPro}
<IconDazzled />
{:else}
<IconPro classNames="!mr-0" />
{/if}
</div>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
{$isPro ? "Out of Credits" : "Upgrade Required"}
</h2>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200">
{#if $isPro}
<p class="text-[15px] leading-relaxed">
You've used all your available credits. Purchase additional credits to continue using
HuggingChat.
</p>
<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
Your credits can be used in other HF services and external apps via Inference Providers.
</p>
{:else}
<p class="text-[15px] leading-relaxed">
You've reached your message limit. Upgrade to Hugging Face PRO to continue using
HuggingChat.
</p>
<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
It's also possible to use your PRO credits in your favorite AI tools.
</p>
{/if}
</div>
<div class="flex flex-col gap-2.5">
{#if $isPro}
<a
href="https://huggingface.co/settings/billing?add-credits=true"
target="_blank"
rel="noopener noreferrer"
class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
>
Purchase Credits
</a>
{:else}
<a
href="https://huggingface.co/subscribe/pro?from=HuggingChat"
target="_blank"
rel="noopener noreferrer"
class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
>
Upgrade to Pro
</a>
{/if}
<button
class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
onclick={close}
>
Maybe later
</button>
</div>
</div>
</Modal>
|