ZZZ Chat

---

A simple, but feature-rich chat simulation web-app for the DMs feature of the game Zenless Zone Zero, developed by miHoYo/HoYoVerse. Closely follows the in-game UI and design system.

Made with Vite with React SWC plugin, TailwindCSS and uses HTML2Canvas for image-exporting.

Features • Screenshots • Get Started • To-Do • Known Bugs • Contributing • Misc

---

Features

• Send messages as any character, through any side of the messaging system (left/right).
• A large number of pre-uploaded characters & NPCs.
  • filtered by factions
  • also features a search bar
• Edit & delete any message at any time.
• Add a custom avatar/profile picture & rename.
• Upload images in chat.
• Export images directly from the website, no need to screenshot.
• Export text in TXT & JSON format (images don't work).
• Group Chat: chat with and as multiple characters.
• Call Lucy a "golden damsel in distress".
• Send system messages, with pre-built customizable UI blocks.
• Works offline (once loaded) & locally without any server or DB connections.
  • your texts & uploaded media stay private (handled in localStorage)

_{erm... A baseball bat and a red pig just came flying and smashed my window, does anyone know where it came from?}

Screenshots

Main Chat UI	Character Selector
DMs	Group Chat

Get Started

Online Version

You can try it out at zzz-chat.auraa.moe. It is hosted on Cloudflare Pages and runs on a subdomain for my domain.

Build/run locally

1. Clone the repo: https://github.com/AKindWorld/ZZZ-Chat.git or you can use the GitHub Desktop app to directly clone with a GUI.

2. Run npm install

3. Run npm run dev or npm run host (to expose the application on your local network) or npm run build and then npm run preview (to build & serve it).

Open it on your localhost port to access it.

To-Do

• re-write the App.jsx code completely to break it down to components (currently it's over 1000 lines dumped in one file).
• add more system messages (like: User is typing..., choice blocks as in-game, Commission details, etc).
• add more characters & NPCs.
• redesign some UI components to make them directly follow the game's design system.
• add ContactBook feature like in-game, showing various Agent details.
• add one-click option for Clear chat.
• add Import JSON file and Import TXT file feature for previously exported chats.
• Add ability to customize Image exports, including size, file formats and more.
• Add option to save a chat in localStorage, as well as new interface for the same.

Known Bugs

• Animated Background doesn't work on mobile.
• Using the Wide Export option on mobile makes height of the image extremely large, even for small chats.
• Turning off Flashing Colors option still makes some parts of the UI flash.
• Switching from Group Chat to DMs crashes the app sometimes.

Contributing

• Code & Features: If you wanna contribute, please fork the repo & open a PR with your changes.
• Characters/NPC details: Please open a new issue with the characters' or NPCs' Name & Image/in-game profile pic, or DM me (see below).

Other than that, you can also help out by starring the repo. Thanks a lot ^^

Misc

I made this as I was bored and realized there wasn't any chat simulation project for ZZZ yet (or maybe I didn't know any).
So I decided to try it out with my (barely-passable) skills and it contributed to a good learning experience.
Implementing the game UI on web was very fun too.

I used Figma for breaking down the UI parts, recreating icons & patterns from scratch, and TailwindCSS classes & SVGs for implementing them in the web.

I'm glad if you used it and liked it, thank you very much. (^///^)
There is still a lot of work left, so I look forward to it a lot. (￣︶￣*))

For any queries/assistance/etc, contact me any time in Discord: auraolis or Reddit: u/FireWaterAirEarthMe. ^^