fix(chat): prompt guests to log in at quota limit

src/app/chat/chat-screen.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 import { useAuthState } from "@/stores/auth/auth-context";
 import type { LoginStatus } from "@/data/dto/auth";
@@ -37,6 +38,7 @@ export function ChatScreen() {
   const state = useChatState();
   const chatDispatch = useChatDispatch();
   const authState = useAuthState();
+  const router = useRouter();
   const [showExternalBrowserDialog, setShowExternalBrowserDialog] =
     useState(false);
 
@@ -52,6 +54,7 @@ export function ChatScreen() {
     state.paywallReason === "total_limit"
       ? "The limit for free chat times\nhas been reached"
       : undefined;
+  const messageLimitCta = isGuest ? "Log in to continue chatting" : undefined;
   const showPhotoPaywallBanner =
     state.paywallTriggered && state.paywallReason === "photo_paywall";
   const showPrivatePaywallBanner =
@@ -140,6 +143,14 @@ export function ChatScreen() {
     chatDispatch({ type: "ChatUnlockPrivateMessage", messageId });
   }
 
+  function handleMessageLimitUnlock(): void {
+    if (isGuest) {
+      router.push(ROUTES.auth);
+      return;
+    }
+    router.push(`${ROUTES.subscription}?type=vip`);
+  }
+
   return (
     <MobileShell>
       <div className={styles.shell}>
@@ -176,6 +187,8 @@ export function ChatScreen() {
           {showMessageLimitBanner ? (
             <ChatQuotaExhaustedBanner
               title={messageLimitTitle}
+              ctaLabel={messageLimitCta}
+              onUnlock={handleMessageLimitUnlock}
             />
           ) : (
             <ChatInputBar disabled={state.isReplyingAI} />