From 8a53a07e0e9b48118da0a10c4d5f500a9e12ff7f Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Fri, 17 Jul 2026 16:29:37 +0800
Subject: [PATCH] feat(chat-header): update guest chat layout and link to
 character splash

---
 .../__tests__/tailwind-components.test.tsx    | 22 +++++++-
 src/app/chat/components/chat-header.tsx       | 54 +++++++++++--------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/app/chat/components/__tests__/tailwind-components.test.tsx b/src/app/chat/components/__tests__/tailwind-components.test.tsx
index d9711ff6..2854b8d1 100644
--- a/src/app/chat/components/__tests__/tailwind-components.test.tsx
+++ b/src/app/chat/components/__tests__/tailwind-components.test.tsx
@@ -184,8 +184,9 @@ describe("chat Tailwind components", () => {
     expect(guestHtml).toContain('aria-label="Sign up to unlock more features"');
     expect(guestHtml).toContain("bg-accent");
     expect(guestHtml).toContain("size-(--icon-size-sm,16px)");
-    expect(guestHtml).not.toContain('href="/splash"');
-    expect(guestHtml).not.toContain('aria-label="Back to home"');
+    expect(guestHtml).toContain('href="/characters/elio/splash"');
+    expect(guestHtml).toContain('aria-label="Back to home"');
+    expect(guestHtml).toContain('data-analytics-key="chat.back_to_home"');
     expect(guestHtml).not.toContain('aria-label="Menu"');
     expect(memberHtml).toContain("Offer");
     expect(memberHtml).toContain('href="/characters/elio/splash"');
@@ -216,6 +217,23 @@ describe("chat Tailwind components", () => {
     );
   });
 
+  it("links guest chat back to the active character splash", () => {
+    const maya = getCharacterBySlug("maya");
+    if (!maya) throw new Error("Missing Maya character fixture");
+
+    const html = renderToStaticMarkup(
+      <CharacterProvider character={maya}>
+        <ChatHeader isGuest={true} />
+      </CharacterProvider>,
+    );
+
+    expect(html).toContain('href="/characters/maya/splash"');
+    expect(html).not.toContain('aria-label="Menu"');
+    expect(html).not.toContain(
+      'data-analytics-key="chat.external_browser_hint"',
+    );
+  });
+
   it("renders ChatInputTextField with textarea utilities", () => {
     const html = renderToStaticMarkup(
       <ChatInputTextField
diff --git a/src/app/chat/components/chat-header.tsx b/src/app/chat/components/chat-header.tsx
index 7b171411..f156d968 100644
--- a/src/app/chat/components/chat-header.tsx
+++ b/src/app/chat/components/chat-header.tsx
@@ -50,31 +50,39 @@ export function ChatHeader({
         offerBanner
       )}
 
-      {!isGuest ? (
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)">
-          <BackButton
-            href={characterRoutes.splash}
-            variant="dark"
-            ariaLabel="Back to home"
-            analyticsKey="chat.back_to_home"
-          />
+      <div
+        className={
+          isGuest
+            ? "flex items-center px-(--spacing-md,12px) py-(--spacing-sm,8px)"
+            : "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)"
+        }
+      >
+        <BackButton
+          href={characterRoutes.splash}
+          variant="dark"
+          ariaLabel="Back to home"
+          analyticsKey="chat.back_to_home"
+        />
 
-          <div className="flex min-w-0 justify-center">
-            {showBrowserHint ? <BrowserHintOverlay /> : null}
-          </div>
+        {!isGuest ? (
+          <>
+            <div className="flex min-w-0 justify-center">
+              {showBrowserHint ? <BrowserHintOverlay /> : null}
+            </div>
 
-          <button
-            type="button"
-            data-analytics-key="chat.open_menu"
-            data-analytics-label="Open chat menu"
-            className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
-            onClick={() => navigator.push(characterRoutes.sidebar)}
-            aria-label="Menu"
-          >
-            <Menu size={24} aria-hidden="true" />
-          </button>
-        </div>
-      ) : null}
+            <button
+              type="button"
+              data-analytics-key="chat.open_menu"
+              data-analytics-label="Open chat menu"
+              className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
+              onClick={() => navigator.push(characterRoutes.sidebar)}
+              aria-label="Menu"
+            >
+              <Menu size={24} aria-hidden="true" />
+            </button>
+          </>
+        ) : null}
+      </div>
     </header>
   );
 }