banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenhang
2026-07-17 16:29:37 +08:00
parent d545c3653f
commit 8a53a07e0e
2 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/components/__tests__/tailwind-components.test.tsx
+20 -2
View File
@@ -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
src/app/chat/components/chat-header.tsx
+31 -23
View File
@@ -50,31 +50,39 @@ 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={
<BackButton isGuest
href={characterRoutes.splash} ? "flex items-center px-(--spacing-md,12px) py-(--spacing-sm,8px)"
variant="dark" : "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--spacing-md,12px) py-(--spacing-sm,8px)"
ariaLabel="Back to home" }
analyticsKey="chat.back_to_home" >
/> <BackButton
href={characterRoutes.splash}
variant="dark"
ariaLabel="Back to home"
analyticsKey="chat.back_to_home"
/>
<div className="flex min-w-0 justify-center"> {!isGuest ? (
{showBrowserHint ? <BrowserHintOverlay /> : null} <>
</div> <div className="flex min-w-0 justify-center">
{showBrowserHint ? <BrowserHintOverlay /> : null}
</div>
<button <button
type="button" type="button"
data-analytics-key="chat.open_menu" data-analytics-key="chat.open_menu"
data-analytics-label="Open chat 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]" 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)} onClick={() => navigator.push(characterRoutes.sidebar)}
aria-label="Menu" aria-label="Menu"
> >
<Menu size={24} aria-hidden="true" /> <Menu size={24} aria-hidden="true" />
</button> </button>
</div> </>
) : null} ) : null}
</div>
</header> </header>
); );
} }