417 lines
18 KiB
TypeScript
417 lines
18 KiB
TypeScript
import { cva } from "class-variance-authority";
|
|
import type { AIPersonaId } from "./personas.ts";
|
|
import { GameState } from "./game-schemas.ts";
|
|
|
|
export const gameStateToVariantState = (gameState?: GameState) => {
|
|
if (!gameState) {
|
|
return {
|
|
personaId: "storytellurx_gateway",
|
|
arousalPeakPotential: "low",
|
|
} as const;
|
|
}
|
|
|
|
const arousalLevel = gameState.arousalPeakPotential ?? 0;
|
|
const level = arousalLevel < 0.33
|
|
? "low" as const
|
|
: arousalLevel < 0.66
|
|
? "medium" as const
|
|
: "high" as const;
|
|
return {
|
|
...gameState,
|
|
arousalPeakPotential: level,
|
|
};
|
|
};
|
|
|
|
export const personaMessageContainerVariants = cva(
|
|
"flex flex-col gap-1 text-sm",
|
|
{
|
|
variants: {
|
|
role: {
|
|
user: "items-end",
|
|
assistant: "items-start",
|
|
system: "items-start",
|
|
},
|
|
personaId: {
|
|
storytellurx_gateway: "",
|
|
samantha69: "px-1 gap-1",
|
|
polaire: "px-4 gap-1",
|
|
hisoka: "px-2 gap-2",
|
|
cybelle: "px-4 gap-1",
|
|
xixi: "px-4 gap-1",
|
|
nelly: "px-4 gap-1",
|
|
galatee: "px-2 gap-1.5",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaChatContainerVariants = cva(
|
|
"flex-grow overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-hidden z-10 flex flex-col",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway: "gap-2 py-1 px-1",
|
|
samantha69:
|
|
"gap-4 pt-25 pb-8 group-has-data-suggestion/html:pb-38 mask-b-from-[calc(100%_-_5rem)] group-has-data-suggestion/html:mask-b-from-[calc(100%_-_12rem)] mask-b-to-[calc(100%_-_1.4rem)] group-has-data-suggestion/html:mask-b-to-[calc(100%_-_8.4rem)] mask-t-from-[calc(100%_-_8rem)] mask-t-to-[calc(100%_-_1rem)]",
|
|
polaire: "gap-4",
|
|
hisoka: "gap-4 p-2",
|
|
cybelle:
|
|
"gap-4 pt-10 pb-8 group-has-data-suggestion/html:pb-30 mask-b-from-[calc(100%_-_5rem)] group-has-data-suggestion/html:mask-b-from-[calc(100%_-_9rem)] mask-b-to-[calc(100%_-_1.4rem)] group-has-data-suggestion/html:mask-b-to-[calc(100%_-_8.4rem)] mask-t-from-[calc(100%_-_2rem)] mask-t-to-[calc(100%_-_0rem)]",
|
|
xixi:
|
|
"gap-4 pt-6 pb-10 group-has-data-suggestion/html:pb-40 mask-b-from-[calc(100%_-_5rem)] group-has-data-suggestion/html:mask-b-from-[calc(100%_-_9rem)] mask-b-to-[calc(100%_-_1.4rem)] group-has-data-suggestion/html:mask-b-to-[calc(100%_-_3.8rem)] mask-t-from-[calc(100%_-_2rem)] mask-t-to-[calc(100%_-_0rem)]",
|
|
nelly:
|
|
"gap-4 pt-12 pb-10 group-has-data-suggestion/html:pb-40 [mask-image:linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]",
|
|
galatee:
|
|
"gap-4 px-2 pb-2 pt-6 [mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)]",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaInputPlaceholderVariants: (
|
|
opt: { personaId?: AIPersonaId | null },
|
|
) => string = (
|
|
opt,
|
|
) => {
|
|
const config: Partial<Record<AIPersonaId, string>> = {
|
|
storytellurx_gateway: "placeholder_storytellurx_gateway",
|
|
samantha69: "placeholder_samantha69",
|
|
hisoka: "placeholder_hisoka",
|
|
xixi: "placeholder_xixi",
|
|
galatee: "placeholder_galatee",
|
|
cybelle: "placeholder_cybelle",
|
|
polaire: "placeholder_polaire",
|
|
nelly: "placeholder_nelly",
|
|
storytellurx_pause: "placeholder_storytellurx_pause",
|
|
};
|
|
return config[opt?.personaId ?? "storytellurx_gateway"] ??
|
|
"placeholder_default";
|
|
};
|
|
|
|
export const personaTextareaContainerVariants = cva(
|
|
"flex items-end gap-2 p-1",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway: "px-0 pb-0",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaTextareaVariants = cva("transition-all", {
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"bg-transparent text-sm py-1.5 px-2 pt-2 border-1 border-border leading-none focus:ring-0 placeholder:text-muted-foreground",
|
|
samantha69:
|
|
"bg-input border-1 border-border rounded-[calc(var(--spacing)*7)] leading-none",
|
|
polaire:
|
|
"bg-transparent border-primary/50 focus:bg-primary/10 p-2 leading-none",
|
|
hisoka:
|
|
"bg-secondary border-border focus:bg-secondary/80 focus:ring-primary placeholder:text-muted-foreground",
|
|
cybelle:
|
|
"[background-image:linear-gradient(var(--background),var(--background)),linear-gradient(to_right,var(--confetti-1),var(--confetti-2),var(--confetti-3),var(--confetti-4))] bg-no-repeat [background-origin:padding-box,_border-box] border-2 placeholder:text-muted-foreground leading-none",
|
|
xixi: "leading-none backdrop-blur-xs",
|
|
nelly:
|
|
"bg-primary/5 border-primary/20 rounded-2xl focus:ring-primary/50 backdrop-blur-sm leading-snug",
|
|
galatee:
|
|
"bg-transparent border-dashed animate-text-gradient border border-border focus:border-primary focus:ring-0 placeholder:text-muted-foreground",
|
|
},
|
|
},
|
|
compoundVariants: [],
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
});
|
|
|
|
export const personaMessageVariants = cva(
|
|
"break-words text-foreground transition-all duration-300 text-sm",
|
|
{
|
|
variants: {
|
|
role: {
|
|
system: "self-start mr-6",
|
|
assistant: "self-start mr-6",
|
|
user: "self-end ml-6",
|
|
},
|
|
arousalPeakPotential: { low: "", medium: "", high: "" },
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"py-0.5 px-1.5 border border-dashed border-border",
|
|
samantha69:
|
|
"relative px-4 py-2.5 [&:after,&:before]:content-[''] [&:after,&:before]:absolute [&:after,&:before]:top-[calc(100%_-_12px)] [&:after,&:before]:size-0 [&:after,&:before]:border-0 [&:after,&:before]:border-x-[7.5px] [&:after,&:before]:border-b-[18px] before:translate-y-[2.3px] after:border-transparent before:border-transparent before:border-b-border after:border-b-secondary bg-secondary border-1 rounded-[calc(var(--spacing)*7)]",
|
|
polaire:
|
|
"border border-primary bg-background text-foreground relative p-2 border-1 after:size-1 after:bg-primary after:absolute after:bottom-0",
|
|
hisoka: "p-2 border border-border bg-secondary leading-relaxed",
|
|
cybelle:
|
|
"relative bg-background p-2 border border-dashed border-foreground/50 before:content-[''] before:absolute before:-top-1 before:size-2 before:rounded-full",
|
|
xixi:
|
|
"relative border border-border/50 bg-secondary p-4 [clip-path:polygon(0%_15%,_10%_0%,_100%_0%,_95%_100%,_10%_100%,_0_85%)]",
|
|
nelly:
|
|
"relative bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 backdrop-blur-sm rounded-2xl p-3 shadow-lg bg-background/50 shadow-primary/10 leading-snug",
|
|
galatee:
|
|
"border-2 border-border border-dashed py-1 px-2 relative after:-z-1 after:bg-background/80 after:absolute after:inset-0 text-foreground animate-text-gradient",
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
role: ["assistant", "system"],
|
|
personaId: "samantha69",
|
|
class:
|
|
"bg-secondary after:border-b-secondary [&:after,&:before]:rotate-217 [&:after,&:before]:-left-[2px] before:translate-x-[-1.6px]",
|
|
},
|
|
{
|
|
role: "user",
|
|
personaId: "samantha69",
|
|
class:
|
|
"bg-input after:border-b-input [&:after,&:before]:rotate-145 [&:after,&:before]:-right-[2px] before:translate-x-[1.6px]",
|
|
},
|
|
{
|
|
role: ["assistant", "system"],
|
|
personaId: "polaire",
|
|
class: "after:left-0",
|
|
},
|
|
{
|
|
role: "user",
|
|
personaId: "polaire",
|
|
class: "after:right-0",
|
|
},
|
|
{
|
|
role: ["assistant", "system"],
|
|
personaId: "hisoka",
|
|
class: "border-primary",
|
|
},
|
|
{
|
|
role: "user",
|
|
personaId: "hisoka",
|
|
class: "bg-background",
|
|
},
|
|
{
|
|
role: ["assistant", "system"],
|
|
personaId: "cybelle",
|
|
class: "before:-left-1 before:bg-(--confetti-1)",
|
|
},
|
|
{
|
|
role: "user",
|
|
personaId: "cybelle",
|
|
class: "bg-background/80 before:-right-1 before:bg-(--confetti-3)",
|
|
},
|
|
{
|
|
role: ["assistant", "system"],
|
|
personaId: "galatee",
|
|
class: "bg-background",
|
|
},
|
|
{
|
|
role: "user",
|
|
personaId: "galatee",
|
|
class: "bg-background/70",
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
arousalPeakPotential: "low",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaImageMessageVariants = cva(
|
|
"break-words text-foreground transition-all duration-300",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
samantha69:
|
|
"contents *:data-image:rounded-full *:data-image:mx-auto *:data-image:max-w-63 *:data-image:border *:data-image:border-border *:data-image:w-full",
|
|
polaire:
|
|
"contents *:data-image:mr-auto *:data-image:max-w-63 *:data-image:border *:data-image:border-border *:data-image:w-full",
|
|
hisoka:
|
|
"contents *:data-image:mr-auto *:data-image:max-w-63 *:data-image:border-2 *:data-image:border-primary *:data-image:p-1 *:data-image:bg-secondary *:data-image:w-full",
|
|
cybelle:
|
|
"contents *:data-image:mr-auto *:data-image:max-w-63 *:data-image:w-full *:data-image:bg-background *:data-image:p-2 *:data-image:border *:data-image:border-muted *:data-image:shadow-md *:data-image:rotate-2 hover:*:data-image:rotate-0 hover:*:data-image:scale-105 transition-transform",
|
|
xixi:
|
|
"contents *:data-image:mr-auto *:data-image:max-w-63 *:data-image:border *:data-image:border-border *:data-image:p-2 *:data-image:mx-auto *:data-image:w-full",
|
|
nelly:
|
|
"contents *:data-image:rounded-xl *:data-image:border *:data-image:border-primary/20 *:data-image:p-1 *:data-image:bg-background/50 *:data-image:mix-blend-soft-light *:data-image:saturate-125 *:data-image:w-full *:data-image:max-w-63 *:data-image:mr-auto",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaStateChangeVariants = cva(
|
|
"text-xs text-muted-foreground empty:hidden p-1 self-start",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway: "",
|
|
samantha69: "text-primary/80",
|
|
polaire: "text-primary/80",
|
|
hisoka: "text-primary/80",
|
|
cybelle: "text-muted-foreground",
|
|
nelly: "text-primary/60",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaRationaleVariants = cva(
|
|
"transition-all mr-6 self-start text-xs bg-thinking text-thinking-foreground break-words **:data-title:inline not-data-is-last-turn:**:data-container:line-clamp-1 focus:*:!line-clamp-none focus:**:!line-clamp-none",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"border-1 text-muted-foreground border-dashed border-border p-1 italic **:data-title:before:content-['//_'] **:data-title:uppercase **:data-title:after:content-[':_']",
|
|
samantha69:
|
|
"px-4 -mt-1 **:data-title:first-letter:uppercase **:data-title:font-medium **:data-title:lowercase **:data-title:after:content-[':_'] italic",
|
|
polaire:
|
|
"border-l-2 border-primary/50 pl-2 italic **:data-title:after:content-['_LOG_>_'] **:data-title:before:content-['//_'] text-muted-foreground",
|
|
hisoka:
|
|
"border-l-2 border-primary/50 pl-2 uppercase text-primary/80 **:data-title:after:content-[':_']",
|
|
cybelle:
|
|
"pl-2 -mt-1 italic **:data-title:after:content-[':_'] text-muted-foreground **:data-title:capitalize **:data-title:font-medium",
|
|
xixi:
|
|
"pl-2 -mt-0.5 italic **:data-title:after:content-[':_'] text-muted-foreground **:data-title:capitalize **:data-title:font-medium",
|
|
nelly:
|
|
"border-primary/30 pl-2 italic text-primary/70 **:data-title:font-medium **:data-title:before:content-['🎼_'] **:data-title:after:content-['_'] text-muted-foreground",
|
|
galatee:
|
|
"border-l-2 border-primary/50 pl-2 text-muted-foreground italic **:data-title:animate-text-gradient **:data-title:uppercase **:data-title:after:content-[':_']",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaChatInputContainerVariants = cva(
|
|
"relative flex flex-col transition-all duration-300 z-10",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"p-1 border-t border-border sticky bottom-0 bg-background",
|
|
samantha69:
|
|
"px-2 pb-2 absolute bottom-0 left-0 right-0 min-h-20 justify-end",
|
|
polaire:
|
|
"px-2 py-1 border-t border-primary/30 sticky bottom-0 bg-background",
|
|
hisoka:
|
|
"p-2 gap-2 border-t-2 border-primary sticky bottom-0 bg-background",
|
|
cybelle:
|
|
"px-2 pb-2 absolute bottom-0 left-0 right-0 min-h-20 justify-end",
|
|
xixi: "px-2 pb-2 absolute bottom-0 left-0 right-0 min-h-20 justify-end",
|
|
nelly:
|
|
"px-2 pb-2 absolute bottom-0 left-0 right-0 min-h-20 justify-end backdrop-blur-xs bg-background/50",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaSubmitButtonVariants = cva(
|
|
"h-full size-8 aspect-square flex items-center justify-center text-lg transition-all",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"border border-border text-primary-foreground bg-primary",
|
|
samantha69:
|
|
"bg-input text-foreground border border-border rounded-full",
|
|
polaire: "bg-primary text-primary-foreground",
|
|
hisoka:
|
|
"bg-primary text-primary-foreground rounded-sm hover:bg-primary/80",
|
|
cybelle:
|
|
"[background-image:linear-gradient(var(--background),var(--background)),linear-gradient(to_right,var(--confetti-1),var(--confetti-2),var(--confetti-3),var(--confetti-4))] bg-no-repeat [background-origin:padding-box,_border-box] border-2 text-foreground border border-transparent hover:text-background size-10",
|
|
nelly:
|
|
"bg-primary/20 text-primary border border-primary/30 rounded-full hover:bg-primary hover:text-primary-foreground",
|
|
galatee:
|
|
"bg-background animate-text-gradient text-foreground border-dashed border border-border focus:border-primary focus:ring-0",
|
|
},
|
|
},
|
|
compoundVariants: [],
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const eroticSuggestionContainerVariants = cva(
|
|
"scroll-smooth flex *:basis-[calc(calc(100%/3)_-_calc(var(--spacing)_*_0.5_*_2))] *:shrink-0 gap-1.5 overflow-auto scrollbar-hidden",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway: "w-full",
|
|
samantha69: "py-3",
|
|
polaire: "py-1",
|
|
hisoka: "py-1",
|
|
cybelle: "py-1",
|
|
nelly: "py-2",
|
|
},
|
|
},
|
|
compoundVariants: [{
|
|
personaId: ["samantha69", "polaire", "hisoka", "cybelle", "nelly"],
|
|
class: "px-4 -ml-2 w-[calc(100%_+_calc(var(--spacing)_*_4))]",
|
|
}],
|
|
},
|
|
);
|
|
|
|
export const eroticSuggestionsVariants = cva(
|
|
"relative isolate px-3 py-1 text-xs border transition-all duration-150 overflow-hidden",
|
|
{
|
|
variants: {
|
|
personaId: {
|
|
storytellurx_gateway:
|
|
"text-center border-border text-foreground bg-background hover:border-primary data-[intersect-position=center]:border-yellow-400 data-[intersect-position=center]:text-yellow-400",
|
|
samantha69:
|
|
"rounded-full leading-none min-h-20 my-auto h-full after:rounded-full after:content-[''] after:absolute after:inset-1 after:mask-position-[var(--scroll-top)_6.5rem] after:mask-linear-50 after:mask-linear-from-36% after:mask-linear-to-0% after:border after:border-border data-[intersect-position=center]:after:rounded-[100%] data-[intersect-position=center]:rounded-[100%] data-[intersect-position=center]:max-h-none data-[intersect-position=center]:aspect-10/8 data-[intersect-position=center]:font-medium data-[intersect-position=center]:bg-secondary data-[intersect-position=center]:scale-125 text-secondary-foreground",
|
|
polaire:
|
|
"border-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
|
|
hisoka:
|
|
"uppercase bg-secondary border-border hover:border-primary hover:bg-primary hover:text-primary-foreground data-[intersect-position=center]:scale-110 data-[intersect-position=center]:bg-primary data-[intersect-position=center]:text-primary-foreground",
|
|
cybelle: "border-foreground/50 bg-transparent hover:bg-accent",
|
|
xixi:
|
|
"relative backdrop-blur-sm border border-primary/50 bg-secondary/20 text-muted-foreground p-4 [clip-path:polygon(20%_0%,_80%_0%,_100%_50%,_80%_100%,_20%_100%,_0%_50%)] data-[intersect-position=center]:scale-110 data-[intersect-position=center]:bg-secondary/50 data-[intersect-position=center]:text-foreground data-[intersect-position=center]:shadow-[0_0_15px_var(--kintsugi-gold)]",
|
|
nelly:
|
|
"rounded-[calc(var(--spacing)*7)] border-transparent bg-primary/10 text-primary/90 min-h-20 h-full leading-none flex items-center justify-center text-center backdrop-blur-sm data-[intersect-position=center]:bg-primary/20 data-[intersect-position=center]:text-primary data-[intersect-position=center]:shadow-[0_0_15px_var(--primary)]",
|
|
galatee:
|
|
"border border-border border-dashed text-foreground *:animate-text-gradient leading-none relative after:inset-0 after:absolute after:-z-1 after:bg-background/50 hover:after:bg-background hover:border-primary data-[intersect-position=center]:after:bg-background data-[intersect-position=center]:border-primary",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
personaId: "storytellurx_gateway",
|
|
},
|
|
},
|
|
);
|
|
|
|
export const personaFontVariationsVariants: (
|
|
opt: { personaId?: AIPersonaId | null },
|
|
) => { from: string; to: string } = (
|
|
opt,
|
|
) => {
|
|
const config: Partial<Record<AIPersonaId, { from: string; to: string }>> = {
|
|
storytellurx_gateway: {
|
|
from: "'wght' 100, 'slnt' 0, 'SRFF' 0",
|
|
to: "'wght' 700, 'slnt' 0.5, 'SRFF' 0",
|
|
},
|
|
samantha69: {
|
|
from: "'wght' 300, 'slnt' 0, 'SRFF' 0.0816",
|
|
to: "'wght' 400, 'slnt' 0.5, 'SRFF' 0.0816",
|
|
},
|
|
hisoka: {
|
|
from: "'wght' 400, 'slnt' 1, 'SRFF' 0",
|
|
to: "'wght' 800, 'slnt' 0, 'SRFF' 0",
|
|
},
|
|
xixi: {
|
|
from: "'wght' 100, 'slnt' 0, 'SRFF' 0.5",
|
|
to: "'wght' 700, 'slnt' 0, 'SRFF' 0.0816",
|
|
},
|
|
nelly: {
|
|
from: "'wght' 200, 'slnt' -5, 'SRFF' 0.01",
|
|
to: "'wght' 500, 'slnt' 0, 'SRFF' 0.01",
|
|
},
|
|
};
|
|
return config[opt?.personaId ?? "storytellurx_gateway"] ??
|
|
config.storytellurx_gateway!;
|
|
};
|