From bded7497d2c83437cd5bdf81b87502e170b3a896 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Wed, 17 Jun 2026 18:02:43 +0800
Subject: [PATCH] fix(chat): show browser hint in development

---
 src/app/chat/chat-screen.tsx                        |  3 ++-
 .../chat/components/browser-hint-overlay.module.css |  1 +
 src/app/chat/components/browser-hint-overlay.tsx    | 13 ++++---------
 src/utils/browser-detect.ts                         |  6 ------
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/app/chat/chat-screen.tsx b/src/app/chat/chat-screen.tsx
index 3f2a956d..6e235053 100644
--- a/src/app/chat/chat-screen.tsx
+++ b/src/app/chat/chat-screen.tsx
@@ -24,6 +24,7 @@ import { useAuthState } from "@/stores/auth/auth-context";
 import type { LoginStatus } from "@/data/dto/auth";
 import { AuthStorage } from "@/data/storage/auth/auth_storage";
 import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
+import { AppEnvUtil } from "@/utils/app-env";
 
 import { MobileShell } from "@/app/_components/core";
 
@@ -155,7 +156,7 @@ export function ChatScreen() {
         </div>
 
         {/* 浏览器提示（应用内浏览器检测） */}
-        <BrowserHintOverlay />
+        <BrowserHintOverlay forceShow={AppEnvUtil.isDevelopment()} />
 
         {/* PWA 安装提示触发器（无可见 UI，3.5s 后弹 dialog） */}
         <PwaInstallOverlay />
diff --git a/src/app/chat/components/browser-hint-overlay.module.css b/src/app/chat/components/browser-hint-overlay.module.css
index 877b34e0..dd704398 100644
--- a/src/app/chat/components/browser-hint-overlay.module.css
+++ b/src/app/chat/components/browser-hint-overlay.module.css
@@ -24,6 +24,7 @@
   font-size: var(--font-size-sm, 12px);
   font-weight: 500;
   color: #fff;
+  white-space: pre-line;
   backdrop-filter: blur(10px);
   max-width: 200px;
 }
diff --git a/src/app/chat/components/browser-hint-overlay.tsx b/src/app/chat/components/browser-hint-overlay.tsx
index c84b046d..1cb82743 100644
--- a/src/app/chat/components/browser-hint-overlay.tsx
+++ b/src/app/chat/components/browser-hint-overlay.tsx
@@ -14,6 +14,8 @@
  */
 import { useState } from "react";
 
+import { BrowserDetector } from "@/utils/browser-detect";
+
 import styles from "./browser-hint-overlay.module.css";
 
 export interface BrowserHintOverlayProps {
@@ -23,21 +25,14 @@ export interface BrowserHintOverlayProps {
   forceShow?: boolean;
 }
 
-const DEFAULT_TEXT = "Tap ⋮ menu, then 'Open in browser'";
-
-function detectInAppBrowser(): boolean {
-  if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent;
-  // 常见应用内浏览器 UA 特征
-  return /MicroMessenger|Weibo|QQ\//.test(ua);
-}
+const DEFAULT_TEXT = "Tap ⋮ , open in browser\nfor better chat";
 
 export function BrowserHintOverlay({
   text = DEFAULT_TEXT,
   forceShow = false,
 }: BrowserHintOverlayProps) {
   // lazy initializer：首次渲染即计算（避免 useEffect 中调 setState 的 lint 错）
-  const [isInAppBrowser] = useState(detectInAppBrowser);
+  const [isInAppBrowser] = useState(BrowserDetector.isInAppBrowser);
 
   // 开发模式或应用内浏览器才显示
   const shouldShow = forceShow || isInAppBrowser;
diff --git a/src/utils/browser-detect.ts b/src/utils/browser-detect.ts
index 4f473193..84693f84 100644
--- a/src/utils/browser-detect.ts
+++ b/src/utils/browser-detect.ts
@@ -1,11 +1,5 @@
 /**
  * 浏览器 / WebView 检测
- *
- * 原始 Dart: `lib/utils/browser_detector.dart`
- *
- * 主要用例：
- *  - 嵌入 Facebook / 微信 / 微博内嵌浏览器时，给用户提示「在外部浏览器打开」。
- *  - 判断 PWA 模式（standalone）。
  */
 export const BrowserDetector = {
   /** 当前是否在 Facebook 内嵌浏览器 */