banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): unlock paid messages before payment

Browse Source
This commit is contained in:
chenhang
2026-06-30 18:56:17 +08:00
parent 5f94105bc6
commit e7a9e7abe5
21 changed files with 774 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/chat-screen.tsx
+80 -6
View File
@@ -7,11 +7,18 @@ import { useRouter } from "next/navigation";
import { useAuthState } from "@/stores/auth/auth-context";
import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
import { useUserState } from "@/stores/user/user-context";
import { ROUTE_BUILDERS, ROUTES } from "@/router/routes";
import {
openChatInExternalBrowser,
recordExternalBrowserPromptShown,
resolveExternalBrowserPromptEligibility,
} from "@/lib/chat/chat_external_browser";
import {
consumePendingChatUnlock,
peekPendingChatUnlock,
savePendingChatUnlock,
type PendingChatUnlockKind,
} from "@/lib/navigation/chat_unlock_session";
import { MobileShell } from "@/app/_components/core";
@@ -45,6 +52,9 @@ export function ChatScreen() {
// isGuest 派生（chat-screen 是唯一知道这个值的地方 —— chat 机器无 isGuest 字段）
const isGuest = deriveIsGuest(authState.loginStatus);
const isAuthenticatedUser =
authState.loginStatus !== "notLoggedIn" &&
authState.loginStatus !== "guest";
// 消息数量限制由后端统一返回 lockDetail，前端不再处理本地额度。
const showMessageLimitBanner =
@@ -102,17 +112,79 @@ export function ChatScreen() {
authState.loginStatus,
]);
useEffect(() => {
if (!state.historyLoaded || !isAuthenticatedUser) return;
const pending = peekPendingChatUnlock();
if (!pending || pending.returnUrl !== ROUTES.chat) return;
const consumed = consumePendingChatUnlock();
if (!consumed) return;
chatDispatch({
type: "ChatUnlockMessageRequested",
messageId: consumed.messageId,
kind: consumed.kind,
});
}, [
chatDispatch,
isAuthenticatedUser,
state.historyLoaded,
]);
useEffect(() => {
const request = state.unlockPaywallRequest;
if (!request) return;
savePendingChatUnlock({
messageId: request.messageId,
kind: request.kind,
returnUrl: ROUTES.chat,
stage: "payment",
});
chatDispatch({ type: "ChatUnlockPaywallNavigationConsumed" });
router.push(
ROUTE_BUILDERS.subscription(
getInsufficientCreditsSubscriptionType(userState.isVip),
{ returnTo: "chat" },
),
);
}, [
chatDispatch,
router,
state.unlockPaywallRequest,
userState.isVip,
]);
async function handleOpenExternalBrowser(): Promise<void> {
setShowExternalBrowserDialog(false);
await openChatInExternalBrowser();
}
function openChatPaywallSubscription(): void {
router.push(getChatPaywallNavigationUrl(authState.loginStatus));
function requestMessageUnlock(
messageId: string,
kind: PendingChatUnlockKind,
): void {
if (!isAuthenticatedUser) {
savePendingChatUnlock({
messageId,
kind,
returnUrl: ROUTES.chat,
stage: "auth",
});
router.push(ROUTE_BUILDERS.authWithRedirect(ROUTES.chat));
return;
}
chatDispatch({
type: "ChatUnlockMessageRequested",
messageId,
kind,
});
}
function handleUnlockPrivateMessage(): void {
openChatPaywallSubscription();
function handleUnlockPrivateMessage(messageId: string): void {
requestMessageUnlock(messageId, "private");
}
function handleMessageLimitUnlock(): void {
@@ -129,8 +201,8 @@ export function ChatScreen() {
);
}
function handleUnlockVoiceMessage(): void {
openChatPaywallSubscription();
function handleUnlockVoiceMessage(messageId: string): void {
requestMessageUnlock(messageId, "voice");
}
return (
@@ -154,6 +226,8 @@ export function ChatScreen() {
messages={state.messages}
isReplyingAI={state.isReplyingAI}
isGuest={isGuest}
isUnlockingMessage={state.isUnlockingMessage}
unlockingMessageId={state.unlockingMessageId}
onUnlockPrivateMessage={handleUnlockPrivateMessage}
onUnlockVoiceMessage={handleUnlockVoiceMessage}
/>
src/app/chat/components/chat-area.tsx
+16 -4
View File
@@ -26,13 +26,17 @@ export interface ChatAreaProps {
messages: readonly UiMessage[];
isReplyingAI: boolean;
isGuest: boolean;
onUnlockPrivateMessage?: () => void;
onUnlockVoiceMessage?: () => void;
isUnlockingMessage?: boolean;
unlockingMessageId?: string | null;
onUnlockPrivateMessage?: (messageId: string) => void;
onUnlockVoiceMessage?: (messageId: string) => void;
}
export function ChatArea({
messages,
isReplyingAI,
isUnlockingMessage,
unlockingMessageId,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
}: ChatAreaProps) {
@@ -56,6 +60,8 @@ export function ChatArea({
{renderMessagesWithDateHeaders(
messages,
isUnlockingMessage,
unlockingMessageId,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
)}
@@ -68,8 +74,10 @@ export function ChatArea({
/** 渲染消息列表（按日期分组插入分隔条） */
function renderMessagesWithDateHeaders(
messages: readonly UiMessage[],
onUnlockPrivateMessage?: () => void,
onUnlockVoiceMessage?: () => void,
isUnlockingMessage?: boolean,
unlockingMessageId?: string | null,
onUnlockPrivateMessage?: (messageId: string) => void,
onUnlockVoiceMessage?: (messageId: string) => void,
) {
const items: Array<{ type: "date"; date: string; key: string } | { type: "msg"; message: UiMessage; key: string }> = [];
@@ -96,6 +104,10 @@ function renderMessagesWithDateHeaders(
lockReason={item.message.lockReason}
lockedPrivate={item.message.lockedPrivate}
privateMessageHint={item.message.privateMessageHint}
isUnlockingMessage={
isUnlockingMessage === true &&
item.message.id === unlockingMessageId
}
onUnlockPrivateMessage={onUnlockPrivateMessage}
onUnlockVoiceMessage={onUnlockVoiceMessage}
/>
src/app/chat/components/fullscreen-image-viewer.module.css
+5
View File
@@ -91,6 +91,11 @@
transform: translateY(1px);
}
.unlockButton:disabled {
cursor: not-allowed;
opacity: 0.72;
}
.loading {
width: 32px;
height: 32px;
src/app/chat/components/fullscreen-image-viewer.tsx
+6 -1
View File
@@ -26,6 +26,7 @@ export interface FullscreenImageViewerProps {
messageId?: string;
imageUrl: string;
imagePaywalled?: boolean;
isUnlockingImagePaywall?: boolean;
onUnlockImagePaywall?: () => void;
onClose: () => void;
}
@@ -34,6 +35,7 @@ export function FullscreenImageViewer({
messageId,
imageUrl,
imagePaywalled = false,
isUnlockingImagePaywall = false,
onUnlockImagePaywall,
onClose,
}: FullscreenImageViewerProps) {
@@ -88,9 +90,12 @@ export function FullscreenImageViewer({
<button
type="button"
className={styles.unlockButton}
disabled={isUnlockingImagePaywall || !onUnlockImagePaywall}
onClick={onUnlockImagePaywall}
>
Unlock high-definition large image
{isUnlockingImagePaywall
? "Unlocking..."
: "Unlock high-definition large image"}
</button>
</div>
);
src/app/chat/components/message-bubble.tsx
+6 -2
View File
@@ -25,8 +25,9 @@ export interface MessageBubbleProps {
lockReason?: string | null;
lockedPrivate?: boolean | null;
privateMessageHint?: string | null;
onUnlockPrivateMessage?: () => void;
onUnlockVoiceMessage?: () => void;
isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: (messageId: string) => void;
onUnlockVoiceMessage?: (messageId: string) => void;
}
export function MessageBubble({
@@ -40,6 +41,7 @@ export function MessageBubble({
lockReason,
lockedPrivate,
privateMessageHint,
isUnlockingMessage,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
}: MessageBubbleProps) {
@@ -61,6 +63,7 @@ export function MessageBubble({
lockReason={lockReason}
lockedPrivate={lockedPrivate}
privateMessageHint={privateMessageHint}
isUnlockingMessage={isUnlockingMessage}
onUnlockPrivateMessage={onUnlockPrivateMessage}
onUnlockVoiceMessage={onUnlockVoiceMessage}
/>
@@ -83,6 +86,7 @@ export function MessageBubble({
lockReason={lockReason}
lockedPrivate={lockedPrivate}
privateMessageHint={privateMessageHint}
isUnlockingMessage={isUnlockingMessage}
onUnlockPrivateMessage={onUnlockPrivateMessage}
onUnlockVoiceMessage={onUnlockVoiceMessage}
/>
src/app/chat/components/message-content.tsx
+16 -10
View File
@@ -15,8 +15,9 @@ export interface MessageContentProps {
lockReason?: string | null;
lockedPrivate?: boolean | null;
privateMessageHint?: string | null;
onUnlockPrivateMessage?: () => void;
onUnlockVoiceMessage?: () => void;
isUnlockingMessage?: boolean;
onUnlockPrivateMessage?: (messageId: string) => void;
onUnlockVoiceMessage?: (messageId: string) => void;
}
const IMAGE_PLACEHOLDER = "[图片]";
@@ -32,6 +33,7 @@ export function MessageContent({
lockReason,
lockedPrivate,
privateMessageHint,
isUnlockingMessage,
onUnlockPrivateMessage,
onUnlockVoiceMessage,
}: MessageContentProps) {
@@ -42,6 +44,14 @@ export function MessageContent({
lockedPrivate === true ||
(locked === true && lockReason === "private_message");
const isLockedVoiceMessage = locked === true && lockReason === "voice_message";
const handleUnlockPrivateMessage =
messageId && onUnlockPrivateMessage
? () => onUnlockPrivateMessage(messageId)
: undefined;
const handleUnlockVoiceMessage =
isLockedVoiceMessage && messageId && onUnlockVoiceMessage
? () => onUnlockVoiceMessage(messageId)
: undefined;
return (
<div
@@ -59,8 +69,8 @@ export function MessageContent({
{isLockedPrivateMessage ? (
<PrivateMessageCard
hint={privateMessageHint}
isUnlocking={false}
onUnlock={onUnlockPrivateMessage}
isUnlocking={isUnlockingMessage}
onUnlock={handleUnlockPrivateMessage}
/>
) : (
<>
@@ -78,12 +88,8 @@ export function MessageContent({
isFromAI={isFromAI}
locked={isLockedVoiceMessage}
hint={privateMessageHint}
isUnlocking={false}
onUnlock={
isLockedVoiceMessage
? onUnlockVoiceMessage
: undefined
}
isUnlocking={isUnlockingMessage}
onUnlock={handleUnlockVoiceMessage}
/>
) : null}
{hasText && !hasAudio ? (
src/app/chat/image/[messageId]/chat-image-viewer-screen.tsx
+88 -5
View File
@@ -1,14 +1,20 @@
"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { MobileShell } from "@/app/_components/core";
import { ROUTE_BUILDERS, ROUTES } from "@/router/routes";
import { useAuthState } from "@/stores/auth/auth-context";
import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
import { savePendingChatImageReturn } from "@/lib/navigation/chat_image_return_session";
import { useUserState } from "@/stores/user/user-context";
import {
consumePendingChatUnlock,
peekPendingChatUnlock,
savePendingChatUnlock,
} from "@/lib/navigation/chat_unlock_session";
import { getChatPaywallNavigationUrl } from "../../chat-screen.helpers";
import { getInsufficientCreditsSubscriptionType } from "../../chat-screen.helpers";
import { FullscreenImageViewer, HistoryUnlockDialog } from "../../components";
import styles from "./chat-image-viewer-screen.module.css";
@@ -21,22 +27,95 @@ export function ChatImageViewerScreen({
}: ChatImageViewerScreenProps) {
const router = useRouter();
const authState = useAuthState();
const userState = useUserState();
const chatState = useChatState();
const chatDispatch = useChatDispatch();
const returnUrl = ROUTE_BUILDERS.chatImage(messageId);
const isAuthenticatedUser =
authState.loginStatus !== "notLoggedIn" &&
authState.loginStatus !== "guest";
const message = chatState.messages.find(
(item) => item.id === messageId && item.imageUrl,
);
useEffect(() => {
if (!chatState.historyLoaded || !isAuthenticatedUser) return;
const pending = peekPendingChatUnlock();
if (
!pending ||
pending.kind !== "image" ||
pending.messageId !== messageId ||
pending.returnUrl !== returnUrl
) {
return;
}
const consumed = consumePendingChatUnlock();
if (!consumed) return;
chatDispatch({
type: "ChatUnlockMessageRequested",
messageId: consumed.messageId,
kind: consumed.kind,
});
}, [
chatDispatch,
chatState.historyLoaded,
isAuthenticatedUser,
messageId,
returnUrl,
]);
useEffect(() => {
const request = chatState.unlockPaywallRequest;
if (!request || request.kind !== "image" || request.messageId !== messageId) {
return;
}
savePendingChatUnlock({
messageId: request.messageId,
kind: request.kind,
returnUrl,
stage: "payment",
});
chatDispatch({ type: "ChatUnlockPaywallNavigationConsumed" });
router.push(
ROUTE_BUILDERS.subscription(
getInsufficientCreditsSubscriptionType(userState.isVip),
{ returnTo: "chat" },
),
);
}, [
chatDispatch,
chatState.unlockPaywallRequest,
messageId,
returnUrl,
router,
userState.isVip,
]);
const handleClose = () => {
router.push(ROUTES.chat);
};
const handleUnlockImagePaywall = () => {
savePendingChatImageReturn({
if (!isAuthenticatedUser) {
savePendingChatUnlock({
messageId,
kind: "image",
returnUrl,
stage: "auth",
});
router.push(ROUTE_BUILDERS.authWithRedirect(returnUrl));
return;
}
chatDispatch({
type: "ChatUnlockMessageRequested",
messageId,
returnUrl: ROUTE_BUILDERS.chatImage(messageId),
kind: "image",
});
router.push(getChatPaywallNavigationUrl(authState.loginStatus));
};
const historyUnlockDialog = (
@@ -79,6 +158,10 @@ export function ChatImageViewerScreen({
messageId={messageId}
imageUrl={message.imageUrl ?? ""}
imagePaywalled={message.imagePaywalled === true}
isUnlockingImagePaywall={
chatState.isUnlockingMessage &&
chatState.unlockingMessageId === messageId
}
onUnlockImagePaywall={handleUnlockImagePaywall}
onClose={handleClose}
/>
src/app/subscription/use-subscription-payment-flow.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
import {
consumeSubscriptionExitUrl,
consumeSubscriptionExplicitExitUrl,
peekSubscriptionExplicitExitUrl,
} from "@/lib/navigation/subscription_exit";
import {
clearPendingPaymentOrder,
@@ -128,7 +128,7 @@ export function useSubscriptionPaymentFlow({
const handlePaymentSuccessClose = () => {
setShowPaymentSuccessDialog(false);
paymentDispatch({ type: "PaymentReset" });
const pendingExitUrl = consumeSubscriptionExplicitExitUrl();
const pendingExitUrl = peekSubscriptionExplicitExitUrl();
if (pendingExitUrl) {
router.replace(pendingExitUrl);
return;