Ethora nmp package (chat component) - alpha version

[TarasFilatov]

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:

https://github.com/dappros/ethora

 

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%" }} />
  </Provider>
 );
}

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):

 

 

 

 

EXTRA OPTIONS

 

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.