mirror of
https://github.com/severian-dev/sucker.severian.dev.git
synced 2026-10-18 01:20:29 +00:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Eslezer
|
64013ea5ea | ||
|
Eslezer
|
d7c8a9a008 | ||
|
Severian
|
225c2e3c4f | ||
|
Iseult
|
a66a46fc4a | ||
|
Iseult
|
d42d13e7f0 | ||
|
Severian
|
b252df5591 | ||
|
Ema P.
|
75a16b6ece | ||
|
Severian
|
d35d704ce1 |
@@ -0,0 +1,5 @@
|
|||||||
|
# Environment Variables for Sucker
|
||||||
|
|
||||||
|
# Disable Discord community banner (optional)
|
||||||
|
# Uncomment the line below to hide the Discord banner
|
||||||
|
# NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true
|
||||||
+3
-1
@@ -1,2 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
.next
|
.next
|
||||||
|
.env.local
|
||||||
|
.env*.local
|
||||||
@@ -1,5 +1,14 @@
|
|||||||
# Sucker
|
# Sucker
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
Add these to your `.env.local` file (optional):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Disable Discord community banner (defaults to showing banner)
|
||||||
|
NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true
|
||||||
|
```
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
Pull this repostory and build with `npm run build`. You can start the server with `node ./.next/standalone/server.js`
|
Pull this repostory and build with `npm run build`. You can start the server with `node ./.next/standalone/server.js`
|
||||||
@@ -8,6 +17,9 @@ You can also build and run Sucker as a Docker container with `docker compose bui
|
|||||||
|
|
||||||
### Changelog
|
### Changelog
|
||||||
|
|
||||||
|
- 2.4: CSS editor for Janitor profiles. New banner links to the live-preview editor at tools.from-avalon.com/janitor-profile-maker.
|
||||||
|
- 2.3: ECHO. Put ECHO: anywhere in a message and sucker repeats whatever comes after it in the reply — for triggering char-side script and lorebook keywords.
|
||||||
|
- 2.2: Added support for directly inputting webp file names or character image links when creating PNG character cards
|
||||||
- 2.1: updated deps, note about image fetching, list of mirrors
|
- 2.1: updated deps, note about image fetching, list of mirrors
|
||||||
- 2.0: from Tui: Multimessage support! Tracks changes to character descriptions and scenarios across multiple extractions. Shows version badges, message counts, and provides detailed change history viewer.
|
- 2.0: from Tui: Multimessage support! Tracks changes to character descriptions and scenarios across multiple extractions. Shows version badges, message counts, and provides detailed change history viewer.
|
||||||
- also 2.0: V2 charcard format and alternate greetings.
|
- also 2.0: V2 charcard format and alternate greetings.
|
||||||
|
|||||||
@@ -2,5 +2,6 @@ services:
|
|||||||
web:
|
web:
|
||||||
build: .
|
build: .
|
||||||
image: sucker
|
image: sucker
|
||||||
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- "3000:3000"
|
- "3000:3000"
|
||||||
Generated
+254
-9
@@ -11,6 +11,7 @@
|
|||||||
"@radix-ui/react-accordion": "^1.2.2",
|
"@radix-ui/react-accordion": "^1.2.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.2",
|
"@radix-ui/react-collapsible": "^1.1.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.4",
|
"@radix-ui/react-dialog": "^1.1.4",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-separator": "^1.1.1",
|
"@radix-ui/react-separator": "^1.1.1",
|
||||||
"@radix-ui/react-slot": "^1.1.1",
|
"@radix-ui/react-slot": "^1.1.1",
|
||||||
"@types/react": "^19.2.7",
|
"@types/react": "^19.2.7",
|
||||||
@@ -59,6 +60,44 @@
|
|||||||
"tslib": "^2.4.0"
|
"tslib": "^2.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/core": {
|
||||||
|
"version": "1.7.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
|
||||||
|
"integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/utils": "^0.2.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/dom": {
|
||||||
|
"version": "1.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
|
||||||
|
"integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/core": "^1.7.4",
|
||||||
|
"@floating-ui/utils": "^0.2.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react-dom": {
|
||||||
|
"version": "2.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
|
||||||
|
"integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/dom": "^1.7.5"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/utils": {
|
||||||
|
"version": "0.2.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||||
|
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@img/colour": {
|
"node_modules/@img/colour": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
|
||||||
@@ -766,6 +805,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-arrow": {
|
||||||
|
"version": "1.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||||
|
"integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-primitive": "2.1.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-collapsible": {
|
"node_modules/@radix-ui/react-collapsible": {
|
||||||
"version": "1.1.12",
|
"version": "1.1.12",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
|
||||||
@@ -966,6 +1028,35 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-dropdown-menu": {
|
||||||
|
"version": "2.1.16",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
|
||||||
|
"integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-menu": "2.1.16",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-focus-guards": {
|
"node_modules/@radix-ui/react-focus-guards": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
|
||||||
@@ -1024,6 +1115,96 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-menu": {
|
||||||
|
"version": "2.1.16",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
|
||||||
|
"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||||
|
"@radix-ui/react-focus-guards": "1.1.3",
|
||||||
|
"@radix-ui/react-focus-scope": "1.1.7",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-popper": "1.2.8",
|
||||||
|
"@radix-ui/react-portal": "1.1.9",
|
||||||
|
"@radix-ui/react-presence": "1.1.5",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-roving-focus": "1.1.11",
|
||||||
|
"@radix-ui/react-slot": "1.2.3",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"aria-hidden": "^1.2.4",
|
||||||
|
"react-remove-scroll": "^2.6.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
|
||||||
|
"version": "1.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||||
|
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@radix-ui/react-popper": {
|
||||||
|
"version": "1.2.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
|
||||||
|
"integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react-dom": "^2.0.0",
|
||||||
|
"@radix-ui/react-arrow": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||||
|
"@radix-ui/react-use-rect": "1.1.1",
|
||||||
|
"@radix-ui/react-use-size": "1.1.1",
|
||||||
|
"@radix-ui/rect": "1.1.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-portal": {
|
"node_modules/@radix-ui/react-portal": {
|
||||||
"version": "1.1.9",
|
"version": "1.1.9",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
|
||||||
@@ -1113,6 +1294,37 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-roving-focus": {
|
||||||
|
"version": "1.1.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
|
||||||
|
"integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-separator": {
|
"node_modules/@radix-ui/react-separator": {
|
||||||
"version": "1.1.8",
|
"version": "1.1.8",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
|
||||||
@@ -1262,6 +1474,48 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-use-rect": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/rect": "1.1.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@radix-ui/react-use-size": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@radix-ui/rect": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@swc/helpers": {
|
"node_modules/@swc/helpers": {
|
||||||
"version": "0.5.15",
|
"version": "0.5.15",
|
||||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||||
@@ -1296,7 +1550,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
|
||||||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.2.2"
|
"csstype": "^3.2.2"
|
||||||
}
|
}
|
||||||
@@ -1306,7 +1559,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^19.2.0"
|
"@types/react": "^19.2.0"
|
||||||
}
|
}
|
||||||
@@ -1466,7 +1718,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.9.0",
|
"baseline-browser-mapping": "^2.9.0",
|
||||||
"caniuse-lite": "^1.0.30001759",
|
"caniuse-lite": "^1.0.30001759",
|
||||||
@@ -2078,7 +2329,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"jiti": "bin/jiti.js"
|
"jiti": "bin/jiti.js"
|
||||||
}
|
}
|
||||||
@@ -2376,7 +2626,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"nanoid": "^3.3.11",
|
"nanoid": "^3.3.11",
|
||||||
"picocolors": "^1.1.1",
|
"picocolors": "^1.1.1",
|
||||||
@@ -2545,7 +2794,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
|
||||||
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
|
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -2555,7 +2803,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
||||||
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
|
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -2851,7 +3098,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
|
||||||
"integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
|
"integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@alloc/quick-lru": "^5.2.0",
|
"@alloc/quick-lru": "^5.2.0",
|
||||||
"arg": "^5.0.2",
|
"arg": "^5.0.2",
|
||||||
@@ -2961,7 +3207,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
"@radix-ui/react-accordion": "^1.2.2",
|
"@radix-ui/react-accordion": "^1.2.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.2",
|
"@radix-ui/react-collapsible": "^1.1.2",
|
||||||
"@radix-ui/react-dialog": "^1.1.4",
|
"@radix-ui/react-dialog": "^1.1.4",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-separator": "^1.1.1",
|
"@radix-ui/react-separator": "^1.1.1",
|
||||||
"@radix-ui/react-slot": "^1.1.1",
|
"@radix-ui/react-slot": "^1.1.1",
|
||||||
"@types/react": "^19.2.7",
|
"@types/react": "^19.2.7",
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@@ -93,6 +93,15 @@ function parseConversationToken(content: string | undefined | null): string | nu
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function parseEchoText(content: string | undefined | null): string | null {
|
||||||
|
if (!content) return null;
|
||||||
|
const match = content.match(/ECHO:\s*([\s\S]+)/i);
|
||||||
|
if (match && match[1].trim()) {
|
||||||
|
return match[1].trim();
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
function removePersonaTags(content: string): string {
|
function removePersonaTags(content: string): string {
|
||||||
let result = content;
|
let result = content;
|
||||||
const openingMatch = result.match(/<[^<>]+?\s*'s\s+Persona>/i);
|
const openingMatch = result.match(/<[^<>]+?\s*'s\s+Persona>/i);
|
||||||
@@ -487,6 +496,18 @@ export async function POST(request: NextRequest) {
|
|||||||
responseMessage = `New character "${extracted.data.name}" created (v1).${tokenNote}`;
|
responseMessage = `New character "${extracted.data.name}" created (v1).${tokenNote}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Echo back anything the user sent after an "ECHO:" marker in their
|
||||||
|
// latest message, appended after the normal status message
|
||||||
|
const lastUserMessage =
|
||||||
|
[...body.messages]
|
||||||
|
.reverse()
|
||||||
|
.find((m: { role?: string }) => m?.role === "user") ??
|
||||||
|
body.messages[body.messages.length - 1];
|
||||||
|
const echoText = parseEchoText(lastUserMessage?.content);
|
||||||
|
if (echoText) {
|
||||||
|
responseMessage += `\n\n${echoText}`;
|
||||||
|
}
|
||||||
|
|
||||||
cleanupExpiredCards();
|
cleanupExpiredCards();
|
||||||
|
|
||||||
// Return SSE response if requested, otherwise JSON
|
// Return SSE response if requested, otherwise JSON
|
||||||
@@ -528,7 +549,7 @@ export async function POST(request: NextRequest) {
|
|||||||
console.error("Error processing request:", error);
|
console.error("Error processing request:", error);
|
||||||
|
|
||||||
const errorMessage =
|
const errorMessage =
|
||||||
"You dingus, read the directions on sucker before trying again.";
|
"You dingus, read the directions on sucker before trying again. If you're trying to suck a bot with more tokens than your current context limit, try bumping your Context Size setting up on Generation Settings.";
|
||||||
|
|
||||||
// Check if this was a streaming request
|
// Check if this was a streaming request
|
||||||
const acceptHeader = request.headers.get("accept");
|
const acceptHeader = request.headers.get("accept");
|
||||||
|
|||||||
+420
-212
@@ -20,18 +20,20 @@ import {
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Png } from "@/lib/png";
|
import { Png } from "@/lib/png";
|
||||||
import {
|
import {
|
||||||
ChevronUp,
|
|
||||||
ChevronDown,
|
|
||||||
Copy,
|
Copy,
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
|
Menu,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import {
|
import {
|
||||||
CollapsibleContent,
|
DropdownMenu,
|
||||||
Collapsible,
|
DropdownMenuTrigger,
|
||||||
CollapsibleTrigger,
|
DropdownMenuContent,
|
||||||
} from "@/components/ui/collapsible";
|
DropdownMenuItem,
|
||||||
import { CollapsibleInfobox } from "@/components/ui/collapsible-infobox";
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
|
||||||
|
import { CssEditorBanner } from "@/components/ui/css-editor-banner";
|
||||||
|
import { BannerCarousel } from "@/components/ui/banner-carousel";
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
|
|
||||||
interface CardDataV2 {
|
interface CardDataV2 {
|
||||||
@@ -66,7 +68,6 @@ interface Card {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
|
|
||||||
const [cards, setCards] = useState<Card[]>([]);
|
const [cards, setCards] = useState<Card[]>([]);
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
|
const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
|
||||||
@@ -82,6 +83,9 @@ export default function Home() {
|
|||||||
const [altGreetingIndexById, setAltGreetingIndexById] = useState<
|
const [altGreetingIndexById, setAltGreetingIndexById] = useState<
|
||||||
Record<string, number>
|
Record<string, number>
|
||||||
>({});
|
>({});
|
||||||
|
const [mirrorsDialogOpen, setMirrorsDialogOpen] = useState(false);
|
||||||
|
const [changelogDialogOpen, setChangelogDialogOpen] = useState(false);
|
||||||
|
const [howToUseDialogOpen, setHowToUseDialogOpen] = useState(false);
|
||||||
|
|
||||||
const [proxyUrl, setProxyUrl] = useState(
|
const [proxyUrl, setProxyUrl] = useState(
|
||||||
"https://sucker.severian.dev/api/proxy"
|
"https://sucker.severian.dev/api/proxy"
|
||||||
@@ -364,222 +368,117 @@ export default function Home() {
|
|||||||
gtag('config', 'G-YVD6QFSR71');`}
|
gtag('config', 'G-YVD6QFSR71');`}
|
||||||
</Script>
|
</Script>
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="flex justify-between items-center mb-4">
|
{/* Mobile Layout */}
|
||||||
<div>
|
<div className="sm:hidden mb-4">
|
||||||
<h1 className="text-3xl font-bold">Sucker v2.1</h1>
|
{/* Row 1: Title on left, Hamburger on right */}
|
||||||
<p className="text-sm text-muted-foreground">
|
<div className="flex justify-between items-start mb-3">
|
||||||
Just some notes this time
|
<div>
|
||||||
</p>
|
<h1 className="text-2xl font-bold">Sucker v2.4</h1>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
ECHO: 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>
|
</div>
|
||||||
|
{/* Row 2: Full-width Refresh button */}
|
||||||
<Button
|
<Button
|
||||||
onClick={fetchCards}
|
onClick={fetchCards}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
disabled={isRefreshing}
|
disabled={isRefreshing}
|
||||||
|
className="w-full"
|
||||||
>
|
>
|
||||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Separator className="my-4" />
|
{/* Desktop Layout */}
|
||||||
{/* Collapsible infoboxes */}
|
<div className="hidden sm:flex justify-between items-center mb-4">
|
||||||
{[
|
<div>
|
||||||
{
|
<h1 className="text-3xl font-bold">Sucker v2.4</h1>
|
||||||
title: "(Dec 2025) A note about fetching avatars",
|
<p className="text-sm text-muted-foreground">
|
||||||
content: (
|
ECHO: Consider joining Avalon!
|
||||||
<>
|
</p>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<CollapsibleContent className="mt-4">
|
<div className="flex gap-2">
|
||||||
<div className="prose dark:prose-invert max-w-none">
|
<Button
|
||||||
<p className="mb-2">
|
onClick={() => setHowToUseDialogOpen(true)}
|
||||||
Follow every instruction here to the letter because it's all you
|
variant="outline"
|
||||||
need to know and I have no intent of helping you further.
|
>
|
||||||
</p>
|
How to Use
|
||||||
<ol className="list-decimal list-inside">
|
</Button>
|
||||||
<li className="mb-2">
|
<Button
|
||||||
Put <code style={{ color: "#fff0b9" }}>{proxyUrl}</code> in
|
onClick={() => setMirrorsDialogOpen(true)}
|
||||||
your API settings, any value for model and key.
|
variant="outline"
|
||||||
</li>
|
>
|
||||||
<li className="mb-2">
|
Mirrors
|
||||||
REQUIRED: Set your custom prompt to{" "}
|
</Button>
|
||||||
<code style={{ color: "#fff0b9" }}><.></code>
|
<Button
|
||||||
</li>
|
onClick={() => setChangelogDialogOpen(true)}
|
||||||
<li className="mb-2">
|
variant="outline"
|
||||||
REQUIRED: Set your persona (or create a new one) with the name{" "}
|
>
|
||||||
<code style={{ color: "#fff0b9" }}>{user}</code> and
|
Changelog
|
||||||
the description should only have{" "}
|
</Button>
|
||||||
<code style={{ color: "#fff0b9" }}>.</code> in it.
|
<Button
|
||||||
</li>
|
onClick={fetchCards}
|
||||||
<li className="mb-2">
|
variant="outline"
|
||||||
Save settings and refresh the page. Not this page. <i>That</i>{" "}
|
disabled={isRefreshing}
|
||||||
page.
|
>
|
||||||
</li>
|
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||||
<li className="mb-2">Start a new chat with a character.</li>
|
</Button>
|
||||||
<li className="mb-2">
|
</div>
|
||||||
Char name inference is implemented: if you send just a dot:{" "}
|
</div>
|
||||||
<code style={{ color: "#fff0b9" }}>.</code>, sucker will use
|
|
||||||
the inferred name from the persona tag, or you can send the
|
<Separator className="my-4" />
|
||||||
character name yourself.
|
|
||||||
</li>
|
{/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
|
||||||
<li className="mb-2">
|
{process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
|
||||||
Hit the Refresh button here, and the cards should appear here.
|
<>
|
||||||
</li>
|
{/* Desktop: banners side by side */}
|
||||||
<li className="mb-2">
|
<div className="hidden md:flex gap-4 mb-4 items-stretch">
|
||||||
If you're interested in capturing alternate greetings, start a
|
<DiscordBannerPermanent
|
||||||
new chat and send the conversation ID as first message instead
|
inviteLink="https://discord.gg/5jQKkCfHP3"
|
||||||
of the character name. The format is{" "}
|
serverName="Avalon"
|
||||||
<code style={{ color: "#fff0b9" }}>
|
description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
|
||||||
[sucker:conv=conversationId]
|
ctaText="Join Server"
|
||||||
</code>{" "}
|
className="flex-1 min-w-0"
|
||||||
which you'll be given when creating a new card.
|
/>
|
||||||
</li>
|
<CssEditorBanner className="flex-shrink-0 aspect-[16/10] w-[300px] lg:w-[360px] xl:w-[400px]" />
|
||||||
<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>
|
</div>
|
||||||
</CollapsibleContent>
|
|
||||||
</Collapsible>
|
{/* Mobile: carousel */}
|
||||||
|
<BannerCarousel
|
||||||
|
className="md:hidden mb-4"
|
||||||
|
slides={[
|
||||||
|
<DiscordBannerPermanent
|
||||||
|
key="avalon"
|
||||||
|
inviteLink="https://discord.gg/5jQKkCfHP3"
|
||||||
|
serverName="Avalon"
|
||||||
|
description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
|
||||||
|
ctaText="Join Server"
|
||||||
|
className="h-full"
|
||||||
|
/>,
|
||||||
|
<CssEditorBanner key="css" className="h-full" fit="contain" />,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="max-w-3xl mx-auto space-y-6">
|
<div className="max-w-3xl mx-auto space-y-6">
|
||||||
{cards.length === 0 ? (
|
{cards.length === 0 ? (
|
||||||
@@ -887,6 +786,315 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
Some advanced scripts and lorebooks only add their entries
|
||||||
|
when the <i>character</i> says the keyword, not you. Put{" "}
|
||||||
|
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">ECHO:</code>{" "}
|
||||||
|
in a message and everything after it gets repeated at the end
|
||||||
|
of the reply — instant character-side keywords, and sucker
|
||||||
|
tracks whatever gets added.
|
||||||
|
</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>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="text-yellow-600 hover:underline"
|
||||||
|
href="https://milker.ladyofpa.in/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
ladyofpa.in
|
||||||
|
</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">Sep 2026 - CSS Editor for Janitor profiles</h3>
|
||||||
|
<div className="space-y-2 text-sm text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
We'd like to introduce a CSS editor we have been working
|
||||||
|
on for Janitor profiles. It comes loaded with some simple
|
||||||
|
presets, and we plan to include more in the future, be it
|
||||||
|
ours or provided by the community. You can see changes occur
|
||||||
|
in live time and it should accurately represent the
|
||||||
|
behaviour of the CSS if used in your Janitor profile.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Check it out at{" "}
|
||||||
|
<a
|
||||||
|
href="https://tools.from-avalon.com/janitor-profile-maker/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-500 hover:underline"
|
||||||
|
>
|
||||||
|
tools.from-avalon.com/janitor-profile-maker
|
||||||
|
</a>{" "}
|
||||||
|
and DM eslezer on Discord if you have any bug or suggestion
|
||||||
|
for the editor.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg mb-2">Aug 2026 - ECHO</h3>
|
||||||
|
<div className="space-y-2 text-sm text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
Sucker can parrot now. Send a message with ECHO: in it, and
|
||||||
|
everything after that gets repeated back at the end of the
|
||||||
|
reply, exactly as you typed it.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The usual responses don't change at all — the echoed part
|
||||||
|
just tags along after them. The point: some of the fancier
|
||||||
|
scripts and lorebooks on the platform you suck from only add
|
||||||
|
their entries when the character says the keyword, not you.
|
||||||
|
ECHO plants your words on the character's side of the
|
||||||
|
chat, those entries fire, and sucker catches whatever they
|
||||||
|
sneak in. Case doesn't matter, echo: works too.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg mb-2">Mar 2026 - Better error messaging for context size issues</h3>
|
||||||
|
<div className="space-y-2 text-sm text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
Identified an issue where attempting to pull bots with token counts
|
||||||
|
greater than your configured context size would result in a dingus error
|
||||||
|
with no useful explanation.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Revised the error message to surface this more accurately. It now
|
||||||
|
tells you to bump your Context Size in Generation Settings if you
|
||||||
|
suspect this is the cause.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<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}>
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
|
|||||||
@@ -0,0 +1,85 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, ReactNode } from "react";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
|
interface BannerCarouselProps {
|
||||||
|
slides: ReactNode[];
|
||||||
|
intervalMs?: number;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BannerCarousel({
|
||||||
|
slides,
|
||||||
|
intervalMs = 8000,
|
||||||
|
className = "",
|
||||||
|
}: BannerCarouselProps) {
|
||||||
|
const [index, setIndex] = useState(0);
|
||||||
|
|
||||||
|
// Pick a random starting slide on the client to avoid hydration mismatch
|
||||||
|
useEffect(() => {
|
||||||
|
setIndex(Math.floor(Math.random() * slides.length));
|
||||||
|
}, [slides.length]);
|
||||||
|
|
||||||
|
// Re-keyed on index so a manual change restarts the countdown
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setTimeout(
|
||||||
|
() => setIndex((i) => (i + 1) % slides.length),
|
||||||
|
intervalMs
|
||||||
|
);
|
||||||
|
return () => clearTimeout(id);
|
||||||
|
}, [index, intervalMs, slides.length]);
|
||||||
|
|
||||||
|
const go = (delta: number) =>
|
||||||
|
setIndex((i) => (i + delta + slides.length) % slides.length);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`relative ${className}`}>
|
||||||
|
{/* Slides stacked in one grid cell so the container fits the tallest */}
|
||||||
|
<div className="grid">
|
||||||
|
{slides.map((slide, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`[grid-area:1/1] transition-opacity duration-500 ${
|
||||||
|
i === index ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||||
|
}`}
|
||||||
|
aria-hidden={i !== index}
|
||||||
|
>
|
||||||
|
{slide}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => go(-1)}
|
||||||
|
aria-label="Previous banner"
|
||||||
|
className="absolute left-1.5 top-1/2 -translate-y-1/2 rounded-full bg-black/50 hover:bg-black/70 text-white p-1 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => go(1)}
|
||||||
|
aria-label="Next banner"
|
||||||
|
className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full bg-black/50 hover:bg-black/70 text-white p-1 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5">
|
||||||
|
{slides.map((_, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIndex(i)}
|
||||||
|
aria-label={`Show banner ${i + 1}`}
|
||||||
|
className={`h-1.5 rounded-full transition-all ${
|
||||||
|
i === index ? "w-4 bg-white" : "w-1.5 bg-white/50"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
export interface CollapsibleInfoboxProps {
|
|
||||||
title: string;
|
|
||||||
children: React.ReactNode;
|
|
||||||
defaultOpen?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CollapsibleInfobox({
|
|
||||||
title,
|
|
||||||
children,
|
|
||||||
defaultOpen = false,
|
|
||||||
className = "",
|
|
||||||
}: CollapsibleInfoboxProps) {
|
|
||||||
const [open, setOpen] = useState(defaultOpen);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4 ${className}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="flex items-center justify-between cursor-pointer"
|
|
||||||
onClick={() => setOpen((v) => !v)}
|
|
||||||
>
|
|
||||||
<span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
|
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="w-9 p-0"
|
|
||||||
tabIndex={-1}
|
|
||||||
type="button"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setOpen((v) => !v);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{open ? (
|
|
||||||
<ChevronUp className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<ChevronDown className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
<span className="sr-only">Toggle {title}</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{open && <div className="mt-2">{children}</div>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
interface CssEditorBannerProps {
|
||||||
|
href?: string;
|
||||||
|
className?: string;
|
||||||
|
/** "contain" letterboxes the video so its caption is never cropped */
|
||||||
|
fit?: "cover" | "contain";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CssEditorBanner({
|
||||||
|
href = "https://tools.from-avalon.com/janitor-profile-maker/",
|
||||||
|
className = "",
|
||||||
|
fit = "cover",
|
||||||
|
}: CssEditorBannerProps) {
|
||||||
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
// Browsers like Opera GX overlay pop-out controls on large <video> elements.
|
||||||
|
// The real video stays 1px and invisible; its frames are painted onto a canvas.
|
||||||
|
useEffect(() => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
const ctx = canvas?.getContext("2d");
|
||||||
|
if (!video || !canvas || !ctx) return;
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
canvas.width = Math.round(canvas.clientWidth * dpr);
|
||||||
|
canvas.height = Math.round(canvas.clientHeight * dpr);
|
||||||
|
};
|
||||||
|
resize();
|
||||||
|
const observer = new ResizeObserver(resize);
|
||||||
|
observer.observe(canvas);
|
||||||
|
|
||||||
|
let frame = 0;
|
||||||
|
const draw = () => {
|
||||||
|
const vw = video.videoWidth;
|
||||||
|
const vh = video.videoHeight;
|
||||||
|
const cw = canvas.width;
|
||||||
|
const ch = canvas.height;
|
||||||
|
if (vw && vh && cw && ch) {
|
||||||
|
const scale =
|
||||||
|
fit === "contain"
|
||||||
|
? Math.min(cw / vw, ch / vh)
|
||||||
|
: Math.max(cw / vw, ch / vh);
|
||||||
|
const w = vw * scale;
|
||||||
|
const h = vh * scale;
|
||||||
|
ctx.clearRect(0, 0, cw, ch);
|
||||||
|
ctx.drawImage(video, (cw - w) / 2, (ch - h) / 2, w, h);
|
||||||
|
}
|
||||||
|
frame = requestAnimationFrame(draw);
|
||||||
|
};
|
||||||
|
frame = requestAnimationFrame(draw);
|
||||||
|
|
||||||
|
// Browsers may pause muted videos they consider hidden; keep it looping.
|
||||||
|
const resume = () => {
|
||||||
|
if (video.paused && document.visibilityState === "visible") {
|
||||||
|
video.play().catch(() => {});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
resume();
|
||||||
|
video.addEventListener("pause", resume);
|
||||||
|
document.addEventListener("visibilitychange", resume);
|
||||||
|
const keepAlive = setInterval(resume, 1000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelAnimationFrame(frame);
|
||||||
|
observer.disconnect();
|
||||||
|
clearInterval(keepAlive);
|
||||||
|
video.removeEventListener("pause", resume);
|
||||||
|
document.removeEventListener("visibilitychange", resume);
|
||||||
|
};
|
||||||
|
}, [fit]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Open the Janitor profile CSS editor"
|
||||||
|
className={`block relative rounded-lg overflow-hidden shadow-lg bg-black ${className}`}
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src="/avalon/css-banner.mp4"
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
disablePictureInPicture
|
||||||
|
preload="auto"
|
||||||
|
aria-hidden
|
||||||
|
className="absolute top-0 left-0 w-px h-px opacity-[0.01] pointer-events-none"
|
||||||
|
/>
|
||||||
|
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
interface DiscordBannerPermanentProps {
|
||||||
|
inviteLink: string;
|
||||||
|
serverName?: string;
|
||||||
|
description?: string;
|
||||||
|
ctaText?: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DiscordBannerPermanent({
|
||||||
|
inviteLink,
|
||||||
|
serverName = "Avalon",
|
||||||
|
description = "Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:",
|
||||||
|
ctaText = "Join Server",
|
||||||
|
className = "mb-4",
|
||||||
|
}: DiscordBannerPermanentProps) {
|
||||||
|
return (
|
||||||
|
<div className={`relative rounded-lg overflow-hidden shadow-lg bg-[#36393f] ${className}`}>
|
||||||
|
{/* Background Image */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<Image
|
||||||
|
src="/avalon/bg.webp"
|
||||||
|
alt="Background"
|
||||||
|
fill
|
||||||
|
className="object-cover opacity-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative p-3 sm:p-4">
|
||||||
|
{/* Chat Message Style */}
|
||||||
|
<div className="flex gap-3 mb-2">
|
||||||
|
{/* Morgana Avatar */}
|
||||||
|
<div className="flex-shrink-0 pt-0.5">
|
||||||
|
<Image
|
||||||
|
src="/avalon/morgana-thumb.webp"
|
||||||
|
alt="Morgana"
|
||||||
|
width={40}
|
||||||
|
height={40}
|
||||||
|
className="rounded-full w-10 h-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Content */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-baseline gap-2 mb-0.5">
|
||||||
|
<span className="text-white font-medium text-[15px]">Morgana</span>
|
||||||
|
<span className="text-[#a3a6aa] text-[11px] font-medium">Today at {new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-[#dcddde] text-[15px] leading-[1.375rem] mb-2">
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Server Invite Embed */}
|
||||||
|
<div className="bg-[#2f3136] rounded border-l-4 border-[#5865F2] overflow-hidden max-w-[432px]">
|
||||||
|
<div className="p-4 pb-3">
|
||||||
|
<div className="text-[#00b0f4] text-xs font-semibold uppercase mb-2">
|
||||||
|
You've been invited to join a server
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Image
|
||||||
|
src="/avalon/avalon-pfp.webp"
|
||||||
|
alt="Avalon"
|
||||||
|
width={50}
|
||||||
|
height={50}
|
||||||
|
className="rounded-2xl w-[50px] h-[50px] flex-shrink-0"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-white font-semibold text-base mb-0.5">{serverName}</div>
|
||||||
|
<div className="text-[#b9bbbe] text-sm space-y-0.5">
|
||||||
|
<div className="font-medium">885 members</div>
|
||||||
|
<a
|
||||||
|
href="https://from-avalon.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[#00aff4] hover:underline text-xs inline-block"
|
||||||
|
>
|
||||||
|
from-avalon.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={inviteLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="bg-[#248046] hover:bg-[#1a6334] text-white px-4 py-2 text-sm rounded font-medium transition-colors flex-shrink-0"
|
||||||
|
>
|
||||||
|
{ctaText}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trash Panda Icon - Bottom Right */}
|
||||||
|
<div className="absolute bottom-1.5 right-1.5">
|
||||||
|
<Image
|
||||||
|
src="/avalon/trashpanda.webp"
|
||||||
|
alt=""
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="rounded-full w-5 h-5 ring-1 ring-black/20 opacity-60 hover:opacity-100 transition-opacity"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className = "", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={`z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
));
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className = "", inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={`relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${
|
||||||
|
inset ? "pl-8" : ""
|
||||||
|
} ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };
|
||||||
Reference in New Issue
Block a user