diff --git a/src/app/chat/chat-screen.tsx b/src/app/chat/chat-screen.tsx index 5e456dab..51520b62 100644 --- a/src/app/chat/chat-screen.tsx +++ b/src/app/chat/chat-screen.tsx @@ -11,7 +11,6 @@ import { ROUTES } from "@/router/routes"; import { MobileShell } from "@/app/_components/core"; import { - BrowserHintOverlay, ChatArea, ChatHeader, ChatInputBar, @@ -216,6 +215,7 @@ export function ChatScreen() { {/* isGuest 派生自 auth.loginStatus */} - {/* 浏览器提示（应用内浏览器检测） */} - {shouldShowBrowserHint ? : null} - {/* PWA 安装提示触发器（聊天消息数量达到阈值后才允许弹出） */} diff --git a/src/app/chat/components/__tests__/tailwind-components.test.tsx b/src/app/chat/components/__tests__/tailwind-components.test.tsx index aa84d35e..fe3ff778 100644 --- a/src/app/chat/components/__tests__/tailwind-components.test.tsx +++ b/src/app/chat/components/__tests__/tailwind-components.test.tsx @@ -158,6 +158,12 @@ describe("chat Tailwind components", () => { const memberHtml = renderToStaticMarkup( Offer} />, ); + const memberWithHintHtml = renderToStaticMarkup( + , + ); + const guestWithHintHtml = renderToStaticMarkup( + , + ); expect(guestHtml).toContain('aria-label="Sign up to unlock more features"'); expect(guestHtml).toContain("bg-accent"); @@ -173,6 +179,25 @@ describe("chat Tailwind components", () => { expect(memberHtml).toContain('data-analytics-key="chat.back_to_home"'); expect(memberHtml).toContain("bg-[rgba(13,11,20,0.7)]"); expect(memberHtml).toContain("size-(--responsive-icon-button-size,42px)"); + expect(memberWithHintHtml).toContain( + 'data-analytics-key="chat.external_browser_hint"', + ); + expect(memberWithHintHtml).toContain( + "grid-cols-[auto_minmax(0,1fr)_auto]", + ); + expect(memberWithHintHtml.indexOf('aria-label="Back to home"')).toBeLessThan( + memberWithHintHtml.indexOf( + 'data-analytics-key="chat.external_browser_hint"', + ), + ); + expect( + memberWithHintHtml.indexOf( + 'data-analytics-key="chat.external_browser_hint"', + ), + ).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Menu"')); + expect(guestWithHintHtml).not.toContain( + 'data-analytics-key="chat.external_browser_hint"', + ); }); it("renders ChatInputTextField with textarea utilities", () => { @@ -196,11 +221,8 @@ describe("chat Tailwind components", () => { }); it("renders BrowserHintOverlay visibility and expanded styles", () => { - expect(renderToStaticMarkup()).toBe(""); - const html = renderToStaticMarkup( , @@ -209,10 +231,9 @@ describe("chat Tailwind components", () => { expect(html).not.toContain("aria-expanded"); expect(html).toContain('aria-label="Open elsewhere. Better experience"'); expect(html).toContain("grid-cols-[auto_minmax(0,1fr)]"); - expect(html).toContain( - "right-[calc(var(--spacing-md,12px)+var(--responsive-icon-button-size,42px)+var(--spacing-sm,8px))]", - ); - expect(html).toContain("max-w-[min(58vw,220px)]"); + expect(html).not.toContain("absolute"); + expect(html).toContain("max-w-full"); + expect(html).toContain("size-7.5"); expect(html).toContain("bg-[#17131f]"); expect(html).toContain("text-[#f3dfe8]"); expect(html).not.toContain("Show external browser hint"); diff --git a/src/app/chat/components/browser-hint-overlay.tsx b/src/app/chat/components/browser-hint-overlay.tsx index 1dbbcf38..cc5fdf09 100644 --- a/src/app/chat/components/browser-hint-overlay.tsx +++ b/src/app/chat/components/browser-hint-overlay.tsx @@ -6,8 +6,7 @@ * 引导用户使用外部浏览器访问。 * * 行为： - * - 开发环境始终显示（测试方便） - * - 生产环境仅在应用内浏览器中显示 + * - 是否显示由 ChatHeader 的调用方决定 * - 始终完整展示，点击后主动打开外部浏览器 */ import { ExternalLink } from "lucide-react"; @@ -19,25 +18,17 @@ export interface BrowserHintOverlayProps { title?: string; /** 自定义按钮说明 */ description?: string; - /** 强制显示（开发模式测试用） */ - forceShow?: boolean; } const DEFAULT_TITLE = "Open in external browser"; const DEFAULT_DESCRIPTION = "Find me more easily"; const OVERLAY_CLASS_NAME = - "pointer-events-auto absolute right-[calc(var(--spacing-md,12px)+var(--responsive-icon-button-size,42px)+var(--spacing-sm,8px))] top-(--spacing-2,8px) z-20 grid min-h-12 w-fit max-w-[min(58vw,220px)] cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-[18px] border border-[rgba(255,255,255,0.3)] bg-[#17131f] px-2.5 py-2 text-white shadow-[0_12px_28px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.12)] transition-[border-color,box-shadow,opacity,transform] duration-180 [-webkit-tap-highlight-color:transparent] hover:-translate-y-px hover:border-[rgba(255,255,255,0.46)] hover:bg-[#211925] hover:shadow-[0_14px_32px_rgba(0,0,0,0.38),inset_0_1px_0_rgba(255,255,255,0.16)] active:translate-y-px active:scale-99 active:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"; + "grid min-h-12 min-w-0 w-fit max-w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-[18px] border border-[rgba(255,255,255,0.3)] bg-[#17131f] px-2.5 py-2 text-white shadow-[0_12px_28px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.12)] transition-[border-color,box-shadow,opacity,transform] duration-180 [-webkit-tap-highlight-color:transparent] hover:-translate-y-px hover:border-[rgba(255,255,255,0.46)] hover:bg-[#211925] hover:shadow-[0_14px_32px_rgba(0,0,0,0.38),inset_0_1px_0_rgba(255,255,255,0.16)] active:translate-y-px active:scale-99 active:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"; export function BrowserHintOverlay({ title = DEFAULT_TITLE, description = DEFAULT_DESCRIPTION, - forceShow = false, }: BrowserHintOverlayProps) { - // 展示条件由调用方控制；forceShow 保留给开发/测试入口。 - const shouldShow = forceShow; - - if (!shouldShow) return null; - const handleClick = (): void => { void openChatInExternalBrowser().catch((error) => { console.warn("[chat] Failed to open external browser", error); @@ -54,7 +45,7 @@ export function BrowserHintOverlay({ onClick={handleClick} >