feat(chat-header): update guest chat layout and link to character splash

This commit is contained in:
2026-07-17 16:29:37 +08:00
parent d545c3653f
commit 8a53a07e0e
2 changed files with 51 additions and 25 deletions
@@ -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
+11 -3
View File
@@ -50,8 +50,13 @@ 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)">
<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"
@@ -59,6 +64,8 @@ export function ChatHeader({
analyticsKey="chat.back_to_home"
/>
{!isGuest ? (
<>
<div className="flex min-w-0 justify-center">
{showBrowserHint ? <BrowserHintOverlay /> : null}
</div>
@@ -73,8 +80,9 @@ export function ChatHeader({
>
<Menu size={24} aria-hidden="true" />
</button>
</div>
</>
) : null}
</div>
</header>
);
}