Forem: Sapnesh Naik

How to Add a Real-time Unread Conversation Counter to a TalkJS Chat

Sapnesh Naik — Wed, 04 Aug 2021 07:19:37 +0000

In this tutorial, we’ll learn how to add a real-time unread conversations counter for TalkJS Inbox using the TalkJS Session. We will do this by registering an event handler to listen for unread conversations and render the counter accordingly on a web page.

Setting up a Session

A TalkJS Session represents a user’s active browser tab. The Session is also responsible for authenticating users and your application with TalkJS.

Here, we create a TalkJs user and bind that user to an Inbox instance using the TalkJs Session. Let’s define a TalkJS session using the new Talk.Session(options) constructor and pass our appID and User object.

var user = new Talk.User({
    id: "124582", //unique ID for a new user or an existing user's ID
    name: "Chris Pratt",
    email: "chris@example.com",
    photoUrl: "https://i.picsum.photos/id/1025/4951/3301.jpg",
    welcomeMessage: "Hey there,welcome to TalkJS!",
    role: "default"
});

window.talkSession = new Talk.Session({
    appId: "APP_ID", // replace this with your real APP ID
    me: user
});

After setting up the Session, it is now time to create a TalkJS inbox so that our user can chat with other TalkJS users.

var inbox = talkSession.createInbox();
// Mount TalkJS Inbox to a Div with id "talkjs-container"
inbox.mount(document.getElementById("talkjs-container"));

Note: Other than plain JavaScript, TalkJs SDK supports Vue, Angular, and React. And the API will be the same across these frameworks. You can check out our docs for more information.

Listening for Unread Conversation Changes

Now that our Inbox is set up, we can start listening for any unread conversations. This is made easy by the TalkJS Session.unreads object.

The “On” method of the Session.unreads object fires a “change” event right after TalkJS loads, and every time the amount of unread conversations changes. The event handler gets an array of objects with information about the unread conversations.

window.talkSession.unreads.on("change", function (unreadConversations) {
    console.log(unreadConversations)
});

The _unreadConversations_is a JSON array that looks something like this:

[
    {
        "lastMessage": {
            "conversation": {
                "id": "unread1",
                "custom": {
                    "category": "test123"
                },
                "topicId": null,
                "subject": "TalkJS Unread Message Counter tutorial",
                "welcomeMessages": null,
                "photoUrl": null
            },
            "isByMe": false,
            "senderId": "135487",
            "sender": {
                "id": "135487",
                "name": "Stella Admin",
                "welcomeMessage": "Hey there! How are you? :-)",
                "photoUrl": "https://picsum.photos/200",
                "role": "Admin",
                "configuration": "Admin",
                "custom": {},
                "availabilityText": null,
                "locale": null,
                "email": "<suppressed>",
                "phone": "<suppressed>"
            },
            "body": "New conversation",
            "type": "text",
            "timestamp": 1627806520159,
            "read": false,
            "origin": "web",
            "custom": {
                "textMessage": "true"
            },
            "attachment": null,
            "location": null
        }
    }
]

Rendering the Unread Counter

Now that we have figured out how to get the data on unread conversations of a user, we can use the data to display information to the user however we want!

Let me show an example of this using a simple HTML span tag and JavaScript to update the unread conversations counter.

Define a heading that contains the placeholder for the unread counter in a span tag.

<div>
    <h1>You have <span id="unreadCount" class="bold_blue"> 0 </span> unread conversations.</h1>
</div>

Define an event handler for the Session.unreads.on() method that updates the unread counter whenever the TalkJS app loads or the unread conversation data changes. We can check the length of the array provided to the Handler to determine the number of unread conversations.

window.talkSession.unreads.on("change", function (unreadConversations) {
    var amountOfUnreads = unreadConversations.length;
    document.getElementById("unreadCount").textContent= amountOfUnreads;
});

That’s it! This was a simple example, but as you have plenty of information available for an unread conversation, you can get creative and implement better UX-friendly ways to display the counter!

If you run into any issues, please get in touch via the popup on our website or send an email to dev@talkjs.com.

How to Hide Some Chat Messages for Certain Users in a TalkJS Chat

Sapnesh Naik — Thu, 22 Jul 2021 13:22:22 +0000

In this tutorial, we’ll learn how to hide specific chat messages for users using the TalkJS Chat API message filters. We will also learn how to combine TalkJS custom message attributes with message filters to implement a wide variety of use cases for filtering chat messages.

What Are Message Filters?

TalkJs message filters are used to control which messages show up in the Chatbox UI. You can filter messages based on type, origin, sender, and custom attributes.

Note: Messages are only filtered in the message list (Chatbox UI). The inbox UI's conversation feed will always show the last message sent to the conversation, regardless of the message filter set.

Applying Message Filters in a Chat UI

To apply filters to a Chatbox, use the setMessageFilter method and pass a MessagePredicate to apply filters based on Custom attributes, sender, origin, and type.

Let’s see different examples of filters that can be applied in a Chat UI using a simple Vanilla Js implementation of TalkJS Chatbox. Here, we create a TalkJs user and bind that user object to a new Chatbox instance using the TalkJs session.

Note that, apart from plain JavaScript, TalkJs SDK supports Vue, Angular, and React. And the API will be the same across these frameworks. You can check out our docs for more information.

<script>
    Talk.ready.then(function() {
        var me = new Talk.User({
            id: "333333",
            name: "Chris Pratt",
            email: "chris@example.com",
            photoUrl: "https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y",
            welcomeMessage: "Hey there! How are you? :-)",
            role: "Accountant"
        });

  window.talkSession = new Talk.Session({
            appId: "<appID>",
            me: me
        });

        var chatbox = talkSession.createChatbox();
        chatbox.mount(document.getElementById("talkjs-container"));
    });
</script>

Fig: Demo VanillaJS application

Only Showing Text Messages

A chat can contain text messages, attachments, and locations. To show only text messages in a Chat, you can first add a custom attribute to every message sent using the on("sendMessage") method.

Specifically, we’re adding a custom attribute named “textMessage” to every message sent except for attachments. The value of the custom attribute does not matter here as we’ll not be using it. We just need to have the custom attribute present for all text messages.

chatbox.on("sendMessage", function(ev) {
    if (!ev.message.attachment) {
        ev.override({
            custom: {
                textMessage: "true"
            }
        });
    }
});

Now, to show only text messages in a Chatbox, simply filter out messages with the “textMessage'' custom attribute set using the “exists'' check. As an example, I’m adding the filter on the click of a button here.

document.getElementById('filterTextMessages').onclick = function filter() {
    chatbox.setMessageFilter({
        custom: {
            textMessage: "exists"
        }
    })
}

Only Showing Messages with Attachments

We can use the same custom “textMessage” attribute, but with “!exists” check and filter out just the attachments. This filter will omit all messages with the “textMessage” attribute present, leaving us with only those messages with attachments.

document.getElementById('filterAttachments').onclick = function filter() {
    chatbox.setMessageFilter({
        custom: {
            textMessage: "!exists"
        }
    })
}

Only Showing Admin Messages (Filter Based on Sender's Role)

Every TalkJS user has a role assigned to them during creation, and you can filter the messages based on this role using the “sender” FieldPredicate.

Let’s take an example and show only those messages sent by users with the role “Admin.”

document.getElementById('showAdminMessages').onclick = function filter() {
    chatbox.setMessageFilter({sender: {role: ["==", "Admin"]}})
}

Filtering out Messages from Banned Users

In your chat application, you will sometimes need to block or filter messages from banned users for various reasons. You can change the user’s role to “Banned” and then filter out messages in a chatbox based on the Sender role.

var me = new Talk.User({
    id: "154721",
    name: "Matt Wong ",
    email: "mattwong@example.com",
    photoUrl: "https://picsum.photos/id/237/200/300",
    welcomeMessage: "Hey there! How are you? :-)",
    role: "Banned",
});

document.getElementById('hideBannerUserMessages').onclick = function banned() {
    chatbox.setMessageFilter({
        sender: {
            role: ["!=", "Banned"]
        }
    })
}

Reset Filters

Finally, to reset or remove all filters, just call the setMessageFilter method again and pass NULL; this should clear all current filters.

document.getElementById('resetFilters').onclick = function reset() {
    chatbox.setMessageFilter(null)
}

If you run into any issues, please get in touch via the popup on our website or send an email to dev@talkjs.com.