This changelog entry reflects changes to TalkJS introduced between 12 June 2023 and 15 July 2023.

Highlights

Unread message counter in REST API and Javascript SDK

You now have two new fields available in the user's conversations REST API endpoint that will provide further insight into a user's unread messages. The unreadMessageCount field in the Conversation object will allow you to retrieve the number of unread messages a user has in a conversation. This will help in tailoring badges for the user interface.

Further, the isUnread property indicates whether the conversation has been read by the user or not. isUnread offers a convenient way to determine the read status of the conversation.

Check out the updated REST API documentation for more information and usage examples.

The unreadMessageCount property is also available in the Javascript SDK.

Export conversation data from dashboard

Exporting conversation data doesn’t need to be a hassle. You can now export conversation data from your dashboard with just a click. 

To export conversation data, go to the Activity view on the dashboard. Select a conversation, and then click Export Conversation Data. You can save a transcript as a text file, or export all the relevant data as a JSON object.

The dashboard button to export conversation data as .txt or .json files

Overview of other changes

Added

• Added several methods to Chatbox in the React Native SDK: getCurrentConversation, to retrieve the conversation currently shown in the UI; onCustomConversationAction, which triggers when a user launches a custom action on a conversation within the TalkJS UI; onLeaveConversation, which triggers when the user clicks the Leave conversation action; and sendLocation, which sends the user's current location to the currently active conversation.
• Added the isForegroundEvent property to NotificationPressedEvent in the React Native SDK, which indicates whether the user pressed the notification while the app was in the foreground or not.
• Added a leave method to ConversationBuilder in the React Native SDK, which removes the current user from the conversation.
• Added support for passing data to themes in both the Chatbox and the ConversationList layouts in the React Native SDK.
• Added Catalan (ca) to the list of languages available for localization of the TalkJS interface. A massive thank you and credit to Relab Studio for providing the translation.

Fixed

• Fixed an issue that prevented Firebase Dynamic Links from generating link previews.
• Fixed an issue which disabled zooming in when clicking the MessageField on iOS for the React Native SDK.
• Fixed a bug that prevented handling notifications in the background on Android for the React Native SDK.
• Fixed a bug where the app would not open when a notification was clicked on Android for the React Native SDK.
• Fixed a bug where dismissed notifications were not being removed from the internal list of active notifications on Android for the React Native SDK.
• Fixed an issue in the theme editor where navigation links in test mode would link to live mode, instead of to test mode.

Changed

• Made the WebView transparent in the React Native SDK. With a transparent WebView, the background color you have applied to the parent View will be used in the empty areas around the TalkJS UI.
• Changed the type of the conversation property in SelectConversationEvent from ConversationBuilder to ConversationData in the React Native SDK.
• Upgraded dependencies for the React Native SDK.
• Improved various UX aspects of the dashboard’s themes page, including improvements to the layout and dropdown menus, as well as adding the options to delete custom files, hide built-in (non-top-level) files, and reset a file to the preset version.

We've now added support for unread message counts! These appear next to each conversation's subject in the inbox, replacing the previous blue dot indicator for unread messages:

For more information on the counter and how to enable it in existing themes, see our docs on Adding new features to existing themes.

New preset themes

The new team_chat preset theme

There are now three new preset themes to go with our existing default and group_chat themes:

- team_chat: see this in action in our Team Chat demo

- default_dark: see our Marketplace demo

- livestream: see our Livestream demo

Passing data directly to a theme

The TalkJS JavaScript SDK now lets you pass data to your theme when you create a widget:

session.createChatBox({
  theme: {
    custom: {
      productTitle: "Pink flip-flops",
      accentColor: "#1A1ACF"
    }
  }
})

Variables you pass this way are also made available as CSS custom properties. So you could do something like this in your component's HTML and CSS:

{{theme.custom.productTitle}}

.productHeader {
  background-color: var(--theme-accentColor)
}

Check out our documentation on passing data to themes to learn more.

Other improvements and fixes

• Fixed styling issues in Safari
• Fixed an issue where an ampersand in an HTML tag attribute within a theme could cause an error
• Fixed an issue where whitespace wasn't preserved in email templates
• Fixed an issue where TalkJS would crash when switching conversations while the reply bar was visible
• Fixed a crash related to the voice message recorder

The TalkJS default theme has a new look! You can customize TalkJS's UI to your heart's content, but we want the out-of-the-box experience to be top-notch as well. So we went through all of the components that make up the TalkJS interface, and where needed, gave them a facelift.

We want to make sure that we don't make unexpected changes to TalkJS that might affect your customer experience, so we've ensured that all existing themes are staying as they were. But if you're creating a new theme (or even a brand new project), you'll get this new look.

Conversation Actions

The keen-eyed among you may have spotted another new feature in the image above. A little "three dots" menu in the conversation header. This is a menu for conversation actions.

Just like with message actions, you can define which conversation actions a user has access to in the role editor. We currently have one built-in conversation action to leave a conversation, but you can define your own custom conversation actions too.

If you're using a theme based on the default preset, and you haven't made changes to the ChatHeader component, the conversation actions menu will show up for users who have available actions. If you did make changes, check the themes upgrade guide to learn how to add the menu to your theme. 

More ways to filter the conversation list

You can now filter conversations in the conversation list of the inbox based on when the most recent message was sent, and the conversation's subject.

The GroupChatImage component is now themeable

The graphic we use to represent a group chat is now themeable. By default, it shows two avatars of participants in the conversation and the total number of participants. You can completely change the way this component looks, but this also gives you more control over which users' avatars are shown.

Changes under the hood

We're always making changes under the hood to fix bugs and improve performance and reliability. But there have been some even more significant changes recently. There's been an overhaul of our backend architecture to better handle large loads. The way conversation list filters are handled internally has been redesigned to improve performance for users with a lot of conversations, especially in cases where the filter matches very old conversations. And lastly, we're moving more of our UI components to our template system in preparation to make them customizable via themes.

Minor improvements and fixes

• Ensured that when expanded, the theme preview has enough space to show the inbox in the desktop layout.
• We've implemented the /.well-known/change-password standard, so that password managers now more easily let you change your TalkJS password. 
• Fixed an issue where the chat would sometimes crash when the iFrame was reloaded
• Fixed an issue where in certain cases, resources would not be loaded via our CDN
• We now show a clearer error message when there's an issue in the layout section of a theme.
• In replies, we no longer show links in referenced messages, since the referenced message itself acts like a link to scroll the message into view.
• Fixed an issue where trying to upload a malformed image could cause the chat to crash.

Two years ago, we announced Themes v2, an incredibly flexible way to completely customise the markup and styling of many parts of the TalkJS user interface. Today, we're bringing that same power to *email notifications*.

Just like UI themes, you can create and edit email themes within the theme editor of the TalkJS dashboard, using the same template language to define the markup and styling. For more information, check out our documentation. 

Live Preview in the theme editor

You can now see a preview of changes to your theme, right as you're editing it!

You can even use a specific conversation or user to use when loading the preview.

React Native SDK 

• You can now register your own notification handlers, so you can run your own logic when the user presses a notification, and send the new push registration token to your backend when it is refreshed.
• The Chatbox and ConversationList components now accept a loadingComponent prop, for a component to be rendered while content is loading.
• (BREAKING CHANGE): Added @react-native-async-storage/async-storage as a peer dependency. If you don't already depend on the package be sure install it by running: npm install @react-native-async-storage/async-storage or yarn add @react-native-async-storage/async-storage depending on your package manager

Fixes

• Fix bug in sendMessage where a message would get sent multiple times in certain scenarios.
• Fix bug with captureKeyboardEvents prop in Chatbox not working.
• Fix slow scrolling performance on the UI for Android devices.
• Fix bug when handling active notifications.

Flutter SDK 

In our Flutter SDK, we've fixed several issues related to recording voice messages and uploading files. Upgrading to this version does require some small updates to your Podfile for IOS apps, and your Androidmanifest.xml for Android apps. Check out our Flutter SDK Changelog for more info.

Other improvements and fixes

As we announced in our previous changelog entry, you can now edit conversation details directly from the activity view of your TalkJS dashboard. We've been hard at work making this even easier to use.

• You can now delete a conversation right from its page in the activity section of the dashboard as well.
• We've added support for several new filters to the TalkJS template language:
  • at_least and at_most let you make sure that a number is at least or at most a certain value.
  • remove_last and replace_last let you remove or replace the last occurrence of a some text.
  • where lets you filter an array of objects based on a single property.
• Fixed an issue where the reply bar's text and icon colour didn't match the theme.
• Fixed an issue where email addresses containing numbers would not be turned into links.
• When the message field layout is set to "tall" in a theme, the send button now shows the send icon instead of the word "send".
• Fixed an issue in our JSSDK, where calling setPresence({visible: false}) before a widget is mounted wouldn't work.
• Fixed an issue where an inbox with a feed filter applied would sometimes load no initial conversation being selected.
• Fixed an issue where a user's welcome message would sometimes fade out as if it were being deleted, and then reappear higher up, when another message was sent in a conversation.
• Fixed an issue where sharing a location after recording an audio message, would in some cases crash the UI.
• Fixed an issue where the JSSDK could throw an error on sides that use a polyfil for Promises.

One of the most common requests is for better moderation features built into the TalkJS dashboard. We're delighted to release the first of those new moderation tools!

Conversation Details

After selecting a conversation from the activity viewer in the dashboard, you can now edit properties like its subject, photo, and welcome messages. If you want to get rid of the conversation completely, deleting all messages and removing it from the inbox's conversation list, you can do that too.

Contact Suppression

We've also given you much more control over what content is automatically suppressed in chats, and allowed you to specify the replacement text. So if you want to ban phone numbers but allow links, you can! If that's not enough, you can even specify your own patterns to be suppressed.

• Create + delete users, and choose which conversations they are in
• Edit user properties like name, email address, and phone number
• Edit + delete everyone's messages, and send messages as specific users

Is there anything we're missing that would help you moderate conversations? Get in touch and let us know! Leave a comment below, get in touch via our live chat, or email dev@talkjs.com

Other Improvements

It has been 3 months since our last changelog, so read on to learn about everything else we've been working on behind the scenes. First a few smaller features and changes you might have noticed:

• All plans now let you have more guests in a conversation: up to 300 for the basic plan and 1250 on growth, using super group chats
• When sending a message with the REST API, you can send it as a reply to another message using the referencedMessageId parameter
• We added a quickstart guide for Svelte and updated the React guide to show both Functional and Class components
• We updated to a fancy new set of icons, so your chats will look better than ever
• We completely redesigned our website and it's gorgeous!

With your help, we tracked down and fixed a lot of little bugs, like:

• Specifying the conversation photo as a relative path like photo.jpg will be relative to your website rather than talkjs.com
• On mobile, the popup close button is normal size again
• When uploading a very tall image, the preview dialog doesn't extend off the top of the screen any more

And my favourite customer-reported bug: A kind Spanish user explained that the word Save should be translated to Guardar and not SaveGuardarThe  😂

However, our main focus since last time has been on improving the performance and stability of our servers. It's all a bit too technical to discuss here, but keep an eye out on our blog for posts taking a technical deep-dive into the improvements.

The important part is that our servers run faster, return less errors, and experience less downtime. We're not done yet, but we're confident that your TalkJS experience will be better than ever.

We're excited to be working on more user-visible features again, and hope you're excited too! Please do get in touch and let us know what you want to see in TalkJS this year, because everything we do is driven by your feedback!

Sometimes, it's quicker to say something than to type out a long message. At other times, you really want to make sure your tone and emotion comes across right, which isn't always easy with text. That's where voice messages shine, and your users can now send them with TalkJS.

You can enable them in the role editor of your TalkJS dashboard. Note that this only changes whether someone can send voice messages. Receiving voice messages works for any user, regardless of their role.

If you've edited the default theme, you may need to make some changes for voice messages to show up nicely. To see the changes we recommend, take a look at our themes upgrade guide.

Other improvements

• Older messages within a conversation now load automatically when you scroll up.
• When you don't subscribe to notification.opened webhook events, notification emails will no longer include a tracking pixel.
• Similarly, when you don't subscribe to  notification.link.clicked webhook events, links in notification emails will no longer have a redirect for tracking clicks.
• Stability and performance improvements

It can be handy to see if the people you're talking to are currently online or not. It can help set expectations for how soon you might get a reply.

You can enable whether status indicators are visible to users via the role editor.

If you've created/edited a theme before September 28th 2022, you may need to make some changes to your theme's ChatHeader component to make these status indicators show up.

New Presence REST API

Our Rest API now has a better endpoint to find out which users are currently online. It lets you filter based on whether the just have an active session, or have an actual chat UI open, and even which conversation they're looking at. Learn more in our documentation

Other fixes and improvements

• In our themes template language, we've added a forloop object, which you can use to get information about the current loop iteration. 
• Video attachments can now have a flexible height. This may require an update to your theme to work correctly.
• We've put in place a filter to prevent automated replies such as "Out of office" emails from being sent as messages in conversations.
• Fixed an issue where dragging files into the chat didn't work in Safari
• Fixed an issue where our REST API would return a 500 internal server error when receiving an invalid JSON payload
• Fixed an issue where the last match of a search query wouldn't be highlighted

Emoji Reactions Reactions

Emoji reactions let you quickly show excitement, laughter, gratitude and much more, without it needing to be a separate message. This is especially useful if a large number of people are reacting to a message, because you see everyone's reactions at a single glance, and it doesn't clutter up the conversation.

You can enable emoji on a per-role basis via the TalkJS dashboard. If you have an existing theme, you may need to make changes to have the reactions show up. Check out this guide on updating your theme.

Play Audio Attachments

You can now play audio attachments right inside the chat! It works right out of the box, but there's a small tweak you may want to make to existing themes to adjust the height.

Clone Your Live/Test Environment into a New Project

Every project within TalkJS comes with a test, and a live environment, but there are cases where you may want an extra environment. Maybe for testing, or experimenting with new features, without messing with your existing project. From the "project settings" page of the dashboard, you can now clone your project's test or live environment into a new project.

Other Features and Bug Fixes

• Message timestamps now have an accessibility label, so that a short timestamp like "1d" is read out by screen readers as "1 day ago".
• Fixed an issue where the "Show older messages" button wouldn't work, showing a loading indicator forever. 
• Role editor usability improvements:  the role editor's main page now shows a list of all your roles, and you can get  direct URL to a role in the editor.
• The emoji suggestion bar now works better in dark themes.

TalkJS lets you respond to the previously written message. This allows you to comment on particular messages without confusing others:

Just like for the other builtin message actions like "edit" and "delete", you can configure which roles are allowed to reply to a message. Newly created roles will have such a setting enabled by default. Currently used roles will have this feature disabled, so if you're using TalkJS in production right now, head to the dashboard to enable replies!

Changes in REST API and webhooks

All REST API endpoints that return Message objects in the response now contain a referencedMessageId field which refers to the message referred to by a reply. Message related webhook events (message.sent, message.updated etc) now contain this field too.

Spelling mistakes and other slip-ups happen just happen sometimes, but it's annoying if you only notice them when you've already sent a message. Now, users can edit messages after they've been sent, from within the TalkJS UI.

Just like with deleting messages, you can configure which roles are allowed to edit messages. You can even allow users to edit all messages in a conversation, which can be useful for moderation. All new roles will allow users to edit their own messages by default. Existing roles have this permission turned off so that nothing changes without you enabling it. 

As you can see in the animation above, once a message has been edited, it is labelled with "(edited)" in the chat. If you haven't made any changes to the UserMessage and MessageBody components in the theme you're using, this will work out of the box. If you did make changes there, you can learn how to add the edit indicator in our documentation on message actions.

Message Editing and the REST API

We've added an editedAt field to messages returned by the API. When a message is first created, this field is null. When the user edits a message it'll be set to the timestamp of the most recent edit.

When updating a message via the REST API, you can now pass a markEdited field (defaulting to false). When set to true, the message's editedAt field will be updated to the time of the update, and in our default theme, the message will show up with "(edited)".

Flutter SDK Changes

• Breaking: You can now configure a participant to only receive notifications for mentions. This required us to change the type of the notify field on Participant. It is now of type ParticipantNotification, an enum with the supported notification settings.

Bugfixes and improvements

We're constantly improving performance and fixing issues under the hood. Here's an overview of just some o the issues we've fixed recently.

• We now show upload progress when the user uploads an attachment.
• Improved the upload preview for videos on mobile. The video now plays back "inline" instead of going full screen.
• Fixed an issue where certain URLs might be parsed incorrectly in messages sent via the REST API, resulting in broken links.