Jump to content
Ethora's Community

Ethora nmp package (chat component) - alpha version

Recommended Posts

I'm happy to announce that our team has now completed the preliminary version of our first npm package.

It is called "ethora-chat-component" however here we are using a temporary name for testing purposes.

The design is also temporary.

The main idea behind "chat component" is to allow developers to quickly spin up a chat room and also to understand how this works.

For a long time now developers and builders have enjoyed an open source version of Ethora engine which you can get here on Github:



The problem however for developers is sometimes they prefer something simpler to start with, and often they would like to do more customizations or integrate smaller engine components into their existing app. 

We also deal with situations where developers need a lighter version of Ethora client, for example just chat or just digital wallet / profile or just an AI bot, either running as a stand-along web app, or embedded within their website as a widget or plugin.


Chat component is our first npm package that addresses those requirements. 


Just with a few lines of code like below you can spin up your own light weight version of Ethora - chat room functionality.

In later updates we will improve the chat component and we will also expose Digital Wallet and AI functionalities in a similar fashion via npm package(s). 


Using Ethora Chat Component - alpha version 24.07.03

1. npm create vite@latest
2. select name of project, select type (react/js)
3. cd project-name
4. npm i
5. npm i projecet-2-ccomp
6. go to file src/App.tsx and replace it with this code:

import { ChatWrapper as Chat } from "projecet-2-ccomp";
import { store } from "projecet-2-ccomp";
import { Provider } from "react-redux";
import "./App.css";

function App() {
 return (
  <Provider store={store}>
   <Chat MainComponentStyles={{ width: "100%" }} />

export default App;

7. run like this

npm run dev

8. Open http://localhost:5173/ in your browser

You will see something like this (ignore the temporary design - will get updated with our standard theme shortly):






9. for styling you can alter App.css
#root {
 width: 100%;
 margin: 0 auto;
 text-align: center;
and index.css
body {
 margin: 0;
 display: flex;
 place-items: center;
 min-width: 320px;
 min-height: 100vh;
 width: 100%;
after these changes you can modify MainComponentStyles for chat styling. 







Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...