TarasFilatov Posted July 4 Posted July 4 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. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.