How to archive chats in a TalkJS Inbox

Note: TalkJS's Conversation Actions feature now allows you to add an "Archive conversation" menu option to your conversations. See our How to archive a conversation tutorial for more details.

Archiving chats is a very useful feature when you have an inbox that is cluttered. It allows you to hide away all of the chats that you don’t access frequently and access them only if there is a need. Today, we are going to look at how we can implement this type of feature by using the TalkJS Chat API.

Initial setup

Setting up an inbox with TalkJS is straightforward thanks to our detailed Getting Started guide. Once you have an inbox up and running, it is time to archive some chats and add a custom filter.

Imagine we are running a support chat for a custom PC build website and we have certain support chat topics which will be handled by certain specialists. Since there can be a lot of queries coming in everyday, and each user might have multiple issues, we will need to give them the ability to archive chats once they have been resolved. We will try and implement this scenario using TalkJS. 

Custom property and Feed filter

To archive a chat we will make use of two things; one is a custom conversation property and the second is the feed filter. When creating conversations using the TalkJS API, the usual process is to create the conversation object using an object of the Session class and follow it up by setting the participants. For archiving a conversation, we will create a conversation in the exact same way, but add a custom property called ‘archived’ and set it to false. This custom property will then be used to filter the feed. 

const conversation1 = session.getOrCreateConversation(Talk.oneOnOneId(me, other));
conversation1.setAttributes({custom: { archived: "false" }})
conversation1.setAttributes({subject: "gaming"});
conversation1.setParticipant(me);
conversation1.setParticipant(other);

To demonstrate the ability of multiple custom properties and filtering, we will add an additional  property called supportTopic and set it to gaming. We will create conversations of two support topics of which one will be gaming and the other will be connectivity. 

const conversation1 = session.getOrCreateConversation(Talk.oneOnOneId(me, other));
conversation1.setAttributes({custom: { archived: "false", supportTopic: "gaming" }})
conversation1.setAttributes({subject: "gaming"});
conversation1.setParticipant(me);
conversation1.setParticipant(other);

The inbox should look something like this. Our imaginary customer, Sebastian, has issues with his new PC in terms of gaming performance and connectivity. He gets routed to these two support agents. 

For this example, we will create one more conversation and the inbox of Sebastian will look like this. Imagine, down the line, Sebastian encounters multiple issues and this causes his inbox to be cluttered and also makes it difficult for him to keep track of the conversations that are active. For this, we will use the archiving feature with the custom property that we used with the conversations.  

 To archive a conversation and hide it from the feed, all we need to do is set the archived property to true and use the corresponding feed filter on the inbox. If you are not familiar with feed filters, they are a filtering mechanism present in TalkJS that allows you to filter the conversations on the inbox feed based on various conditions like access level, read status or any custom property.

Let’s say, we have resolved the issue pertaining to gaming performance that we were dealing with Alice and now we want to archive it. This can be simply done by setting the archived property to true on the conversation.

conversation1.setAttributes({custom: { archived: "true", supportTopic: "gaming" }})

If you check your inbox now, the conversation with Alice will no longer be visible in the inbox. But wait, how did that happen? That is where feed filters come into picture. Let’s take a look at how we did that in a little more detail. 

 When creating an inbox, the usual way is to use the following code snippet, which will mount the inbox in the talks-container present in the html. 

const inbox = session.createInbox({selected: conversation1});
inbox.mount(document.getElementById("talkjs-container")); 

To use a feed filter, we will add one more line. This is part of the ConversationPredicate interface and you can take a look at all the available options on the documentation. There are two top-level properties, access and custom. Access is used to restrict user-access to chats based on their privilege levels whereas the custom property is used to show/hide chats based on custom properties (like we have here). 

inbox.setFeedFilter({ custom: { archived: ["==", "false"] } });

Inside the custom property, we specify the property of the conversation we want to target, in this case, it is archived.  To manipulate the conversations, we need to provide the conditions which can be a string exists or !exists or a 2-tuple as shown in the example above. 

Few more examples of these feed filters to help you understand it a little better are available on our ‘How to make a TalkJS inbox with filterable topics’ tutorial. 

What next?

We are just scratching the surface here in terms of what can be done with the TalkJS Chat API. The archiving feature is a crucial part of any chat application and this can be coupled along with the topic-wise filtering in TalkJS to view and segregate between multiple chats of various different categories. For example, we have an additional property that we have for each conversation called ‘supportTopic’, which denotes the topic of each conversation.