Bubble Chat

Introduction

The Bubble chat package includes components you need to build a functioning chat user experience in React js with support for one to one and group chat.It uses Firebase as the backend service.

The Package takes care of the basic functionality requirements for any chat application. In this project We have used the following Firebase services.

• Firebase Authentication : For authentication user by email and password
• Firebase RealTime Database : It is the db we used for bubble chat
• Firebase Storage : That's we used to store images and videos

Main features

- One to one chat 
- Group chat
- Firebase authentication
- User listing
- User block - unblock
- User search
- Group create
- Group edit
- Group exit
- Message seen - unseen

Installation

To install Bubble chat on your project, follow below steps:

Step 1 - Install Bubble chat

Use the following command to install Bubble chat

$ npm install bubble-chat-web --save-exact

Step 2 - Firebase Registration

After a user is registered in the main project we need to register and add that user to bubble chat also, for that purpose, we can use firebaseSignUp function which can be imported from the bubble chat package and this function will return a Firebase uid which can be stored in the database of main project against the particular registered user.

import { firebaseSignUp } from 'bubble-chat-web';

const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

const userData = {
        name: data.name.trim(),
        email: data.email,
        phone: data.phonenumber.trim(),
        password: data.password,
        avatarRef: '',
        avatarSource: '',
        image: '',
      };

const firebaseData = await firebaseSignUp(userData, firebaseConfig);

Here in the firebaseSignUp function, we need to pass two arguments: userData which contains details of that person, and firebaseConfig which is the firebase configurations. The function returns the firebase uid of that particular person.

Step 3 - Firebase Login

After a user login into the main project, we need to log in that user to bubble chat also, for that purpose, we can use the firebaseLogin function which can be imported from the bubble chat package and this function will return a Firebase uid if the firebase login is successful.

import { firebaseLogin } from 'bubble-chat-web';

const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

const firebaseData = await firebaseLogin(email, password, firebaseConfig);

Here in the firebaseLogin function, we need to pass three arguments: email, password which is the email and password of the user we are trying to login and firebaseConfig which is the firebase configurations. The function returns the firebase uid of that particular person.

Step 4 - Package Loading

After the firebase authentication functions are implemented, finally we can load the chat component of bubble chat in our desired functional component in the main project, we can load the chat component by importing Chat from the bubble chat package and then render it.

import { Chat } from 'bubble-chat-web';

const [customStyle, setCustomStyle] = useState({
    primaryColor: '#39979d',
    secondaryColor: '#257176',
    chat_border_radius: '8px',
    chat_padding: '10px',
    icom_chat_color: '#ebebeb',
  });
  const [cond, setCond] = useState(false);
  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: '',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });
    <Chat
        firebaseConfig={firebaseConfig}
        conditional_listing={cond}
        styles={customStyle}
       />

While loading the Chat component of the bubble chat, we also needed to pass some data as props like firebase configurations and some basic styles like primary color, secondary color, chat bubbles styles, etc.

| prop | description | required | default | |-------------|-------------|-------------|-------------| | firebaseConfig | Firebase configuration details| true | None | | | conditional_listing | Conditional listing is used to decide whether the listing of users in bubble chat should conditional based or not. | true | None | | styles | The styles props can be used to set some basic styles of package like primary color, secondary color, chat bubbles styles, etc | true | None |

Styles

| style | description | required | default | |-------------|-------------|-------------|-------------| | primaryColor | Primary color of the bubble chat | true | None | | | secondaryColor | Secondary color of the bubble chat | true | None | | chat_border_radius | This style indicates the border radius of chat bubble | true | None | | chat_padding | This style indicates the paddings of chat bubble | true | None | | icom_chat_color | This style indicates the color of incoming messages chat bubble | true | None |

Conditional based user listing

If we want the user's list from which we can chat in bubble chat to be conditional based  like we only want to chat with other users who are our followers or friends, then we can use a conditional-based user listing, to activate conditional-based user listing we need to do two things:

• set conditional_listing to true while we load the chat component

  Example -

  const [cond, setCond] = useState(true);
   <Chat
     firebaseConfig={firebaseConfig}
     conditional_listing={cond}
     styles={customStyle}
    />

• While following or connecting to other users call the changeUserStatus function in the bubble chat package and pass the firebase uid's of the following user and followed user

  Example -

   import { changeUserStatus } from 'bubble-chat-web';

  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',
  
    authDomain: '',
  
    databaseURL: '',
  
   projectId: '',
  
   storageBucket: '',
  
   messagingSenderId: '',
  
   appId: '',
  
   measurementId: '',
  });
  
  const firebaseData = await changeUserStatus(current_user, friend, firebaseConfig);

  Here in the function changeUserStatus we need to pass three arguments:

  • current_user : firebase uid of the following user
  • friend : firebase uid of the followed user
  • firebaseConfig : firebase configurations