mirror of
https://github.com/severian-dev/sucker.severian.dev.git
synced 2026-02-27 19:32:04 +00:00
chore: 2.2
This commit is contained in:
Severian
528
src/app/page.tsx
528
src/app/page.tsx
@@ -20,18 +20,18 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Png } from "@/lib/png";
|
||||
import {
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Copy,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Menu,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
CollapsibleContent,
|
||||
Collapsible,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { CollapsibleInfobox } from "@/components/ui/collapsible-infobox";
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
|
||||
import Script from "next/script";
|
||||
|
||||
interface CardDataV2 {
|
||||
@@ -66,7 +66,6 @@ interface Card {
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
|
||||
const [cards, setCards] = useState<Card[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
|
||||
@@ -82,6 +81,9 @@ export default function Home() {
|
||||
const [altGreetingIndexById, setAltGreetingIndexById] = useState<
|
||||
Record<string, number>
|
||||
>({});
|
||||
const [mirrorsDialogOpen, setMirrorsDialogOpen] = useState(false);
|
||||
const [changelogDialogOpen, setChangelogDialogOpen] = useState(false);
|
||||
const [howToUseDialogOpen, setHowToUseDialogOpen] = useState(false);
|
||||
|
||||
const [proxyUrl, setProxyUrl] = useState(
|
||||
"https://sucker.severian.dev/api/proxy"
|
||||
@@ -364,222 +366,94 @@ export default function Home() {
|
||||
gtag('config', 'G-YVD6QFSR71');`}
|
||||
</Script>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Sucker v2.1</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Just some notes this time
|
||||
</p>
|
||||
{/* Mobile Layout */}
|
||||
<div className="sm:hidden mb-4">
|
||||
{/* Row 1: Title on left, Hamburger on right */}
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Sucker v2.2</h1>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Consider joining Avalon!
|
||||
</p>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setHowToUseDialogOpen(true)}>
|
||||
How to Use
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setMirrorsDialogOpen(true)}>
|
||||
Mirrors
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setChangelogDialogOpen(true)}>
|
||||
Changelog
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{/* Row 2: Full-width Refresh button */}
|
||||
<Button
|
||||
onClick={fetchCards}
|
||||
variant="outline"
|
||||
disabled={isRefreshing}
|
||||
className="w-full"
|
||||
>
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
{/* Collapsible infoboxes */}
|
||||
{[
|
||||
{
|
||||
title: "(Dec 2025) A note about fetching avatars",
|
||||
content: (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The platform you suck from has implemented limited visibility
|
||||
of metadata for certain content with a particular 'obscenity
|
||||
rating'. This means that in some cases, the Fetch Avatar flow
|
||||
here will show a 404 - character not found error at the end.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sometimes (but not always), the avatar URL can still be
|
||||
fetched after a day or two since the bot was published.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
As of this moment, can't really find a fix for it, so you'll
|
||||
have to download the image yourself and just add the image to
|
||||
the card someplace else.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title:
|
||||
"(Oct 2025) V2 charcard format, multi-turn support for scripts/lorebooks, alternate greetings.",
|
||||
content: (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sucker now tracks changes to character descriptions and
|
||||
scenarios across multiple messages. Cards with multiple versions
|
||||
show a version badge and offer a "Download Changes" button to
|
||||
get the change history.
|
||||
<br />
|
||||
Alternate greetings are also supported. Sucker will provide you
|
||||
with a conversation ID that you can use to start off a new chat
|
||||
when capturing alternate greetings, send it as first message
|
||||
instead of the character name.
|
||||
<br />
|
||||
Directions are updated below. Make sure you read 'em.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "List of mirrors",
|
||||
content: (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sucker goes down sometimes on severian.dev because I use the
|
||||
server for other stuff. Here's a full list of existing sucker
|
||||
instances (thanks to those who signed up for it!):
|
||||
</p>
|
||||
<ul className="text-sm flex flex-col sm:flex-row list-none">
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.severian.dev"
|
||||
>
|
||||
severian.dev
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.trashpanda.land"
|
||||
>
|
||||
trashpanda.land
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.hitani.me"
|
||||
>
|
||||
hitani.me
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://succ.portalnexus.link"
|
||||
>
|
||||
portalnexus.link
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.lemuria.dev"
|
||||
>
|
||||
lemuria.dev
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<br />
|
||||
If you're interested in hosting your own sucker instance, lmk
|
||||
via Discord: @lyseverian, I've made the GH repo private for
|
||||
now. Or send me a message if there's anything you think that
|
||||
could be added here, open to suggestions.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
].map((infobox, idx) => (
|
||||
<CollapsibleInfobox
|
||||
key={infobox.title}
|
||||
title={infobox.title}
|
||||
defaultOpen={false}
|
||||
>
|
||||
{infobox.content}
|
||||
</CollapsibleInfobox>
|
||||
))}
|
||||
|
||||
<Collapsible
|
||||
open={isInstructionsOpen}
|
||||
onOpenChange={setIsInstructionsOpen}
|
||||
className="w-full mb-8"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-semibold">How to Use</h2>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="w-9 p-0">
|
||||
{isInstructionsOpen ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Toggle instructions</span>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden sm:flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Sucker v2.2</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Consider joining Avalon!
|
||||
</p>
|
||||
</div>
|
||||
<CollapsibleContent className="mt-4">
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<p className="mb-2">
|
||||
Follow every instruction here to the letter because it's all you
|
||||
need to know and I have no intent of helping you further.
|
||||
</p>
|
||||
<ol className="list-decimal list-inside">
|
||||
<li className="mb-2">
|
||||
Put <code style={{ color: "#fff0b9" }}>{proxyUrl}</code> in
|
||||
your API settings, any value for model and key.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
REQUIRED: Set your custom prompt to{" "}
|
||||
<code style={{ color: "#fff0b9" }}><.></code>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
REQUIRED: Set your persona (or create a new one) with the name{" "}
|
||||
<code style={{ color: "#fff0b9" }}>{user}</code> and
|
||||
the description should only have{" "}
|
||||
<code style={{ color: "#fff0b9" }}>.</code> in it.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Save settings and refresh the page. Not this page. <i>That</i>{" "}
|
||||
page.
|
||||
</li>
|
||||
<li className="mb-2">Start a new chat with a character.</li>
|
||||
<li className="mb-2">
|
||||
Char name inference is implemented: if you send just a dot:{" "}
|
||||
<code style={{ color: "#fff0b9" }}>.</code>, sucker will use
|
||||
the inferred name from the persona tag, or you can send the
|
||||
character name yourself.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Hit the Refresh button here, and the cards should appear here.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
If you're interested in capturing alternate greetings, start a
|
||||
new chat and send the conversation ID as first message instead
|
||||
of the character name. The format is{" "}
|
||||
<code style={{ color: "#fff0b9" }}>
|
||||
[sucker:conv=conversationId]
|
||||
</code>{" "}
|
||||
which you'll be given when creating a new card.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
You can also send more messages with possible keywords to
|
||||
trigger scripts/lorebooks. Sucker will track changes to the
|
||||
description and scenario fields. Cards with multiple versions
|
||||
will show a version badge and offer a "Download Changes"
|
||||
button to get a detailed change history with timestamps.
|
||||
Unfortunately, lorebook creation is out of scope at the
|
||||
moment, but you can use the changes detected to modify the
|
||||
character card yourself post-export.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Download the JSON files or go through a little more effort to
|
||||
get PNGs instead.
|
||||
</li>
|
||||
</ol>
|
||||
<p className="mb-2">
|
||||
Extractions will only last for 10 minutes, after which they're
|
||||
discarded. Reloading the page will remove any attached avatars.
|
||||
I'm not storing shit.
|
||||
</p>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => setHowToUseDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
How to Use
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setMirrorsDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
Mirrors
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setChangelogDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
Changelog
|
||||
</Button>
|
||||
<Button
|
||||
onClick={fetchCards}
|
||||
variant="outline"
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
|
||||
{process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
|
||||
<DiscordBannerPermanent
|
||||
inviteLink="https://discord.gg/5jQKkCfHP3"
|
||||
serverName="Avalon"
|
||||
description="Looking for somewhere more... interesting? Avalon's an enchanted collective of botmakers who refuse to be boring 🌿 Come play with us~ (18+ only, darling)"
|
||||
ctaText="Join Server"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{cards.length === 0 ? (
|
||||
@@ -887,6 +761,234 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How to Use Dialog */}
|
||||
<Dialog open={howToUseDialogOpen} onOpenChange={setHowToUseDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>How to Use</DialogTitle>
|
||||
<DialogDescription>
|
||||
Follow every instruction here to the letter because it's all you
|
||||
need to know and I have no intent of helping you further.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<ol className="list-decimal list-inside space-y-3 text-sm">
|
||||
<li>
|
||||
Put <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">{proxyUrl}</code> in
|
||||
your API settings, any value for model and key.
|
||||
</li>
|
||||
<li>
|
||||
REQUIRED: Set your custom prompt to{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600"><.></code>
|
||||
</li>
|
||||
<li>
|
||||
REQUIRED: Set your persona (or create a new one) with the name{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">{user}</code> and
|
||||
the description should only have{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code> in it.
|
||||
</li>
|
||||
<li>
|
||||
Save settings and refresh the page. Not this page. <i>That</i>{" "}
|
||||
page.
|
||||
</li>
|
||||
<li>Start a new chat with a character.</li>
|
||||
<li>
|
||||
Char name inference is implemented: if you send just a dot:{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code>, sucker will use
|
||||
the inferred name from the persona tag, or you can send the
|
||||
character name yourself.
|
||||
</li>
|
||||
<li>
|
||||
Hit the Refresh button here, and the cards should appear here.
|
||||
</li>
|
||||
<li>
|
||||
If you're interested in capturing alternate greetings, start a
|
||||
new chat and send the conversation ID as first message instead
|
||||
of the character name. The format is{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">
|
||||
[sucker:conv=conversationId]
|
||||
</code>{" "}
|
||||
which you'll be given when creating a new card.
|
||||
</li>
|
||||
<li>
|
||||
You can also send more messages with possible keywords to
|
||||
trigger scripts/lorebooks. Sucker will track changes to the
|
||||
description and scenario fields. Cards with multiple versions
|
||||
will show a version badge and offer a "Download Changes"
|
||||
button to get a detailed change history with timestamps.
|
||||
Unfortunately, lorebook creation is out of scope at the
|
||||
moment, but you can use the changes detected to modify the
|
||||
character card yourself post-export.
|
||||
</li>
|
||||
<li>
|
||||
Download the JSON files or go through a little more effort to
|
||||
get PNGs instead.
|
||||
</li>
|
||||
</ol>
|
||||
<p className="mt-4 text-sm text-muted-foreground">
|
||||
Extractions will only last for 10 minutes, after which they're
|
||||
discarded. Reloading the page will remove any attached avatars.
|
||||
I'm not storing shit.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Mirrors Dialog */}
|
||||
<Dialog open={mirrorsDialogOpen} onOpenChange={setMirrorsDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Sucker Mirrors</DialogTitle>
|
||||
<DialogDescription>
|
||||
Sucker goes down sometimes on severian.dev because I use the
|
||||
server for other stuff. Here's a full list of existing sucker
|
||||
instances (thanks to those who signed up for it!):
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
<ul className="text-sm flex flex-col gap-2">
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.severian.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
severian.dev
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.trashpanda.land"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
trashpanda.land
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.hitani.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
hitani.me
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://succ.portalnexus.link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
portalnexus.link
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.lemuria.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
lemuria.dev
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-sm text-muted-foreground pt-4">
|
||||
If you're interested in hosting your own sucker instance, lmk
|
||||
via Discord: @lyseverian, I've made the GH repo private for
|
||||
now. Or send me a message if there's anything you think that
|
||||
could be added here, open to suggestions.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Changelog Dialog */}
|
||||
<Dialog open={changelogDialogOpen} onOpenChange={setChangelogDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Changelog</DialogTitle>
|
||||
<DialogDescription>
|
||||
Recent updates and changes to Sucker
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Jan 2026 - Direct image input</h3>
|
||||
<div className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>
|
||||
You can now paste webp filenames (like id.webp) or full image URLs
|
||||
directly into the avatar field without having to open the metadata tab first.
|
||||
</p>
|
||||
<p>
|
||||
Makes grabbing avatars way faster when you already know the image path.
|
||||
</p>
|
||||
<p>
|
||||
You should also consider joining our new thing, a Discord community server for botmakers:{" "}
|
||||
<a
|
||||
href="https://discord.gg/5jQKkCfHP3"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
discord.gg/5jQKkCfHP3
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Dec 2025 - A note about fetching avatars</h3>
|
||||
<div className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>
|
||||
The platform you suck from has implemented limited visibility
|
||||
of metadata for certain content with a particular 'obscenity
|
||||
rating'. This means that in some cases, the Fetch Avatar flow
|
||||
here will show a 404 - character not found error at the end.
|
||||
</p>
|
||||
<p>
|
||||
Sometimes (but not always), the avatar URL can still be
|
||||
fetched after a day or two since the bot was published.
|
||||
</p>
|
||||
<p>
|
||||
As of this moment, can't really find a fix for it, so you'll
|
||||
have to download the image yourself and just add the image to
|
||||
the card someplace else.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Oct 2025 - V2 charcard format, multi-turn support
|
||||
</h3>
|
||||
<div className="text-sm text-muted-foreground space-y-2">
|
||||
<p>
|
||||
Sucker now tracks changes to character descriptions and
|
||||
scenarios across multiple messages. Cards with multiple versions
|
||||
show a version badge and offer a "Download Changes" button to
|
||||
get the change history.
|
||||
</p>
|
||||
<p>
|
||||
Alternate greetings are also supported. Sucker will provide you
|
||||
with a conversation ID that you can use to start off a new chat
|
||||
when capturing alternate greetings, send it as first message
|
||||
instead of the character name.
|
||||
</p>
|
||||
<p>
|
||||
Directions are updated below. Make sure you read 'em.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
||||
Reference in New Issue
Block a user