86 lines
3 KiB
TypeScript
86 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import { useNarrative } from "@/app/game-engine/narrative-provider.tsx";
|
|
import { cva } from "class-variance-authority";
|
|
import urlcat from "@bureaudouble/outils/urlcat.ts";
|
|
import { setLocale } from "@/app/actions/locale.ts";
|
|
import { useClientLocale } from "@/app/game-engine/locale-provider.tsx";
|
|
|
|
const headerVariants = cva(
|
|
"text-xs flex justify-between gap-1 font-display z-20 sticky top-0 rounded-[1rem_1rem_0_0]",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
terminal:
|
|
"h-6 shrink-0 p-1 border-b text-muted-foreground uppercase items-center *:data-history:mr-auto [&_a]:group-data-[active=false]:after:invisible [&_a]:group [&_a]:data-[active=true]:bg-primary [&_a]:data-[active=true]:text-primary-foreground **:data-version:text-primary-foreground **:data-sep:text-accent-foreground [&_button]:text-accent-foreground",
|
|
classical:
|
|
"h-8 shrink-0 bg-background/95 px-2 items-end pb-1 border-b text-accent-foreground uppercase *:data-history:mr-auto *:data-[active=true]:text-secondary-foreground [&_form]:text-secondary-foreground [&_button]:cursor-pointer **:data-version:text-secondary-foreground [&_button]:hover:text-secondary-foreground **:data-sep:text-accent-foreground [&_button]:text-accent-foreground",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export default function ChatHeader(
|
|
{ url: urlProp, locale: localeProp, variant: variantProp }: {
|
|
url: string;
|
|
locale?: string;
|
|
variant: "classical" | "terminal";
|
|
},
|
|
) {
|
|
const { t } = useClientLocale();
|
|
const narrative = useNarrative({ allowNullable: true });
|
|
|
|
const variant = narrative?.uiVariant ?? variantProp;
|
|
const locale = narrative?.locale ?? localeProp;
|
|
|
|
const url = URL.canParse(urlProp)
|
|
? new URL(urlProp)
|
|
: globalThis.location
|
|
? new URL(globalThis.location.href)
|
|
: null;
|
|
|
|
if (!url) return;
|
|
|
|
return (
|
|
<header className={headerVariants({ variant })}>
|
|
<a
|
|
data-title
|
|
data-active={url.pathname === "/start" || url.pathname === "/chat"}
|
|
href={urlcat("/start", { "model-id": url.searchParams.get("model-id") })}
|
|
>
|
|
StoryTellurX{variant === "terminal" ? "_SYS" : ""}
|
|
{variant === "terminal" ? <span className="animate-pulse">_</span> : ""}
|
|
</a>
|
|
<a
|
|
data-history
|
|
href={urlcat("/history", {
|
|
"model-id": url.searchParams.get("model-id"),
|
|
})}
|
|
data-active={url.pathname === "/history"}
|
|
>
|
|
{t("history")}
|
|
</a>
|
|
<div data-version>Version 1.0</div>
|
|
<form>
|
|
{variant === "terminal" ? t("langPrefix") : ""}
|
|
<button
|
|
type="submit"
|
|
formAction={setLocale}
|
|
value={locale}
|
|
aria-label={t("changeLanguage")}
|
|
>
|
|
{locale === "en_GB" ? "FR" : "EN"}
|
|
</button>
|
|
<span data-sep>
|
|
{variant === "terminal" ? "::" : " | "}
|
|
</span>
|
|
<span
|
|
data-active={variant === "classical"}
|
|
className="data-[active=false]:text-muted-foreground"
|
|
>
|
|
{locale === "en_GB" ? "EN" : "FR"}
|
|
</span>
|
|
</form>
|
|
</header>
|
|
);
|
|
}
|