In-App Chat
Not every group will want to publish their emails / whatsapps publicly. Need multiple ways to get in touch (in-app, group comms, personal comms), tied / available to different access levels (public, groups on platform, collaborators, internal).
This can be expanded to support:
- group-to-group messaging
- multi-group messaging
- topic specific messaging (i.e. a multi-group chat that's automatically created / associated w/ each shipment)
NOTE: Please try to use Twilio's chat API, since we'll need to use their other APIs later for WhatsApp integration. Alternatively, if you'd prefer to build out the chat yourself there are a lot of great examples on how to do this in Elixir / Phoenix online. :)
Requested by:
- IHA
- Khora
Progress
-
PoC: Public chat. Implement a public chat for all users. Serves as a proof-of-concept for the implementation. -
Figure out how to load the Twilio Chat SDK from CDN with webpack -
use JWT for identity -
set up channels for other contexts, allow user to join them -
implement switching channels in the chat UI so this can be previewed. -
generate the tokens in the toolbox side. -
Generate extra contexts -
UI: inserted after </body>
-
UI: is not fixed to bottom -
Remove random
channel -
store chat tokens / refresh on UI (they are valid for 24 hours) -
Fix error on first sign in -
Include version number in chat UI for tracking bugs -
Remember "closed" channels -
Integrate StoryBook to show the UI components
End user Documentation
-
Where to put this?
Note: This documentation is for version 1.17.1 of the chat-ui.
Getting started
Enabling the chat for your browser
Note: The chat feature is hidden by default, and the following steps need to done only once, but for every browser you are using.
- Go to https://toolbox.distributeaid.org/
- Log in
- Open the browser console (by pressing F12).
- Copy the following line and paste it in the command line:
window.localStorage.setItem('DAChat:enabled', '1')
- Press Enter.
- Press F12 again to close the browser console.
- Reload the page.
The chat button will now show up.
Enabling the chat for your browser
Opening the chat
Click the blue chat icon to open the chat window.
Note: If this is the first time, it may take a few seconds to load the client, however this will only happen once, and cached so that on subsequent page loads the chat will be available immediately.
The chat window will open and you will be able to chat in the #general
and the #random
channel.
Failed to join channel "general"
Error on first connect: You may see an error message at the bottom of the chat UI:
This is known and on the todo list, simply reload the page and the error should go away.
Writing chat messages
Enter your message in the input field on the bottom, press enter or click the send icon.
You can delete messages by clicking the delete icon.
Switching channels
Click on the top bars to switch between your channels:
Leave a channel
Click the close icon to leave a channel. For now, the channel will be restored on the next page reload. You cannot leave the last remaining channel.
Minimize Chat
Click the minimize icon to minimize the chat UI:
Slash Commands
The chat supports slash commands which you run by typing /
and a command. Try /help
, it will list all available commands.