mirror of
https://github.com/severian-dev/sucker.severian.dev.git
synced 2026-02-22 00:41:54 +00:00
chore: 2.2
This commit is contained in:
Severian
5
.env.example
Normal file
5
.env.example
Normal file
@@ -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
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +1,4 @@
|
||||
node_modules
|
||||
.next
|
||||
.env.local
|
||||
.env*.local
|
||||
10
README.md
10
README.md
@@ -1,5 +1,14 @@
|
||||
# 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
|
||||
|
||||
Pull this repostory and build with `npm run build`. You can start the server with `node ./.next/standalone/server.js`
|
||||
@@ -8,6 +17,7 @@ You can also build and run Sucker as a Docker container with `docker compose bui
|
||||
|
||||
### Changelog
|
||||
|
||||
- 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.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.
|
||||
|
||||
263
package-lock.json
generated
263
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"@radix-ui/react-accordion": "^1.2.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.2",
|
||||
"@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-slot": "^1.1.1",
|
||||
"@types/react": "^19.2.7",
|
||||
@@ -59,6 +60,44 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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": {
|
||||
"version": "1.1.12",
|
||||
"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": {
|
||||
"version": "1.1.3",
|
||||
"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": {
|
||||
"version": "1.1.9",
|
||||
"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": {
|
||||
"version": "1.1.8",
|
||||
"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": {
|
||||
"version": "0.5.15",
|
||||
"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",
|
||||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
@@ -1306,7 +1559,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
@@ -1466,7 +1718,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
@@ -2078,7 +2329,6 @@
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
@@ -2376,7 +2626,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -2545,7 +2794,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
|
||||
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -2555,7 +2803,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
||||
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@@ -2851,7 +3098,6 @@
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
|
||||
"integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"arg": "^5.0.2",
|
||||
@@ -2961,7 +3207,6 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"@radix-ui/react-accordion": "^1.2.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.2",
|
||||
"@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-slot": "^1.1.1",
|
||||
"@types/react": "^19.2.7",
|
||||
|
||||
BIN
public/avalon/avalon-pfp.png
Normal file
BIN
public/avalon/avalon-pfp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
public/avalon/avalon-pfp.webp
Normal file
BIN
public/avalon/avalon-pfp.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
public/avalon/bg.webp
Normal file
BIN
public/avalon/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
public/avalon/morgana-thumb.png
Normal file
BIN
public/avalon/morgana-thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
public/avalon/morgana-thumb.webp
Normal file
BIN
public/avalon/morgana-thumb.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/avalon/trashpanda.webp
Normal file
BIN
public/avalon/trashpanda.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
520
src/app/page.tsx
520
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,13 +366,73 @@ 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">
|
||||
{/* 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-3xl font-bold">Sucker v2.1</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Just some notes this time
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<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"
|
||||
@@ -379,207 +441,19 @@ export default function Home() {
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</div>
|
||||
</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" />
|
||||
{/* 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"
|
||||
/>
|
||||
)}
|
||||
<span className="sr-only">Toggle instructions</span>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</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="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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
110
src/components/ui/discord-banner-permanent.tsx
Normal file
110
src/components/ui/discord-banner-permanent.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
interface DiscordBannerPermanentProps {
|
||||
inviteLink: string;
|
||||
serverName?: string;
|
||||
description?: string;
|
||||
ctaText?: string;
|
||||
}
|
||||
|
||||
export function DiscordBannerPermanent({
|
||||
inviteLink,
|
||||
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",
|
||||
}: DiscordBannerPermanentProps) {
|
||||
return (
|
||||
<div className="relative rounded-lg overflow-hidden shadow-lg mb-4 bg-[#36393f]">
|
||||
{/* 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">67 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>
|
||||
);
|
||||
}
|
||||
41
src/components/ui/dropdown-menu.tsx
Normal file
41
src/components/ui/dropdown-menu.tsx
Normal file
@@ -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