refactor(chat): make external browser launch user initiated

src/app/chat/components/browser-hint-overlay.module.css

@@ -9,22 +9,54 @@
   align-items: flex-end;
   gap: var(--spacing-1, 4px);
   z-index: 20;
-  pointer-events: none;
+  max-width: min(52vw, 210px);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .emoji {
   font-size: var(--responsive-icon-size-md, 24px);
   line-height: 1;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.32));
 }
 
 .hintBubble {
   padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
-  background: var(--color-blur-background, rgba(13, 11, 20, 0.85));
-  border-radius: var(--radius-md, 8px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: var(--radius-lg, 14px);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
+    var(--color-blur-background, rgba(13, 11, 20, 0.84));
+  box-shadow:
+    0 10px 24px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14);
   font-size: var(--font-size-sm, 12px);
-  font-weight: 500;
+  font-weight: 700;
+  line-height: 1.25;
   color: #fff;
-  white-space: pre-line;
   backdrop-filter: blur(10px);
-  max-width: min(52vw, 200px);
+  text-align: left;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+}
+
+.overlay:hover {
+  opacity: 0.94;
+  transform: translateY(-1px);
+}
+
+.overlay:active {
+  opacity: 0.88;
+  transform: translateY(1px) scale(0.99);
+}
+
+.overlay:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.88);
+  outline-offset: 4px;
 }

src/app/chat/components/browser-hint-overlay.tsx

@@ -10,10 +10,11 @@
  * 行为：
  *   - 开发环境始终显示（测试方便）
  *   - 生产环境仅在应用内浏览器中显示
- *   - 视觉：右上角 👆 + 模糊背景气泡
+ *   - 点击后主动打开外部浏览器
  */
 import { useState } from "react";
 
+import { openChatInExternalBrowser } from "@/lib/chat/chat_external_browser";
 import { BrowserDetector } from "@/utils";
 
 import styles from "./browser-hint-overlay.module.css";
@@ -25,7 +26,7 @@ export interface BrowserHintOverlayProps {
   forceShow?: boolean;
 }
 
-const DEFAULT_TEXT = "Tap ⋮ , open in browser\nfor better chat";
+const DEFAULT_TEXT = "Open in external browser\nto find me easily";
 
 export function BrowserHintOverlay({
   text = DEFAULT_TEXT,
@@ -38,12 +39,20 @@ export function BrowserHintOverlay({
   const shouldShow = forceShow || isInAppBrowser;
   if (!shouldShow) return null;
 
+  const handleClick = (): void => {
+    void openChatInExternalBrowser().catch((error) => {
+      console.warn("[chat] Failed to open external browser", error);
+    });
+  };
+
   return (
-    <div className={styles.overlay} role="status" aria-live="polite">
-      <span className={styles.emoji} aria-hidden="true">
-        👆
-      </span>
-      <div className={styles.hintBubble}>{text}</div>
-    </div>
+    <button
+      type="button"
+      className={styles.overlay}
+      aria-label={text}
+      onClick={handleClick}
+    >
+      <span className={styles.hintBubble}>{text}</span>
+    </button>
   );
 }