change callout delivery

src/lib/components/studio/chat/chat.svelte

@@ -126,12 +126,6 @@
     let tokens = $state(2);
 
     let isBlocked = $derived(tokens === 0);
-
-    const messaging = $derived({
-        callToAction: tokens > 0 ? 'Upgrade' : 'You are out of free messages.',
-        message: tokens > 0 ? 'to increase your message limits.' : 'Upgrade now.',
-        link: tokens > 0 ? '/#upgrade' : ''
-    });
 </script>
 
 <section
@@ -169,7 +163,18 @@
             <Conversation {parser} thinking={!firstByteReceived} />
 
             {#if tokens < 2}
-                <UpgradePrompt {...messaging} />
+                <UpgradePrompt>
+                    {#if !isBlocked}
+                        <Typography.Text>
+                            <a href="#upgrade" class="callout">Upgrade</a>
+                            to increase your message limits.</Typography.Text>
+                    {:else}
+                        <Typography.Text>
+                            You're out of free messages.
+                            <a href="#upgrade" class="callout">Upgrade now.</a>
+                        </Typography.Text>
+                    {/if}
+                </UpgradePrompt>
             {/if}
         {/if}
         <form {onsubmit} class="input" class:minimize-chat={minimizeChat}>
@@ -325,6 +330,13 @@
         }
     }
 
+    .callout {
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        color: var(--fgcolor-accent-neutral);
+        text-decoration-color: rgba(255, 255, 255, 0.4);
+    }
+
     .input.minimize-chat {
         border: 0;
         padding: var(--space-6);

src/routes/(console)/project-[region]-[project]/studio/artifact-[artifact]/upgradePrompt.svelte

@@ -1,24 +1,16 @@
 <script lang="ts">
-    import { Typography } from '@appwrite.io/pink-svelte';
     import ImagineBg from '$lib/images/login/imagine-bg.webp';
+    import type { Snippet } from 'svelte';
 
     type Props = {
-        callToAction?: string;
-        message?: string;
-        link?: string;
+        children: Snippet;
     };
 
-    const {
-        callToAction = 'Upgrade',
-        message = 'to increase your message limits.',
-        link = '/#upgrade'
-    }: Props = $props();
+    const { children }: Props = $props();
 </script>
 
 <div class="upgrade-prompt">
-    <Typography.Text>
-        <a href={link} class="cta">{callToAction}</a>
-        {message}</Typography.Text>
+    {@render children()}
 
     <img src={ImagineBg} alt="Imagine background" class="background" />
 </div>
@@ -45,15 +37,9 @@
             position: absolute;
             object-fit: cover;
             right: 0;
+            z-index: -1;
             mask-image: linear-gradient(to right, transparent, black);
         }
-
-        .cta {
-            text-decoration: underline;
-            text-underline-offset: 2px;
-            color: var(--fgcolor-accent-neutral);
-            text-decoration-color: rgba(255, 255, 255, 0.4);
-        }
     }
 
     @keyframes enter {