From 63e4b4de08e79a1785763855df1eaee8780af95a Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Wed, 9 Jul 2025 14:36:18 -0400
Subject: [PATCH] change callout delivery

---
 src/lib/components/studio/chat/chat.svelte    | 26 ++++++++++++++-----
 .../artifact-[artifact]/upgradePrompt.svelte  | 24 ++++-------------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/studio/chat/chat.svelte b/src/lib/components/studio/chat/chat.svelte
index 14415caf2..4839d77b8 100644
--- a/src/lib/components/studio/chat/chat.svelte
+++ b/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);
diff --git a/src/routes/(console)/project-[region]-[project]/studio/artifact-[artifact]/upgradePrompt.svelte b/src/routes/(console)/project-[region]-[project]/studio/artifact-[artifact]/upgradePrompt.svelte
index 33c3df213..cd7f37b19 100644
--- a/src/routes/(console)/project-[region]-[project]/studio/artifact-[artifact]/upgradePrompt.svelte
+++ b/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 {