feat(chat-header): update guest chat layout and link to character splash
This commit is contained in:
@@ -184,8 +184,9 @@ describe("chat Tailwind components", () => {
|
|||||||
expect(guestHtml).toContain('aria-label="Sign up to unlock more features"');
|
expect(guestHtml).toContain('aria-label="Sign up to unlock more features"');
|
||||||
expect(guestHtml).toContain("bg-accent");
|
expect(guestHtml).toContain("bg-accent");
|
||||||
expect(guestHtml).toContain("size-(--icon-size-sm,16px)");
|
expect(guestHtml).toContain("size-(--icon-size-sm,16px)");
|
||||||
expect(guestHtml).not.toContain('href="/splash"');
|
expect(guestHtml).toContain('href="/characters/elio/splash"');
|
||||||
expect(guestHtml).not.toContain('aria-label="Back to home"');
|
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(guestHtml).not.toContain('aria-label="Menu"');
|
||||||
expect(memberHtml).toContain("Offer");
|
expect(memberHtml).toContain("Offer");
|
||||||
expect(memberHtml).toContain('href="/characters/elio/splash"');
|
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", () => {
|
it("renders ChatInputTextField with textarea utilities", () => {
|
||||||
const html = renderToStaticMarkup(
|
const html = renderToStaticMarkup(
|
||||||
<ChatInputTextField
|
<ChatInputTextField
|
||||||
|
|||||||
@@ -50,8 +50,13 @@ export function ChatHeader({
|
|||||||
offerBanner
|
offerBanner
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isGuest ? (
|
<div
|
||||||
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)">
|
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
|
<BackButton
|
||||||
href={characterRoutes.splash}
|
href={characterRoutes.splash}
|
||||||
variant="dark"
|
variant="dark"
|
||||||
@@ -59,6 +64,8 @@ export function ChatHeader({
|
|||||||
analyticsKey="chat.back_to_home"
|
analyticsKey="chat.back_to_home"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{!isGuest ? (
|
||||||
|
<>
|
||||||
<div className="flex min-w-0 justify-center">
|
<div className="flex min-w-0 justify-center">
|
||||||
{showBrowserHint ? <BrowserHintOverlay /> : null}
|
{showBrowserHint ? <BrowserHintOverlay /> : null}
|
||||||
</div>
|
</div>
|
||||||
@@ -73,8 +80,9 @@ export function ChatHeader({
|
|||||||
>
|
>
|
||||||
<Menu size={24} aria-hidden="true" />
|
<Menu size={24} aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user