Chat Consultation

ChatConfig Object

For chat consultations, the consultation data will include the ChatConfig object This config data will be used to initiate and handle the chat between the user and the doctor

interface ChatConfig {
  id?: number;
  consultation_id?: number;
  group_id?: String;
  chat_user_id?: String;
  app_id?: String;
  chat_user_token?: String;
}

Initiating the chat service

First the chat service should be initiated using the AltibbiChat.init() method with the app_id from the ChatConfig object and an instance of GroupChannelModule

import {
  AltibbiChat,
  ConnectionHandler,
  GroupChannelHandler,
  GroupChannelModule,
  uploadMedia,
  GroupChannel,
} from 'react-native-altibbi';

const chatServiceInstance = AltibbiChat.init({
  appId: data.app_id,
  modules: [new GroupChannelModule()],
});

Adding Event Listeners and Handlers

You have to add some handler functions to the chatService channel, and there are two types of handlers GroupChannelHandler and ConnectionHandler.

Check the code below to see how the handlers should be declared and added to the chatService channel

ConnectionHandlers

const onConnected = () => {/*Connected*/};
const onReconnectStarted = () => {/*ReconnectStarted*/};
const onReconnectSucceeded = () => {/*ReconnectSucceeded*/};
const onReconnectFailed = () => {/*ReconnectFailed*/};
const onDisconnected = () => {/*Disconnected*/};

let connectionHandler = new ConnectionHandler({
  onConnected,
  onReconnectStarted,
  onReconnectSucceeded,
  onReconnectFailed,
  onDisconnected,
});

chatServiceInstance.addConnectionHandler('CHA_CONN', connectionHandler)

GroupChannelHandlers

const onUserJoined = () => {/*UserJoined*/};
const onUserLeft = () => {/*UserLeft*/};
const onTypingStatusUpdated = (groupChannel) => {
  /** You can use this listner to indicate that the other side is typing */
  let members = groupChannel.getTypingUsers();
  // Check if the members array contains the other member of the chat to indicate or view typing status
};

const onMessageReceived = (channel, message) => {
  /** Handle adding the recieved message to the messages list */
  /**
   The Message Structure
    {
      createdAt: message.createdAt,
      message: message.message,
      messageId: message.messageId,
      sender: message.sender.userId,
    }
  * */
};

let groupChannelHandler = new GroupChannelHandler({
  onUserJoined,
  onUserLeft,
  onTypingStatusUpdated,
  onMessageReceived,
});

chatServiceInstance.groupChannel.addGroupChannelHandler(
  'CHA_HAN',
  groupChannelHandler
);

Connecting The ChatService

After initiating the chat service and adding the helpers, the chat service should be connected

From the ChatConfig data you need to use chat_user_id and chat_user_token with connecting the service.

Check the code below:

chatServiceInstance.connect(data.chat_user_id, data.chat_user_token)

Loading All Channel Messages

After connecting the ChatService or at any exit and re-enter to the chat screen, you have to load the previous messages of the channel

From the ChatConfig data, the group_id represents the channelURL which is needed to load the previous messages

Check the code below:

// This channelURL will be the combination of 'channel_' with the group_id
const channelUrl = `channel_${data.group_id}`
const channel = await chatServiceInstance.groupChannel.getChannel(channelUrl);
const previousMessageListQuery = await channel.createPreviousMessageListQuery();
let allMessages = [];

while (previousMessageList.hasNext) {
  let newMsgArr = await previousMessageList.load();
  allMessages = [...allMessages, ...newMsgArr];
}

/** Now allMessages array represens all the messages in the channel */

Sending Messages

Now the chatService is initiated, connected and started. So you can start sending messages using sendUserMessage from the chatService instance with the message object that includes a message attribute

Check the code below:

/**
  We will skip the functionality of getting the message,
  you can use the TextInput and its functionality from react-native
 * */

const textMsg = "Message example"

chatServiceInstance.sendUserMessage({
  message: textMsg
}).onSucceeded((message) => {
  /** Add the message to the messagesList state */
}).onFailed((error,message) => {
  /** Handle the error by showing an alert or resend the message based on the error */
}).onPending(() => {
  /** This could be used to show the message is being sent, also could be ignored */
})

Sending media files (Pictures or PDFs)

You can send pictures and PDF files on the chat using the previously mentioned uploadMedia functionality

The process could be done using the uploadMedia and getting the url from the response and send it just as a text

Send User Typing

You can register an event to indicate typing status by using startTyping() and endTyping()

const channelUrl = `channel_${data.group_id}`
const channel = await chatServiceInstance.groupChannel.getChannel(channelUrl)
// When the user start typing in the TextInput
channel.startTyping()
// When the user stop typing
channel.endTyping()

Render Messages

Rendering messages could be done by the react-native FlatList. You can define the direction of messages according to chat_user_id from the ChatConfig data

For images or PDF files you can check if the message includes cdn or pdf

if (messsageItem.message.includes('cdn')) {
  // Render Image
} else if (messsageItem.message.includes('pdf')) {
  // Render PDF
} else {
  // Render Text
}