feat(chat): tailor insufficient credits guidance

src/app/chat/chat-screen.tsx

@@ -30,6 +30,7 @@ import {
 } from "./components";
 import {
   deriveIsGuest,
+  getInsufficientCreditsMessageLimitView,
   getInsufficientCreditsSubscriptionType,
   isChatDevelopmentEnvironment,
   shouldStartExternalBrowserPrompt,
@@ -61,9 +62,9 @@ export function ChatScreen() {
   const showMessageLimitBanner =
     state.upgradePromptVisible &&
     state.upgradeReason === "insufficient_credits";
-  const messageLimitTitle =
-    "Insufficient credits\nTop up to continue chatting";
-  const messageLimitCtaLabel = "Top up credits to continue";
+  const messageLimitView = getInsufficientCreditsMessageLimitView(
+    authState.loginStatus,
+  );
   const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
     historyLoaded: state.historyLoaded,
     loginStatus: authState.loginStatus,
@@ -141,6 +142,11 @@ export function ChatScreen() {
   }
 
   function handleMessageLimitUnlock(): void {
+    if (messageLimitView.action === "auth") {
+      navigator.openAuth(ROUTES.chat);
+      return;
+    }
+
     navigator.openSubscription({
       type: getInsufficientCreditsSubscriptionType(userState.isVip),
       returnTo: "chat",
@@ -190,8 +196,9 @@ export function ChatScreen() {
 
           {showMessageLimitBanner ? (
             <ChatInsufficientCreditsBanner
-              title={messageLimitTitle}
-              ctaLabel={messageLimitCtaLabel}
+              title={messageLimitView.title}
+              description={messageLimitView.description}
+              ctaLabel={messageLimitView.ctaLabel}
               onUnlock={handleMessageLimitUnlock}
             />
           ) : (