I haven't been able to find something like this already made, so I'm releasing one I created. This is pure HTML/CSS/Javascript. It does not require any fancy things like NodeJS, React, Vue, etc. Main goal is to be compatible with LAMP stack.
This is front-end GUI and code only! This does not include any real functionality to send and recieve messages to peers or servers. That is something you can incorporate in your own usage application. I had built a prototype version of this in 2023 to create a webapp for sending and recieving messages to AI Bots, using the APIs for OpenAI GPT and Google Gemini-Pro. The results were fantastic so I have rebuilt it from the ground up hoping to clean up the CSS and HTML so I can share it.
I did not implement the login screen, but it's there, and can be called like any other screen. I have it working in my PWA. The settings have no valid use in this demo.
+++++++++++++++++++++++++++++++++++++++++++++++++++
This is intended to run as a PWA (Progressive Web App) on smartphones. To activate PWA mode on your smartphone, it takes 3 steps.
- Visit the page on your smartphone
- Click the "Add to homescreen" option from the browser menu.
- Launch the webpage using your new homescreen shortcut.
In doing so, the page will will operate in a simular fashion to an app. It will have it's own icon, spashscreen, stay in portrait mode, and even run in fullscreen by hiding the browser's search/tab/options bar..
See this hosted (as is): https://jkdos.com/github/samples/javascript-messages
Live Implementation: https://jkdos.com/chat (Bring your own keys)
+++++++++++++++++++++++++++++++++++++++++++++++++++
Special thanks:
Romannurik - Converted some Unicode symbols to png for all the buttons. https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
MidJourney - Created the sample profile pictures and app icon. https://www.midjourney.com/