search

dappros / ethora-chat-component

NPM package "Ethora Chat Component". Quickly deploy a chat interface powered by Ethora super-app engine. Available via npm registry: https://www.npmjs.com/package/@ethora/chat-component
https://www.ethora.com
GNU Affero General Public License v3.0
2 stars 0 forks source link
chat javascript messaging messaging-library messaging-sdk npm npm-package npmjs react reactjs xmpp

readme

Ethora Chat Component: a single npm for your React chat

GitHub watchers GitHub forks GitHub Repo stars GitHub repo size GitHub language count GitHub top language GitHub commit activity (branch) GitHub issues GitHub closed issues GitHub GitHub contributors

JavaScript React TypeScript JWT

Discord Twitter URL Website YouTube Channel Subscribers

About Chat Component

Ethora Chat Component allows you to build a functioning chat room super quickly. Sounds simple and is easy to build your app with. Uses XMPP chat protocol and ejabberd chat server to provide your users with a seamless instant messaging experience.

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.

Enter Ethora Chat Component which allows you to quickly implement your chat room experience!

If / once you need additional functionalities you will have options like: (a) build them yourself on top of chat component; (b) peek into or use code from Ethora open-source monorepo https://github.com/dappros/ethora/ or (c) seek help from Ethora team or other developers at our forum: https://forum.ethora.com/ or Discord server: https://discord.gg/Sm6bAHA3ZC

Note: scroll below for use cases and functionality break down of this Chat Component.

How to build your chat room in 5 minutes

  1. npm create vite@latest
  2. specify a name for your project (e.g. "vite-project")
  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)
  1. cd vite-project (use your name instead of "vite-project")
  2. npm i
  3. npm i @ethora/chat-component
  4. go to file src/App.tsx and replace it with the below code
import { Chat } from "@ethora/chat-component";
import "./App.css";

function App() {
 return (
   <Chat />
 );
}

export default App;
  1. run like this
npm run dev

you should see something like this:

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

Voilà - your chat app should work like so:

ℹ️ 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. Leave this as is if you only need to demo or validate the chat functionality as part of your project. 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.

Extra options (styling etc)

To create custom chat room styles in App.tsx:

replace

<Chat />

with:

<Chat
    config={{
    disableHeader: true,
    disableMedia: true,
    colors: { primary: "#4287f5", secondary: "#42f5e9" },
    defaultLogin=true
    googleLogin: {
      firebaseConfig: config, //Ethora app config
      enabled: true,
    },
    }}
    MainComponentStyles={{
      width: "100%",
      height: "500px",
      borderRadius: "16px",
      border: "1px solid #42f5e9",
    }}
    roomJID=""
    user={{ email: "", password: "" }}
      disableHeader?: boolean;

    disableRooms: boolean;
    defaultLogin: boolean;
    disableInteractions: boolean; //disable interactions
    chatHeaderBurgerMenu: boolean; // disable burger menu in room header
    roomListStyles: React.CSSProperties; // used to change room List styles (left)
    chatRoomStyles: React.CSSProperties; // used to change room styles (right)
    setRoomJidInPath: boolean; // used to set RoomId to url
  />

ℹ️ Note: Add room and user which are registered at Ethora. After these changes - the pre-written user & room will be changed to yours.

ℹ️ Note: There is also a prop CustomMessageComponent: React.ComponentType This prop is used to fully change styles of messageBubble. You can find an example here: https://github.com/dappros/ethora-chat-component/blob/main/src/components/ExampleComponents/CustomMessage.tsx

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 your chat.

Use cases and functionalities details

LOGIN FUNCTIONALITY

Chat component includes an optional Login / Sign-on screen that allows you to login existing users or sign up new users. 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.

Supported out of the box:

Supported by Ethora platform but not implemented into Chat Component yet:

CHAT FUNCTIONALITY

"One room at a time - chat session"

"Multiple rooms - messenger / social app”

Misc core chat functionalities

Message interactions

Avatars (profile photos)

Notifications

FILE ATTACHMENTS

USER PROFILES AND DIGITAL WALLET FUNCTIONALITY

Contacts, Documentation and Technical Support