diff --git a/src/app/chat/__tests__/chat-screen.helpers.test.ts b/src/app/chat/__tests__/chat-screen.helpers.test.ts
index a46e2c27..9c8de28a 100644
--- a/src/app/chat/__tests__/chat-screen.helpers.test.ts
+++ b/src/app/chat/__tests__/chat-screen.helpers.test.ts
@@ -1,10 +1,15 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
import {
getInsufficientCreditsMessageLimitView,
+ shouldStartExternalBrowserPrompt,
shouldShowMessageLimitBanner,
} from "../chat-screen.helpers";
+afterEach(() => {
+ vi.unstubAllEnvs();
+});
+
describe("getInsufficientCreditsMessageLimitView", () => {
it("asks guests to log in for more free chats", () => {
expect(getInsufficientCreditsMessageLimitView("guest")).toEqual({
@@ -65,3 +70,73 @@ describe("shouldShowMessageLimitBanner", () => {
).toBe(false);
});
});
+
+describe("shouldStartExternalBrowserPrompt", () => {
+ it("shows for facebook users inside an in-app browser", () => {
+ vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
+
+ expect(
+ shouldStartExternalBrowserPrompt({
+ hasInitialized: true,
+ isLoading: false,
+ loginStatus: "facebook",
+ isInAppBrowser: true,
+ }),
+ ).toBe(true);
+ });
+
+ it.each(["guest", "notLoggedIn", "email", "google"] as const)(
+ "hides for %s users even inside an in-app browser",
+ (loginStatus) => {
+ vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
+
+ expect(
+ shouldStartExternalBrowserPrompt({
+ hasInitialized: true,
+ isLoading: false,
+ loginStatus,
+ isInAppBrowser: true,
+ }),
+ ).toBe(false);
+ },
+ );
+
+ it("hides for facebook users in normal browsers", () => {
+ vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
+
+ expect(
+ shouldStartExternalBrowserPrompt({
+ hasInitialized: true,
+ isLoading: false,
+ loginStatus: "facebook",
+ isInAppBrowser: false,
+ }),
+ ).toBe(false);
+ });
+
+ it("shows in development for easier testing", () => {
+ vi.stubEnv("NEXT_PUBLIC_APP_ENV", "development");
+
+ expect(
+ shouldStartExternalBrowserPrompt({
+ hasInitialized: true,
+ isLoading: false,
+ loginStatus: "guest",
+ isInAppBrowser: false,
+ }),
+ ).toBe(true);
+ });
+
+ it("waits for auth initialization", () => {
+ vi.stubEnv("NEXT_PUBLIC_APP_ENV", "production");
+
+ expect(
+ shouldStartExternalBrowserPrompt({
+ hasInitialized: false,
+ isLoading: false,
+ loginStatus: "facebook",
+ isInAppBrowser: true,
+ }),
+ ).toBe(false);
+ });
+});
diff --git a/src/app/chat/chat-screen.helpers.ts b/src/app/chat/chat-screen.helpers.ts
index c36ece04..ed3f258a 100644
--- a/src/app/chat/chat-screen.helpers.ts
+++ b/src/app/chat/chat-screen.helpers.ts
@@ -8,6 +8,7 @@ export interface ExternalBrowserPromptState {
hasInitialized: boolean;
isLoading: boolean;
loginStatus: LoginStatus;
+ isInAppBrowser?: boolean;
}
export type InsufficientCreditsAction = "auth" | "topup";
@@ -63,11 +64,12 @@ export function shouldStartExternalBrowserPrompt({
hasInitialized,
isLoading,
loginStatus,
+ isInAppBrowser = BrowserDetector.isInAppBrowser(),
}: ExternalBrowserPromptState): boolean {
if (!hasInitialized || isLoading) return false;
return (
isChatDevelopmentEnvironment() ||
- (loginStatus === "facebook" && BrowserDetector.isInAppBrowser())
+ (loginStatus === "facebook" && isInAppBrowser)
);
}
diff --git a/src/app/chat/chat-screen.tsx b/src/app/chat/chat-screen.tsx
index bde90076..77b546d4 100644
--- a/src/app/chat/chat-screen.tsx
+++ b/src/app/chat/chat-screen.tsx
@@ -28,7 +28,7 @@ import {
} from "./chat-image-overlay-url";
import {
deriveIsGuest,
- isChatDevelopmentEnvironment,
+ shouldStartExternalBrowserPrompt,
} from "./chat-screen.helpers";
import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
import { useChatUnlockNavigationFlow } from "./hooks/use-chat-unlock-navigation-flow";
@@ -90,6 +90,11 @@ export function ChatScreen() {
loginStatus: authState.loginStatus,
});
const shouldShowPwaInstall = state.historyLoaded && state.messages.length >= 10;
+ const shouldShowBrowserHint = shouldStartExternalBrowserPrompt({
+ hasInitialized: authState.hasInitialized,
+ isLoading: authState.isLoading,
+ loginStatus: authState.loginStatus,
+ });
useChatGuestLogin({
dispatch: authDispatch,
@@ -186,7 +191,7 @@ export function ChatScreen() {
{/* 浏览器提示(应用内浏览器检测) */}
-
+ {shouldShowBrowserHint ? : null}
{/* PWA 安装提示触发器(聊天消息数量达到阈值后才允许弹出) */}
diff --git a/src/app/chat/components/browser-hint-overlay.tsx b/src/app/chat/components/browser-hint-overlay.tsx
index cca5c9d1..4e4c3392 100644
--- a/src/app/chat/components/browser-hint-overlay.tsx
+++ b/src/app/chat/components/browser-hint-overlay.tsx
@@ -14,7 +14,6 @@ import { useEffect, useState } from "react";
import { ExternalLink } from "lucide-react";
import { openChatInExternalBrowser } from "@/lib/chat/chat_external_browser";
-import { BrowserDetector } from "@/utils";
import styles from "./browser-hint-overlay.module.css";
@@ -39,13 +38,11 @@ export function BrowserHintOverlay({
forceShow = false,
autoCollapseDelayMs = DEFAULT_AUTO_COLLAPSE_DELAY_MS,
}: BrowserHintOverlayProps) {
- // lazy initializer:首次渲染即计算(避免 useEffect 中调 setState 的 lint 错)
- const [isInAppBrowser] = useState(BrowserDetector.isInAppBrowser);
const [isExpanded, setIsExpanded] = useState(true);
const [hasAutoCollapsed, setHasAutoCollapsed] = useState(false);
- // 开发模式或应用内浏览器才显示
- const shouldShow = forceShow || isInAppBrowser;
+ // 展示条件由调用方控制;forceShow 保留给开发/测试入口。
+ const shouldShow = forceShow;
useEffect(() => {
if (!shouldShow || hasAutoCollapsed || autoCollapseDelayMs <= 0) return;