In this tutorial, we will learn how to build a Vue.js chat app using the ChatKitty API and vue-advanced-chat.

vue-advanced-chat is a feature-rich and highly customizable Vue chat component library designed to simplify the process of building modern, real-time chat applications. It provides a wide range of out-of-the-box features, including:

• Direct messaging and group chats
• Images, videos, files, voice messages, emojis and link previews
• Tag users & emojis shortcut suggestions
• Typing indicators
• Reactions with emojis and GIFs
• Markdown text formatting - bold, italic, strikethrough, underline, code, multiline, etc.
• Online presence indicators for online/offline users' status
• Delivery and read receipts
• Theming and customization options including light and dark theme modes
• Responsive design perfect for mobile

In addition, vue-advanced-chat is compatible with all Javascript frameworks (Vue, Angular, React, etc.) or no framework at all as a web component.

By using vue-advanced-chat alongside a chat API service like ChatKitty, developers can quickly create chat applications with minimal boilerplate code, while also benefiting from a user-friendly and customizable UI.

This library helps reduce the time and effort required to implement chat functionalities, allowing developers to focus on other aspects of their application. Moreover, its responsive design ensures the chat interface adapts to different screen sizes, making it suitable for web and mobile applications alike.

Prerequisites​

Before you start, make sure you have the following installed:

• Node.js
• npm (Node.js package manager)
• Vue 3

We'll begin by setting up the project and installing the necessary dependencies.

Setting up the project​

Create a new Vue.js project using the Vue CLI by running the following command:

npm init vue@latest

This command will install and execute the official Vue project scaffolding tool.

Next, navigate to the newly created project folder:

cd chatkitty-vue-example

Install dependencies​

Install the required packages using npm:

npm install @chatkitty/core vue-advanced-chat

Integrating the ChatKitty service​

Implementing date utility functions​

First, in the src create a new utils directory with a dates.ts file, add helper functions to parse and process ISO date-times returned by ChatKitty. The zeroPad function pads a number with leading zeros, while the isSameDay function checks if two dates are on the same day. The parseTimestamp function formats the timestamp based on the specified format, and the formatTimestamp function formats the timestamp based on whether it is on the same day as the current date.

const zeroPad = (num: number, pad: number) => {
  return String(num).padStart(pad, '0')
}

const isSameDay = (d1: Date, d2: Date) => {
  return (
    d1.getFullYear() === d2.getFullYear() &&
    d1.getMonth() === d2.getMonth() &&
    d1.getDate() === d2.getDate()
  )
}

export const parseTimestamp = (timestamp: string, format = '') => {
  if (!timestamp) return

  const date = new Date(timestamp)

  if (format === 'HH:mm') {
    return `${zeroPad(date.getHours(), 2)}:${zeroPad(date.getMinutes(), 2)}`
  } else if (format === 'DD MMMM YYYY') {
    const options: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric', day: 'numeric' }

    return `${new Intl.DateTimeFormat('en-GB', options).format(date)}`
  } else if (format === 'DD/MM/YY') {
    const options: Intl.DateTimeFormatOptions = {
      month: 'numeric',
      year: 'numeric',
      day: 'numeric'
    }

    return `${new Intl.DateTimeFormat('en-GB', options).format(date)}`
  } else if (format === 'DD MMMM, HH:mm') {
    const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' }

    return `${new Intl.DateTimeFormat('en-GB', options).format(date)}, ${zeroPad(
      date.getHours(),
      2
    )}:${zeroPad(date.getMinutes(), 2)}`
  }

  return date
}

export const formatTimestamp = (date: Date, timestamp: string) => {
  const timestampFormat = isSameDay(date, new Date()) ? 'HH:mm' : 'DD/MM/YY'
  const result = parseTimestamp(timestamp, timestampFormat)

  return timestampFormat === 'HH:mm' ? `Today, ${result}` : result
}

Implementing service functions​

Next, create a folder named chatkitty inside the src folder and create an index.ts file within it. Import the ChatKitty package and initialize the ChatKitty instance with your API key:

import ChatKitty from '@chatkitty/core';

export const chatkitty = ChatKitty.getInstance('YOUR_CHATKITTY_API_KEY');

In the src/chatkitty/index.ts file, we'll implement various functions for interacting with the ChatKitty API. These functions will handle entering and exiting chat rooms, fetching messages and rooms, user authentication, and sending messages.

Let's start by implementing functions to map ChatKitty users, channels, and messages into vue-advanced-chat objects.

• Implement the mapUser function to map a ChatKitty user to a vue-advanced-chat user

const mapUser = (user: User) => ({
  _id: user.name,
  username: user.displayName,
  avatar: user.displayPictureUrl,
  status: {
    state: user.presence.online ? 'online' : 'offline'
  },
  _user: user
})

• Implement the mapMessage function to map a ChatKitty message to a vue-advanced-chat message

const mapMessage = (message: Message, timeFormat?: string) => ({
  _id: message.id,
  content: message.type === 'TEXT' || message.type === 'SYSTEM_TEXT' ? message.body : undefined,
  senderId: message.type === 'TEXT' || message.type === 'FILE' ? message.user.name : 'system',
  username:
    message.type === 'TEXT' || message.type === 'FILE' ? message.user.displayName : 'System',
  timestamp: parseTimestamp(message.createdTime, timeFormat || 'HH:mm'),
  date: parseTimestamp(message.createdTime, 'DD MMMM YYYY'),
  _message: message
})

• Implement the mapChannel function to map a ChatKitty channel to a vue-advanced-chat room

const mapChannel = async (user: CurrentUser, channel: Channel) => ({
  roomId: channel.id,
  roomName:
    channel.type === 'DIRECT'
      ? channel.members
          .filter((member) => member.id !== user.id)
          .map((member) => member.displayName)
          .join(', ')
      : channel.name,
  users:
    channel.type === 'DIRECT'
      ? channel.members.map((member) => mapUser(member))
      : await (async () => {
          const result = await chatkitty.listChannelMembers({ channel })

          if (result.succeeded) {
            return result.paginator.items.map((member) => mapUser(member))
          }

          return []
        })(),
  lastMessage:
    channel.lastReceivedMessage && mapMessage(channel.lastReceivedMessage, 'DD MMMM, HH:mm'),
  _channel: channel,
  _messages_paginator: null,
  _chat_session: null
})

• Implement the login function to authenticate a user and start a ChatKitty session.

export const login = async (username: string) => {
  await chatkitty.startSession({ username })
};

• Implement the enterRoom function to enter a chat room and start a chat session.

export const enterRoom = async ({
  room,
  onMessageReceived,
  onRoomUpdated,
}: {
  room: any;
  onMessageReceived: (message: any) => void;
  onRoomUpdated: (room: any) => void;
}) => {
    const result = await chatkitty.startChatSession({
    channel: room._channel,
    onMessageReceived: (message) => {
      const mapped = mapMessage(message)

      room.lastMessage = mapped

      onMessageReceived(mapped)
      onRoomUpdated(room)
    }
  })

  if (result.succeeded) {
    room._chat_session = result.session
  }
};

• Implement the exitRoom function to exit a chat room and end the chat session.

export const exitRoom = (room: any) => {
  room._chat_session?.end?.()

  room._messages_paginator = null
  room._chat_session = null
};

• Implement the fetchMessages function to fetch messages for a chat room.

export const fetchMessages = async (room: any) => {
  if (room._messages_paginator) {
    const items = room._messages_paginator.items
      .map((message: Message) => mapMessage(message))
      .reverse()

    const hasMore = room._messages_paginator.hasNextPage

    if (hasMore) {
      room._messages_paginator = await room._messages_paginator.nextPage()
    }

    return { items, hasMore }
  }

  const result = await chatkitty.listMessages({ channel: room._channel })

  if (result.succeeded) {
    const items = result.paginator.items.map((message) => mapMessage(message)).reverse()

    const hasMore = result.paginator.hasNextPage

    if (hasMore) {
      room._messages_paginator = await result.paginator.nextPage()
    }

    return { items, hasMore }
  }

  return { items: [], hasMore: false }
};

• Implement the fetchRooms function to fetch a list of chat rooms.

export const fetchRooms = async () => {
  const user = chatkitty.currentUser

  if (!user) {
    return []
  }

  const result = await chatkitty.listChannels({ filter: { joined: true } })

  if (result.succeeded) {
    return await Promise.all(
      result.paginator.items.map(async (channel) => await mapChannel(user, channel))
    )
  }

  return []
};

• Implement the sendMessage function to send a message to a chat room.

export const sendMessage = async ({ room, content }: any) => {
  if (content) {
    await chatkitty.sendMessage({ channel: room._channel, body: content })
  }
};

• Implement the logout function to end the ChatKitty session.

export const logout = async () => {
  await chatkitty.endSession()
};

Creating the Chat component​

Create a new component directory in src and create a Vue component called ChatComponent.vue inside. In the <script> section of the component, import the ChatKitty service functions and the vue-advanced-chat package. Register the vue-advanced-chat web component before using it in the <template> section.

• In the src/components/ChatComponent.vue file, import the ChatKitty service functions and the vue-advanced-chat package.

<script setup lang="ts">
import * as chatService from '@/chatkitty';
import { register } from 'vue-advanced-chat';

register();
// ... implementation details
</script>

• Define the props for the ChatComponent component. These props include theme and username.

const props = defineProps<{
  theme: string;
  username: string;
}>();

• Create reactive references for rooms, roomsLoaded, loadingRooms, messages, messagesLoaded, and currentRoom. These references will be used to store and manage the state of the chat component.

const rooms: Ref<any[]> = ref([]);
const roomsLoaded = ref(false);
const loadingRooms = ref(false);

const messages: Ref<any[]> = ref([]);
const messagesLoaded = ref(false);

const currentRoom = ref(null);

• Implement the setup function to authenticate the user and fetch chat rooms.

const setup = async (username: string) => {
  await chatService.login(username);

  loadingRooms.value = true;
  rooms.value = await chatService.fetchRooms();
  loadingRooms.value = false;

  roomsLoaded.value = true;
};

• Implement the fetchMessages function to fetch messages for the selected chat room.

const fetchMessages = async ({ room, options = {} }: any) => {
  // ... implementation details
};

• Implement the sendMessage function to send a message to the current chat room.

const sendMessage = ({ content }: any) => {
  chatService.sendMessage({ room: currentRoom.value, content });
};

• Implement the tearDown function to log out the user and reset the state of the chat component.

const tearDown = async () => {
  await chatService.logout();

  rooms.value = [];
  roomsLoaded.value = false;
  loadingRooms.value = false;

  messages.value = [];
  messagesLoaded.value = false;
};

• Use the onMounted lifecycle hook to call the setup function when the component is mounted. Also, use the watch function to watch for changes in the username prop and update the chat component accordingly.

onMounted(async () => {
  await setup(props.username);

  watch(
    () => props.username,
    async (username) => {
      await tearDown();
      await setup(username);
    }
  );
});

• Define the template for the ChatComponent component. Use the vue-advanced-chat component and pass the necessary props and event listeners.

<template>
  <vue-advanced-chat
    height="calc(100vh - 100px)"
    :current-user-id="username"
    :theme="theme"
    :loading-rooms="loadingRooms"
    :rooms-loaded="roomsLoaded"
    :messages-loaded="messagesLoaded"
    :single-room="false"
    :show-search="false"
    :show-add-room="false"
    :show-files="false"
    :show-audio="false"
    :show-emojis="false"
    :show-reaction-emojis="false"
    .rooms="rooms"
    .messages="messages"
    @fetch-messages="fetchMessages($event.detail[0])"
    @send-message="sendMessage($event.detail[0])"
  />
</template>

Integrating the chat component into the main app​

Open the src/App.vue file and import the ChatComponent Vue component. Add the ChatComponent to the main app template and pass the necessary props, such as the theme and username.

• Open the src/App.vue file and import the ChatComponent.

import ChatComponent from './components/ChatComponent.vue';

• Create reactive references for theme and username. These references will be used to store the selected theme and username.

const theme = ref('light');
const username = ref(users[Math.floor(Math.random() * users.length

)].username);

• Define an array of users with their usernames and names. This array will be used to populate the user selection dropdown.

const users = [
  {
    username: 'b2a6da08-88bf-4778-b993-7234e6d8a3ff',
    name: 'Joni'
  },
  {
    username: 'abc4264d-f1b1-41c0-b4cc-1e9daadfc893',
    name: 'Penelope'
  },
  {
    username: 'c6f75947-af48-4893-a78e-0e0b9bd68580',
    name: 'Julie'
  },
  {
    username: '2989c53a-d0c5-4222-af8d-fbf7b0c74ec6',
    name: 'Paxton'
  },
  {
    username: '8fadc920-f3e6-49ff-9398-1e58b3dc44dd',
    name: 'Zaria'
  }
];

• Define the template for the App.vue component. Add the user selection dropdown, theme selection buttons, and the ChatComponent.

<template>
  <div class="app-container" :class="{ 'app-container-dark': theme === 'dark' }">
    <span class="user-logged" :class="{ 'user-logged-dark': theme === 'dark' }">
      Logged in as
    </span>
    <select v-model="username">
      <option v-for="user in users" :key="user.username" :value="user.username">
        {{ user.name }}
      </option>
    </select>

    <div class="button-theme">
      <button class="button-light" @click="theme = 'light'">Light</button>
      <button class="button-dark" @click="theme = 'dark'">Dark</button>
    </div>

    <ChatComponent :theme="theme" :username="username" />
  </div>
</template>

Styling the app​

Add custom styling to the src/App.vue file to make the app look more polished. You can use the provided styling or create your own.

<style lang="css">
body {
  margin: 0;
}

input {
  -webkit-appearance: none;
}

.app-container {
  font-family: 'Quicksand', sans-serif;
  padding: 30px;

  &.app-container-dark {
    background: #131415;
  }
}

.user-logged {
  font-size: 12px;
  margin-right: 5px;
  margin-top: 10px;

  &.user-logged-dark {
    color: #fff;
  }
}

select {
  height: 20px;
  outline: none;
  border: 1px solid #e0e2e4;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 20px;
}

.button-theme {
  float: right;
  display: flex;
  align-items: center;

  .button-light {
    background: #fff;
    border: 1px solid #46484e;
    color: #46484e;
  }

  .button-dark {
    background: #1c1d21;
    border: 1px solid #1c1d21;
  }

  button {
    color: #fff;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 12px;
    margin-left: 10px;
    border: none;
    font-size: 14px;
    transition: 0.3s;
    vertical-align: middle;

    &.button-github {
      height: 30px;
      background: none;
      padding: 0;
      margin-left: 20px;

      img {
        height: 30px;
      }
    }

    &:hover {
      opacity: 0.8;
    }

    &:active {
      opacity: 0.6;
    }

    @media only screen and (max-width: 768px) {
      padding: 3px 6px;
      font-size: 13px;
    }
  }
}
</style>

Conclusion​

In this tutorial, we built a simple Vue.js chat app using the ChatKitty API. We created a ChatKitty service to interact with the API, implemented a Chat component that uses the vue-advanced-chat package, and integrated the Chat component into the main app.

Now you have a fully functional chat app that supports direct messaging, group chat, message threads, and more. You can further customize the app by adding more features from the ChatKitty API or by modifying the UI components.

Happy chatting!

In today's fast-changing world, businesses need to stay on top of their game when it comes to customer engagement. With the rise of AI and large language models, chatbots have become an indispensable tool for businesses looking to improve their customer engagement strategies. However, building and managing chat code can be time-consuming and complicated, which is why we are thrilled to announce our new product that allows businesses to integrate and customize complex chat experiences without any hassle.

ChatKitty, the easiest way to build deploy chat​

When we founded ChatKitty in 2020, our goal was to create the easiest way to build chat for all types of businesses. We launched our REST API and JS SDKs to empower developers to build chat for online communication problems facing their users. However, as with all Chat API solutions currently in the market, it takes developers significant work and effort to integrate APIs and SDK function calls into their apps. Developers still need to read and understand deeply technical documentation, write a significant amount of code, and handle complex chat interactions. It also requires a lot of additional effort to integrate third-party functionality like emails, push notifications, SMS, and, yes, conversational AI chat -features that businesses building customer engagement platforms need.

We've begun building a comprehensive plug-and-play product that utilizes new technology to solve this problem in a unique and exciting way. We're building a server-side UI rendering engine that allows us to build UI and push it to user devices as HTML or native device views. Meaning we can build UI once, and our customers can use that UI in their apps without writing a single line of code. The "server-side frontend" product will produce UI for not only web apps but for native iOS and Android apps as well.

Opportunities for customer engagement conversational chat​

ChatKitty is a chat company, and we recognize the opportunities AI-powered chat creates for our customers. One area where AI has proven to be particularly useful is in the development of AI assistants. AI assistants are computer programs that use natural language processing and machine learning algorithms to interact with users and provide assistance with various tasks. Here are some of the benefits of integrating AI assistants into applications:

Reading and answering questions​

One of the most significant benefits of AI assistants is their ability to read and answer lead and customer inquiries. With advanced natural language processing capabilities, these assistants can understand and respond to user questions in seconds, providing instant solutions to their problems. This functionality is particularly useful in customer service and support, where timely and accurate responses are critical to customer satisfaction.

For example, by integrating a ChatGPT-powered chatbot into our demos, we have improved response times and provided potential customers with faster, more accurate solutions to their queries. Not only does this increase lead conversation, but it also reduces the workload on our lead generation team, allowing them to focus on more complex tasks.

Translation​

Another significant benefit of AI assistants is their ability to translate languages. With the global nature of business today, it is essential to communicate with customers and clients in their language. By integrating translation functionality into our applications, we can communicate effectively with customers regardless of their location or language.

Summarization​

Businesses can also use AI assistants to summarize large amounts of data quickly and efficiently. This functionality is handy for companies that deal with large volumes of data, such as market research or financial analysis. Automating the summarization process can save valuable time and resources, allowing us to focus on more critical tasks.

Customer support chatbots​

Perhaps one of the most significant benefits of AI assistants is their ability to provide customer support through chatbots. Chatbots can handle a wide range of customer inquiries, from basic product information to complex technical support. By automating the customer support process, we can provide 24/7 support, improve response times, and reduce costs.

Because language models ChatGPT can remember and integrate new information without retraining, we can easily customize the models for our specific company and business domain.

Chatbots can provide 24/7 availability, allowing customers to get answers to their questions at any time of day or night, regardless of if human agents are available. By automating responses to common customer inquiries, conversational AI helps reduce the workload of human agents, allowing them to focus on more complex customer issues. Chatbots can provide a cost-effective alternative to hiring and training additional customer service representatives. They can handle multiple customer inquiries simultaneously, reducing the need for additional staff. Ultimately, businesses can provide quick and efficient answers to customer inquiries, increasing customer satisfaction and loyalty.

The current state of AI and large language models​

I've been following the development of artificial neural networks for several years now. And the progress made by large language models like ChatGPT, GPT-3, and BERT over the past few years has been quite remarkable.

This breakthrough in the field of natural language processing opens up new opportunities for businesses building interactive user applications. By unlocking new abilities for language translation, chatbots, writing assistance, text summarization, and even code generation, language models like ChatGPT have the potential to transform the way we interact with non-human intelligent systems and reshape our society in ways not seen since the dawn of the internet, and the industrial revolution.

That ChatGPT can generate text so human-like may be unexpected given the way ChatGPT works. Like other language models in the Generative Pre-trained Transformer (GPT) family, ChatGPT uses a Transformer architecture. Transformer neural networks, first described by Google in 2017, are a type of deep learning architecture that has become increasingly popular in natural language processing tasks such as language translation and language modeling. Unlike traditional neural networks that process sequences of input data sequentially, Transformers are designed to process entire sequences of input data in parallel.

Before we can dive into the specifics of Transformers, we'll need to first discuss word embeddings.

Word embeddings​

Word embedding is a very interesting concept; it's worth spending a bit of time understanding what word embeddings are and why they are so important for how current state-of-the-art language models work. Before a sequence of text can go through a neural network and be processed, its tokens must be converted to a representation the network is able to understand. Like all neural networks, transformer language models represent inputs, features, and outputs as vectors of numbers (more precisely as arrays of floats). A word embedding is simply an efficient representation of a word or token as a numerical vector of certain length that captures some "meaning" of that word relative to other words in a language. With word embeddings, words that are used in similar contexts are represented closer to each other, than words which tend to used in different contexts.

Each dimension of the vector represents a different feature or aspect of the word. Word embeddings are typically learned from large amounts of text data using algorithms like Word2Vec or GloVe. Once trained, these embeddings can be used as input to neural networks for a variety of natural language processing tasks.

Word embeddings can be used to compare the meaning of words in different contexts, and to identify relationships between words. For example, if we have a vector for "cat" and a vector for "dog", we can measure the distance between these two vectors to determine how similar they are semantically. We can expect that the vectors for "dog" and "cat" be very similar, near a vector for "pet", while the vector for "car" should be quite different. In addition to representing words, word embeddings can also represent phrases, and the relationships between them. This makes it easier for neural networks to learn patterns and relationships between words, and is particularly useful when it comes to natural language processing tasks such as sentiment analysis, question answering, and machine translation.

Note that strictly, GPT models does not deal with words, but rather with tokens, which approximate to words. A token here refers to common sequence of text characters that can easily be assigned a meaning. A token might be a whole word like "cat", or meaningful fragments like "ing", or "ly", or "ed". Tokens make it easier for neural networks to understand compound or non-standard words, and even other languages. After "tokenizing" the input text, an embedding algorithm like Word2Vec then converts these tokens into embeddings.

Transformers​

The Transformer was introduced by Vaswani et al. in "Attention Is All You Need" and has quickly became one of the most popular architectures for NLP tasks. Language models are probability distributions over sequences of words (or tokens) in a language. This means their primary function is predicting the likelihood of a particular word being the next word for any sequence in the language.

For a language model to be good at predicting likely next words for a given sequence, it needs to be able to look back in the sequence to remember the context and the semantics of previously seen tokens, in other it needs memory. There are long-term dependencies of the beginning of meaningful sentences, at the end of a sentence. For example, to complete the sentence "Jack came to the pub to have a drink and I talk to ", we'd expect the next word in the sequence to be noun or a pronoun, "him", "her", etc.

However, the relevant piece of information is the word "Jack", all the way at the beginning of the sentence. A good language model needs to be able to remember "Jack", and return a probable next token associated with "Jack" in the language, "Jack came to the pub to have a drink and I talk to him". Without the ability to remember relevant context in a text sequence, the language model is likely to generate sentences that aren't meaningfully although syntactically valid (for example "Jack came to the pub to have a drink and I talk to John").

Attention​

In other to learn from massive dataset efficiently, and generate sequences of text, language models need a way of deciding which parts of input sequences are more important, thereby assigning different weights to different parts of the input (as numeric vectors). By assigning greater weight to certain parts of the input, the model can be thought of as "paying attention" to those parts.

The key innovation of the Transformer architecture is its so-called "self-attention" mechanism. Self-attention works by computing a score between every pair of elements in the input sequence. The score is computed by multiplying the vectors representing the two elements. The model then uses the scores to determine which elements it should "pay attention".

In addition to self-attention, the Transformer architecture also uses an encoder-decoder architecture, which enables the model to learn from input sequences of varying lengths. The encoder reads in the input sequence one element at a time and produces a vector representation of the entire sequence. The decoder then uses this vector representation to generate the output.

Original Transformer Architecture.
Image credit: Kindra Cooper/"OpenAI GPT-3: Everything You Need to Know"

By using self-attention and an encoder-decoder architecture, Transformer models like ChatGPT are capable of learning from large datasets and generating coherent sequences of text.

Integrating ChatGPT and beyond into our chat platform​

Last week, OpenAI introduced APIs for its ChatGPT and Whisper models, giving developers access to its state-of-the-art language and speech-to-text generative AI capabilities. The same day I was able to integrate ChatGPT as an AI assistant into an application powered by ChatKitty.

ChatKitty provides Chat Functions, an event-driven serverless framework for extending our platform to handles use-cases that even we can't imagine. With ChatGPT your AI assistant can help your users draft emails, write code, answer questions, translate messages, summarize chats, and much more.

I've written a guide to help developers get started integrating a ChatGPT powered AI assistant into apps.

Summary​

I'm excited about the opportunities created by AI-powered chat, for customer engagement and communication. The progress made by large language models using the Transformer architecture like ChatGPT, GPT-3, and BERT is truly remarkable, unlocking new abilities for language translation, chatbots, writing assistance, text summarization, and code generation. Although current large language models are far from perfect, with the help of AI-powered chat conversation, businesses can communicate with customers in a more natural and personalized way, improving engagement and providing better customer service. Issues regard AI safety, potential biases, hallucinations and non-factual results need to be considered, but I'm confident that with continued advances in AI, machine learning and natural language processing, AI-powered chat will be a powerful tool for businesses to engage with customers and increase customer satisfaction.

In this tutorial series, I'll be showing you how to build a functional and secure chat app using the latest React Native libraries, including Gifted Chat and the Expo framework, powered by the ChatKitty platform.

So far you learned how to use the Gifted Chat React Native library with ChatKitty's JavaScript SDK to build a full-featured chat screen with real-time messaging functionality into your app, adding screens for users to create public channels, discover new channels, and view their channels. In the third article of this series, you enhanced that chat experience by implementing in-app and push notifications to notify your users when chat events occur.

In this tutorial, you'll be building on the group chat experience you created adding direct messaging to allow users to communicate privately. You'll also be adding a few enhancements to the chat experience including typing indicators, and chat room presence notifications.

After reading this article, you will be able to:

1. Create direct channels for users to chat privately

2. Integrate Gifted Chat's in-built typing indicator and implement a custom more detailed indicator

3. Notify chat users when a user enters or leaves the chat from a chat screen

4. Allow users to leave chat channels they are no longer interested in

If you followed along the previous articles, you should already have the ChatKitty JavaScript SDK NPM package added to your Expo React Native project.

Before we begin, let's go over some terms we'll be using a lot in this article.

Direct channels​

Previously, we learned about ChatKitty chat channels, specifically public channels that users can discover and join, or be invited to join. Direct channels, on the other hand, let users have private conversations between up to 9 other users. New users cannot be added to a direct channel and there can only exist one direct channel between a set of users. Direct channels are perfect for one-off conversations that don't require an entire channel to discuss.

Entering a chat​

When a user starts a chat session and has no other active chat sessions in the session channel, the user has entered a chat. In other words, users who have entered a chat have at least one active chat session for that chat channel, and are active participants of the conversation. Active chat participants receive real-time messaging events, and are present to reply immediately.

Leaving a chat​

After a user ends a chat session and has no other active chat sessions in the session channel, the user has left a chat. Users leave a chat when there is no longer at least one active chat session for that chat channel, and are no longer active participants of the conversation. After leaving a chat, users begin to get notifications of events that happened in the chat while they are away.

Leaving a channel​

After a user joins a channel, the user becomes a channel member. Channel members can send messages in a channel, and receives messages and notifications related to the channel. If a user is no longer interested in a channel, the user can leave the channel and is no longer a channel member.

Okay, let's get started! 🏎️

Next, you'll be adding direct messaging functionality to your chat app.

Creating a direct messaging channel​

Edit the chatScreen.js screen file you previous created to destructure its navigation prop:

export default function ChatScreen({ route, navigation /* Add this */ }) {
  const { user } = useContext(AuthContext);
  const { channel } = route.params;

  // Unchanged
}

Now, you can customize your Gifted Chat message avatar to create or get a direct channel, and navigate the user to a new chat screen with the direct channel when it's pressed.

Define a new method renderAvatar to pass into your GiftedChat component:

import { Avatar, Bubble, GiftedChat } from 'react-native-gifted-chat';

// Unchanged

function renderAvatar(props) {
  return (
    <Avatar
      {...props}
      onPressAvatar={(avatarUser) => {
        chatkitty
          .createChannel({
            type: 'DIRECT',
            members: [{ id: avatarUser._id }]
          })
          .then((result) => {
            navigation.navigate('Chat', { channel: result.channel });
          });
      }}
    />
  );
}

Set the GiftedChat renderAvatar prop to the method you defined:

return (
  <GiftedChat
    messages={messages}
    onSend={handleSend}
    user={mapUser(user)}
    loadEarlier={loadEarlier}
    isLoadingEarlier={isLoadingEarlier}
    onLoadEarlier={handleLoadEarlier}
    renderBubble={renderBubble}
    renderAvatar={renderAvatar} /* Add this */
  />
);

After these changes, chatScreen.js should look like this:

import React, { useContext, useEffect, useState } from 'react';
import { Avatar, Bubble, GiftedChat } from 'react-native-gifted-chat';

import { chatkitty } from '../chatkitty';
import Loading from '../components/loading';
import { AuthContext } from '../context/authProvider';

export default function ChatScreen({ route, navigation }) {
  const { user } = useContext(AuthContext);
  const { channel } = route.params;

  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadEarlier, setLoadEarlier] = useState(false);
  const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
  const [messagePaginator, setMessagePaginator] = useState(null);

  useEffect(() => {
    const startChatSessionResult = chatkitty.startChatSession({
      channel: channel,
      onMessageReceived: (message) => {
        setMessages((currentMessages) =>
          GiftedChat.append(currentMessages, [mapMessage(message)])
        );
      }
    });

    chatkitty
      .listMessages({
        channel: channel
      })
      .then((result) => {
        setMessages(result.paginator.items.map(mapMessage));

        setMessagePaginator(result.paginator);
        setLoadEarlier(result.paginator.hasNextPage);

        setLoading(false);
      });

    return startChatSessionResult.session.end;
  }, [user, channel]);

  async function handleSend(pendingMessages) {
    await chatkitty.sendMessage({
      channel: channel,
      body: pendingMessages[0].text
    });
  };

  async function handleLoadEarlier() {
    if (!messagePaginator.hasNextPage) {
      setLoadEarlier(false);

      return;
    }

    setIsLoadingEarlier(true);

    const nextPaginator = await messagePaginator.nextPage();

    setMessagePaginator(nextPaginator);

    setMessages((currentMessages) =>
      GiftedChat.prepend(currentMessages, nextPaginator.items.map(mapMessage))
    );

    setIsLoadingEarlier(false);
  }

  function renderBubble(props) {
    return (
      <Bubble
        {...props}
        wrapperStyle={{
          left: {
            backgroundColor: '#d3d3d3'
          }
        }}
      />
    );
  }

  function renderAvatar(props) {
    return (
      <Avatar
        {...props}
        onPressAvatar={(avatarUser) => {
          chatkitty
            .createChannel({
              type: 'DIRECT',
              members: [{ id: avatarUser._id }]
            })
            .then((result) => {
              navigation.navigate('Chat', { channel: result.channel });
            });
        }}
      />
    );
  }

  if (loading) {
    return <Loading />;
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={handleSend}
      user={mapUser(user)}
      loadEarlier={loadEarlier}
      isLoadingEarlier={isLoadingEarlier}
      onLoadEarlier={handleLoadEarlier}
      renderBubble={renderBubble}
      renderAvatar={renderAvatar}
    />
  );
}

function mapMessage(message) {
  return {
    _id: message.id,
    text: message.body,
    createdAt: new Date(message.createdTime),
    user: mapUser(message.user)
  };
}

function mapUser(user) {
  return {
    _id: user.id,
    name: user.displayName,
    avatar: user.displayPictureUrl
  };
}

If you run the app now and go to a public chat screen, you should see:

Tapping a message avatar should take you to a new chat screen where you can have a direct private conversation.

ChatKitty doesn't expose unique names for direct channels, so we don't see a channel name in the app title bar. Let's create an appropriate name for the chat screen title.

Add a helper method channelDisplayName to the index.js file in the src/chatkitty/ directory:

export function channelDisplayName(channel) {
  if (channel.type === 'DIRECT') {
    return channel.members.map((member) => member.displayName).join(', ');
  } else {
    return channel.name;
  }
}

After this change, index.js should look like this:

import ChatKitty from '@chatkitty/core';

export const chatkitty = ChatKitty.getInstance('YOUR CHATKITTY API KEY HERE');

export function channelDisplayName(channel) {
  if (channel.type === 'DIRECT') {
    return channel.members.map((member) => member.displayName).join(', ');
  } else {
    return channel.name;
  }
}

You can now update your app to use a more readable channel display name.

Update homeStack.js in src/context to use the channelDisplayName method:

import { chatkitty, channelDisplayName } from '../chatkitty';

// Unchanged

<ChatStack.Screen
  name='Chat'
  component={ChatScreen}
  options={({ route }) => ({
    title: channelDisplayName(route.params.channel) /* Add this */
  })}
/>;

Also update browseChannelsScreen.js and homeScreen.js in src/screens to use the helper method:

import { chatkitty, channelDisplayName } from '../chatkitty';

// Unchanged

<List.Item
  title={channelDisplayName(item)} /* Add this */
  // Unchanged
/>;

Running the app now shows the display names of a direct channel's members in the title bar

Great! Now you can privately chat with other channel members. Now let's move on to enhancing your chat app's experience with a typing indicator.

Adding a typing indicator with Gifted Chat and ChatKitty​

The Gifted Chat React Native library saves you a lot of time when creating a chat UI. By providing a bunch of component props, you can customize the chat UI and implement chat features like typing indicators, using a chat service like ChatKitty.

You'll be using the isTyping Gifted Chat prop to display a typing indicator when another user is typing.

ChatKitty tracks the typing state of users sending typing keystrokes in a channel. You'll need to send typing keystrokes to ChatKitty to let it know when a user is typing. When starting a chat session, you can register handler methods with ChatKitty to handle chat events like when a user starts or stops typing, enters or leaves a chat, enters keystrokes, etc. You can track when a user starts and stops typing with ChatKitty handler methods, storing the current user typing in your component state. Using the typing user state, you can set Gifted Chat's isTyping prop to display the typing indicator.

Add a helper method handleInputTextChanged in chatScreen.js to send typing keystrokes to ChatKitty, so it can know when a user is typing:

function handleInputTextChanged(text) {
  chatkitty.sendKeystrokes({
    channel: channel,
    keys: text
  });
}

Next, on the GiftedChat component, set the onInputTextChanged prop to handleInputTextChanged.

return (
  <GiftedChat
    messages={messages}
    onSend={handleSend}
    user={mapUser(user)}
    loadEarlier={loadEarlier}
    isLoadingEarlier={isLoadingEarlier}
    onLoadEarlier={handleLoadEarlier}
    onInputTextChanged={handleInputTextChanged} /* Add this */
    renderBubble={renderBubble}
    renderAvatar={renderAvatar}
  />
);

ChatKitty is now able to know when your users start and stop typing.

Next, define a new state variable to track the current typing user.

export default function ChatScreen({ route, navigation }) {
  const { user } = useContext(AuthContext);
  const { channel } = route.params;

  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadEarlier, setLoadEarlier] = useState(false);
  const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
  const [messagePaginator, setMessagePaginator] = useState(null);
  const [typing, setTyping] = useState(null); /* Add this */

  // Unchanged
}

You can now register chat event handlers to control the typing state. Register both onTypingStarted and onTypingStopped in ChatKitty.startChatSession to set the typing state.

useEffect(() => {
  const startChatSessionResult = chatkitty.startChatSession({
    channel: channel,
    onMessageReceived: (message) => {
      setMessages((currentMessages) =>
        GiftedChat.append(currentMessages, [mapMessage(message)])
      );
    },
    onTypingStarted: (typingUser) => { /* Add this */
      if (typingUser.id !== user.id) {
        setTyping(typingUser);
      }
    },
    onTypingStopped: (typingUser) => { /* Add this */
      if (typingUser.id !== user.id) {
        setTyping(null);
      }
    }
  });

  // Unchanged
}, [user, channel]);

typing now holds the current typing user, so you can set the GiftedChat component isTyping prop to typing != null.

return (
  <GiftedChat
    messages={messages}
    onSend={handleSend}
    user={mapUser(user)}
    loadEarlier={loadEarlier}
    isLoadingEarlier={isLoadingEarlier}
    onLoadEarlier={handleLoadEarlier}
    onInputTextChanged={handleInputTextChanged}
    isTyping={typing != null} /* Add this */
    renderBubble={renderBubble}
    renderAvatar={renderAvatar}
  />
);

After these changes, chatScreen.js should look like this:

import React, { useContext, useEffect, useState } from 'react';
import { Avatar, Bubble, GiftedChat } from 'react-native-gifted-chat';

import { chatkitty } from '../chatkitty';
import Loading from '../components/loading';
import { AuthContext } from '../context/authProvider';

export default function ChatScreen({ route, navigation }) {
  const { user } = useContext(AuthContext);
  const { channel } = route.params;

  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadEarlier, setLoadEarlier] = useState(false);
  const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
  const [messagePaginator, setMessagePaginator] = useState(null);
  const [typing, setTyping] = useState(null);

  useEffect(() => {
    const startChatSessionResult = chatkitty.startChatSession({
      channel: channel,
      onMessageReceived: (message) => {
        setMessages((currentMessages) =>
          GiftedChat.append(currentMessages, [mapMessage(message)])
        );
      },
      onTypingStarted: (typingUser) => {
        if (typingUser.id !== user.id) {
          setTyping(typingUser);
        }
      },
      onTypingStopped: (typingUser) => {
        if (typingUser.id !== user.id) {
          setTyping(null);
        }
      }
    });

    chatkitty
      .listMessages({
        channel: channel
      })
      .then((result) => {
        setMessages(result.paginator.items.map(mapMessage));

        setMessagePaginator(result.paginator);
        setLoadEarlier(result.paginator.hasNextPage);

        setLoading(false);
      });

    return startChatSessionResult.session.end;
  }, [user, channel]);

  async function handleSend(pendingMessages) {
    await chatkitty.sendMessage({
      channel: channel,
      body: pendingMessages[0].text
    });
  }

  async function handleLoadEarlier() {
    if (!messagePaginator.hasNextPage) {
      setLoadEarlier(false);

      return;
    }

    setIsLoadingEarlier(true);

    const nextPaginator = await messagePaginator.nextPage();

    setMessagePaginator(nextPaginator);

    setMessages((currentMessages) =>
      GiftedChat.prepend(currentMessages, nextPaginator.items.map(mapMessage))
    );

    setIsLoadingEarlier(false);
  }

  function handleInputTextChanged(text) {
    chatkitty.sendKeystrokes({
      channel: channel,
      keys: text
    });
  }

  function renderBubble(props) {
    return (
      <Bubble
        {...props}
        wrapperStyle={{
          left: {
            backgroundColor: '#d3d3d3'
          }
        }}
      />
    );
  }

  function renderAvatar(props) {
    return (
      <Avatar
        {...props}
        onPressAvatar={(avatarUser) => {
          chatkitty
            .createChannel({
              type: 'DIRECT',
              members: [{ id: avatarUser._id }]
            })
            .then((result) => {
              navigation.navigate('Chat', { channel: result.channel });
            });
        }}
      />
    );
  }

  if (loading) {
    return <Loading />;
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={handleSend}
      user={mapUser(user)}
      loadEarlier={loadEarlier}
      isLoadingEarlier={isLoadingEarlier}
      onLoadEarlier={handleLoadEarlier}
      onInputTextChanged={handleInputTextChanged}
      isTyping={typing != null}
      renderBubble={renderBubble}
      renderAvatar={renderAvatar}
    />
  );
}

function mapMessage(message) {
  return {
    _id: message.id,
    text: message.body,
    createdAt: new Date(message.createdTime),
    user: mapUser(message.user)
  };
}

function mapUser(user) {
  return {
    _id: user.id,
    name: user.displayName,
    avatar: user.displayPictureUrl
  };
}

If you run your app now on a mobile, you should see a typing indicator when someone else starts typing.

Pretty cool! However, the out-of-the-box Gifted Chat typing indicator has a few limitations. Firstly, the in-built indicator doesn't work on Web, so if you deploy your Expo app on the Web, your users won't see this amazing feature. Secondly, although the in-built indicator lets your user know someone is typing, it doesn't tell your users who is typing. It would be nice if we could see the name of the user typing, since a group chat might have multiple active members possibly typing at a time.

Adding a detailed typing indicator​

Gifted Chat lets you add a custom footer to a chat using its renderFooter prop. Let's use this to render a detailed typing status message if a user is currently typing. This footer shows up on Web and gives your users more information.

• Start by importing StyleSheet and View from react-native, and Text from react-native-paper.

• Create a helper method renderFooter inside the chatScreen.js component.

• Define a styles object with styling for the footer <View/> component.

• Return a <View/> component nesting a <Text/> displaying the typing user if typing with the new styles or null otherwise.

• Lastly, on the GiftedChat component, set its renderFooter prop to the renderFooter method.

After these changes chatScreen.js should look like this:

import React, { useContext, useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Avatar, Bubble, GiftedChat } from 'react-native-gifted-chat';
import { Text } from 'react-native-paper';

import { chatkitty } from '../chatkitty';
import Loading from '../components/loading';
import { AuthContext } from '../context/authProvider';

export default function ChatScreen({ route, navigation }) {
  const { user } = useContext(AuthContext);
  const { channel } = route.params;

  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadEarlier, setLoadEarlier] = useState(false);
  const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
  const [messagePaginator, setMessagePaginator] = useState(null);
  const [typing, setTyping] = useState(null);

  useEffect(() => {
    const startChatSessionResult = chatkitty.startChatSession({
      channel: channel,
      onMessageReceived: (message) => {
        setMessages((currentMessages) =>
          GiftedChat.append(currentMessages, [mapMessage(message)])
        );
      },
      onTypingStarted: (typingUser) => {
        if (typingUser.id !== user.id) {
          setTyping(typingUser);
        }
      },
      onTypingStopped: (typingUser) => {
        if (typingUser.id !== user.id) {
          setTyping(null);
        }
      }
    });

    chatkitty
      .listMessages({
        channel: channel
      })
      .then((result) => {
        setMessages(result.paginator.items.map(mapMessage));

        setMessagePaginator(result.paginator);
        setLoadEarlier(result.paginator.hasNextPage);

        setLoading(false);
      });

    return startChatSessionResult.session.end;
  }, [user, channel]);

  async function handleSend(pendingMessages) {
    await chatkitty.sendMessage({
      channel: channel,
      body: pendingMessages[0].text
    });
  }

  async function handleLoadEarlier() {
    if (!messagePaginator.hasNextPage) {
      setLoadEarlier(false);

      return;
    }

    setIsLoadingEarlier(true);

    const nextPaginator = await messagePaginator.nextPage();

    setMessagePaginator(nextPaginator);

    setMessages((currentMessages) =>
      GiftedChat.prepend(currentMessages, nextPaginator.items.map(mapMessage))
    );

    setIsLoadingEarlier(false);
  }

  function handleInputTextChanged(text) {
    chatkitty.sendKeystrokes({
      channel: channel,
      keys: text
    });
  }

  function renderBubble(props) {
    return (
      <Bubble
        {...props}
        wrapperStyle={{
          left: {
            backgroundColor: '#d3d3d3'
          }
        }}
      />
    );
  }

  function renderAvatar(props) {
    return (
      <Avatar
        {...props}
        onPressAvatar={(avatarUser) => {
          chatkitty
            .createChannel({
              type: 'DIRECT',
              members: [{ id: avatarUser._id }]
            })
            .then((result) => {
              navigation.navigate('Chat', { channel: result.channel });
            });
        }}
      />
    );
  }

  function renderFooter() {
    if (typing) {
      return (
        <View style={styles.footer}>
          <Text>{typing.displayName} is typing</Text>
        </View>
      );
    }

    return null;
  }

  if (loading) {
    return <Loading />;
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={handleSend}
      user={mapUser(user)}
      loadEarlier={loadEarlier}
      isLoadingEarlier={isLoadingEarlier}
      onLoadEarlier={handleLoadEarlier}
      onInputTextChanged={handleInputTextChanged}
      renderBubble={renderBubble}
      renderAvatar={renderAvatar}
      renderFooter={renderFooter}
    />
  );
}

function mapMessage(message) {
  return {
    _id: message.id,
    text: message.body,
    createdAt: new Date(message.createdTime),
    user: mapUser(message.user)
  };
}

function mapUser(user) {
  return {
    _id: user.id,
    name: user.displayName,
    avatar: user.displayPictureUrl
  };
}

const styles = StyleSheet.create({
  footer: {
    paddingRight: 10,
    paddingLeft: 10,
    paddingBottom: 5
  }
});