@ethora/chat-component 24.10.16 → 24.10.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
Ethora Chat Component allows you to build a functioning chat room super quickly.
|
|
6
6
|
Sounds simple and is easy to build your app with.
|
|
7
|
-
Uses XMPP chat protocol and ejabberd chat server to provide your users with a seamless instant messaging experience.
|
|
7
|
+
Uses XMPP chat protocol and ejabberd chat server to provide your users with a seamless instant messaging experience.
|
|
8
8
|
|
|
9
9
|
Once you need more functionality however you will be pleasantly surprised. Our Ethora platform behind the chat component offers a plethora of functionalities around chat/social, user profiles, digital wallets, business documents exchange, digital collectables, web3 and AI bots. The history behind Chat Component is following. First, we have built a low-code “super app” engine called Ethora: https://github.com/dappros/ethora/ which we used to drastically speed up app development for our clients. Afterwards, we have open-sourced it for the benefit of other developers. Later on, we realized that whilst developers love what Ethora can do, many of them don’t need such a complex engine with all bells and whistles but a steep learning curver. In most cases you’re after a certain functionality (like a simple chat room) and you need it quick.
|
|
10
10
|
|
|
@@ -14,16 +14,15 @@ If / once you need additional functionalities you will have options like: (a) bu
|
|
|
14
14
|
|
|
15
15
|
Note: scroll below for use cases and functionality break down of this Chat Component.
|
|
16
16
|
|
|
17
|
-
|
|
18
17
|
## How to build your chat room in 5 minutes
|
|
19
18
|
|
|
20
19
|
1. npm create vite@latest
|
|
21
|
-
2. specify a name for your project (e.g. "vite-project")
|
|
20
|
+
2. specify a name for your project (e.g. "vite-project")
|
|
22
21
|
3. select framework and variant (for example, React -> Typescript but may be different depending on your project requirements, it will work with plain Javascript too)
|
|
23
22
|
|
|
24
|
-
<img src="
|
|
23
|
+
<img src="https://github.com/dappros/ethora-chat-component/blob/main/img/readme01.png" width="500" />
|
|
25
24
|
|
|
26
|
-
<img src="
|
|
25
|
+
<img src="https://github.com/dappros/ethora-chat-component/blob/main/img/readme02.png" width="500" />
|
|
27
26
|
|
|
28
27
|
4. cd vite-project _(use your name instead of "vite-project")_
|
|
29
28
|
5. npm i
|
|
@@ -44,31 +43,30 @@ export default App;
|
|
|
44
43
|
```
|
|
45
44
|
|
|
46
45
|
7. run like this
|
|
46
|
+
|
|
47
47
|
```
|
|
48
48
|
npm run dev
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
you should see something like this:
|
|
52
|
-
<br /><img src="
|
|
53
|
-
|
|
52
|
+
<br /><img src="https://github.com/dappros/ethora-chat-component/blob/main/img/readme03.png" width="350" />
|
|
54
53
|
|
|
55
54
|
8. Open http://localhost:5173/ in your browser
|
|
56
55
|
|
|
57
56
|
Voilà - your chat app should work like so:
|
|
58
57
|
|
|
59
|
-
<img src="
|
|
58
|
+
<img src="https://github.com/dappros/ethora-chat-component/blob/main/img/readme04.png" width="600" />
|
|
60
59
|
|
|
61
60
|
ℹ️ Note: your Ethora App, User and Chat credentials are hard-coded and login screen is bypassed. This is done so that you can scaffold and test the functionality quickly.
|
|
62
61
|
Leave this as is if you only need to demo or validate the chat functionality as part of your project.
|
|
63
|
-
If you need to have your own private chats, be able to login multiple users etc then go to https://www.ethora.com/, sign up in the top right which gives you a free account with Ethora backend where you can create your own App, manage your Users and Chats, view stats etc. Copy App ID & App Secret to your chat component code which will then switch to your own App context on the server side. The free tier is generous but should you need extra you can later build your own backend, upgrade to a paid tier from Ethora or use a self-hosted AWS marketplace image from Ethora.
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
If you need to have your own private chats, be able to login multiple users etc then go to https://www.ethora.com/, sign up in the top right which gives you a free account with Ethora backend where you can create your own App, manage your Users and Chats, view stats etc. Copy App ID & App Secret to your chat component code which will then switch to your own App context on the server side. The free tier is generous but should you need extra you can later build your own backend, upgrade to a paid tier from Ethora or use a self-hosted AWS marketplace image from Ethora.
|
|
66
63
|
|
|
67
64
|
## Extra options (styling etc)
|
|
68
65
|
|
|
69
66
|
To create custom chat room styles in **App.tsx**:
|
|
70
67
|
|
|
71
|
-
replace
|
|
68
|
+
replace
|
|
69
|
+
|
|
72
70
|
```
|
|
73
71
|
<Chat />
|
|
74
72
|
```
|
|
@@ -123,6 +121,7 @@ with:
|
|
|
123
121
|
}}
|
|
124
122
|
/>
|
|
125
123
|
```
|
|
124
|
+
|
|
126
125
|
ℹ️ Note: Add room and user which are registered at Ethora. After these changes - the pre-written user & room will be changed to yours.
|
|
127
126
|
|
|
128
127
|
For styling you can alter **App.css**:
|
|
@@ -150,77 +149,80 @@ body {
|
|
|
150
149
|
|
|
151
150
|
After these changes you can modify **MainComponentStyles** for your chat.
|
|
152
151
|
|
|
153
|
-
|
|
154
152
|
## Use cases and functionalities details
|
|
155
153
|
|
|
156
154
|
### LOGIN FUNCTIONALITY
|
|
157
155
|
|
|
158
|
-
Chat component includes an optional Login / Sign-on screen that allows you to login existing users or sign up new users.
|
|
156
|
+
Chat component includes an optional Login / Sign-on screen that allows you to login existing users or sign up new users.
|
|
159
157
|
In cases where chat component is embedded into your existing web or app experience, you would likely want to disable and bypass the login screen.
|
|
160
158
|
|
|
161
159
|
Supported out of the box:
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
160
|
+
|
|
161
|
+
- **Login bypass** (user credentials are passed from your existing backend) ✅
|
|
162
|
+
- **E-mail + password** ✅
|
|
163
|
+
- **Google SSO** ✅
|
|
165
164
|
|
|
166
165
|
Supported by Ethora platform but not implemented into Chat Component yet:
|
|
167
|
-
* **Custom set of credentials** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
168
|
-
* **Apple SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
169
|
-
* **Facebook SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
170
|
-
* **Metamask SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
171
166
|
|
|
167
|
+
- **Custom set of credentials** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
168
|
+
- **Apple SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
169
|
+
- **Facebook SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
170
|
+
- **Metamask SSO** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
172
171
|
|
|
173
172
|
### CHAT FUNCTIONALITY
|
|
174
173
|
|
|
175
174
|
#### "One room at a time - chat session"
|
|
176
175
|
|
|
177
|
-
|
|
178
|
-
|
|
176
|
+
- Use Case 1: **One global chat room for all users** ✅ - (e.g. chat lobby for all of your website / app users). Simply create a chat room manually and hardcode the UUID into your chat component code.
|
|
177
|
+
- Use Case 2: **One chat room per case** ✅ - (e.g. customer support session, AI bot, a chat room for each location or department, web page specific chat etc). You have to create rooms as required by your business logic via Ethora API and then pass the corresponding chat UUID into chat component. Your end User will see the corresponding room.
|
|
179
178
|
|
|
180
179
|
#### "Multiple rooms - messenger / social app”
|
|
181
180
|
|
|
182
|
-
|
|
183
|
-
Similar to Use Case 2, but also allows your User to switch to the **List of Chats** where they can see chat rooms, the count of new messages and a last message for -each room etc. Users can create new Chats and invite others into Chats (depending on your App settings). This functionality is available in full Ethora app but is currently "work in progress" for Chat Component.
|
|
181
|
+
- Use Case 3: **Users can switch between Chats** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub>
|
|
182
|
+
Similar to Use Case 2, but also allows your User to switch to the **List of Chats** where they can see chat rooms, the count of new messages and a last message for -each room etc. Users can create new Chats and invite others into Chats (depending on your App settings). This functionality is available in full Ethora app but is currently "work in progress" for Chat Component.
|
|
184
183
|
|
|
185
184
|
#### Misc core chat functionalities
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
185
|
+
|
|
186
|
+
- **Chat header** ✅ - Header with chat title and Users counter (this is optional and you can disable the header)
|
|
187
|
+
- **Message bubbles** ✅ - Message bubbles next to user avatars with message content and timestamp
|
|
188
|
+
- **Chat history caching and scrolling** ✅
|
|
189
|
+
- **Chat history date divider** ✅
|
|
190
|
+
- **Now typing** ✅ - when someone is typing, other room Users will see indication of who is typing
|
|
191
191
|
|
|
192
192
|
#### Message interactions
|
|
193
|
-
|
|
194
|
-
|
|
193
|
+
|
|
194
|
+
- **Message menu** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Long tap or right click opens message menu with "Reply", "Copy", "Edit", "Delete", "Report" options available as well as send Coin / Item options
|
|
195
|
+
- **Emoji Reactions** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Users are able to long tap / click on the message and send Emoji reactions to the message. Reactions are displayed in the corner of the message bubble.
|
|
195
196
|
|
|
196
197
|
#### Avatars (profile photos)
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
198
|
+
|
|
199
|
+
- **Basic avatars** ✅ - in chat screen, users can see basic avatars next to chat bubbles. Simply default avatar icon for everyone.
|
|
200
|
+
- **"Initials" avatars** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - in Chat scree, users who don't have photos uploaded will show as "initials" avatars generated by taking the first letter of User's first name and last name
|
|
201
|
+
- **Google SSO avatars** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - when using Google SSO, their Google profile photo will be automatically displayed as chat avatar
|
|
202
|
+
- **Custom profile photos** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - users are able to upload their custom photos when managing their Profile and the mini-photo will be displayed as a chat avatar
|
|
201
203
|
|
|
202
204
|
#### Notifications
|
|
203
|
-
* **Browser and mobile push notifications** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - push notifications are useful to alert the User about new messages or transactions related to them when they are not actively using your app / chat in the browser.
|
|
204
205
|
|
|
206
|
+
- **Browser and mobile push notifications** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - push notifications are useful to alert the User about new messages or transactions related to them when they are not actively using your app / chat in the browser.
|
|
205
207
|
|
|
206
208
|
### FILE ATTACHMENTS
|
|
207
209
|
|
|
208
|
-
|
|
210
|
+
- **File attachments** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - file attachments, previews, media attachments, audio/video player etc currently are work in progress for chat component
|
|
209
211
|
|
|
210
212
|
### USER PROFILES AND DIGITAL WALLET FUNCTIONALITY
|
|
211
213
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
214
|
+
- **Profile screen** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - users can see their own and other Users Profile screens by tapping their avatar in Chat. Profile includes Photo, name, description, direct message button and profile share link
|
|
215
|
+
- **Profile Assets (Digital Wallet)** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Users can view assets (Documents, art/collectables, Coins) within their own profile or profiles of other Users, depending on App-wide and User-specific visibility settings
|
|
216
|
+
- **Profile Asset: Coins** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Coins, Points, Stars (you can call this anything in your project) are a rewards system where Users and Bots can reward individual messages of other Users
|
|
217
|
+
- **Profile Asset: Documents** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Documents in Profiles support use cases where certain User (or bot / business page) need to display certain documents and their provenance history. E.g. business / educational / medical certificates, case-related documents, contracts etc.
|
|
218
|
+
- **Profile Asset: Media (audio, video) files** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - Media files playable right from Profiles.
|
|
219
|
+
- **Profile Asset: Digital Art (collectables / NFT)** 🚧 <sub><sup>(available in [Ethora git repo](https://github.com/dappros/ethora))</sup></sub> - For projects which support rewarding Users with unique digital collectables and/or allowing Users to upload/mint, distribute or trade digital art or collectables.
|
|
218
220
|
|
|
219
221
|
## Contacts, Documentation and Technical Support
|
|
220
|
-
* Community support forum: https://forum.ethora.com/
|
|
221
|
-
* Discord: https://discord.gg/Sm6bAHA3ZC
|
|
222
|
-
* Contact Ethora team: https://www.ethora.com/#contact
|
|
223
|
-
* Documentation main: https://docs.ethora.com/
|
|
224
|
-
* Documentation for Ethora API (Swagger): https://api.ethoradev.com/api-docs
|
|
225
|
-
* Documentation on github including chat protocol and bots: https://github.com/dappros/ethora/tree/main/api
|
|
226
222
|
|
|
223
|
+
- Community support forum: https://forum.ethora.com/
|
|
224
|
+
- Discord: https://discord.gg/Sm6bAHA3ZC
|
|
225
|
+
- Contact Ethora team: https://www.ethora.com/#contact
|
|
226
|
+
- Documentation main: https://docs.ethora.com/
|
|
227
|
+
- Documentation for Ethora API (Swagger): https://api.ethoradev.com/api-docs
|
|
228
|
+
- Documentation on github including chat protocol and bots: https://github.com/dappros/ethora/tree/main/api
|