Highlights

React SDK

Are you using React for your project? Then life has just become a lot easier, with an official React SDK for TalkJS. With React components for TalkJS, you can have all the goodness of the TalkJS pre-built chat UIs inside your React web application in no time. 

TypeScript bindings are included.

Install the @talkjs/react npm package and get started.

Mark conversation as unread

Users can now mark conversations as unread. When a user marks a conversation as unread, a small dot appears inside the conversation header in their inbox to indicate the unread status. When the user switches focus back to the conversation, the unread message marker disappears.

Menu option to mark a conversation as unread

In new themes, the Mark conversation as unread feature is automatically active. For existing themes, you can follow the upgrade guide to enable marking conversations as unread.

Batch update users

Do you need to update details for multiple users? Forget making one API call after the other. You can now batch update the properties of many users at once, using the REST API. Simply send a PUT request with user objects with updated details to the /users endpoint.

Read more on how to batch update users.

Action buttons

Action buttons and action links are an easy way to let users perform quick-response actions. You can now execute custom code in your chat to create action buttons and action links.

Action buttons for color selection

You can add action buttons and links to your components in the theme editor, or apply special formatting to your messages directly. 

For security reasons, adding action buttons and action links to messages only works with messages sent via the REST API.

Read more on action buttons and action links.

Overview of other changes

Added

• Added options for customizing various components of the message field area of a conversation. This includes customizable components for the reply bar, voice recorder, audio player, emoji suggest bar, and the mention suggest list.
• Enabled message actions (such as deleting, favoriting, or reporting a message) also for users who only have read access to a conversation.
• Added a thumbnail element to themes that support a src attribute, which can be used to display image, audio, or video files that are not message attachments.

Changed

• Improved message visibility by scrolling the message field into view when it gets focused.
• Improved image previews by using the image dimensions for images that have not yet been loaded, while they are loading.
• Improved the color contrast for @mentions in the Default Dark theme.

Fixed

• Fixed an issue where the iframe background would show up light, even when the color scheme in the host webpage was set to dark.
• Fixed an issue where an audio recording playback was not properly loaded on Safari.
• Fixed a bug where focusing the message field would cause the host webpage to scroll down in Chrome and Firefox.
• Fixed a bug where email notifications for messages containing mentions would fail to send when using a templated email theme.
• Fixed several bugs where, when editing a message, the message field was not displayed correctly or the message list would have incorrect padding.
• Fixed an issue where, in the Default Dark theme, search result highlighting would make the found text unreadable.

Security

• Addressed a potential cross-site scripting (XSS) vulnerability related to uploading SVG files. When clicking on an SVG file, a user will now download the file, rather than open it directly in the browser.

👋 Thoughts? Questions? Get in touch.

✨ Follow TalkJS on 𝕏 and LinkedIn to stay up to date.

👩🏾‍💻 We’re hiring! Check out our jobs page.

Highlights

Edit participant data directly from your dashboard

You can now edit the data of any participant in a conversation directly from your TalkJS dashboard. 

To edit a participant’s data, go to the Activity section of the dashboard. From the Conversation history section of the activity landing page, select a conversation that contains the participant whose details you would like to edit. A page with conversation details will open. Click on the name of the participant whose details you would like to edit to open their User details page.

User details page with the option to edit a conversation participant’s data

You can edit any participant detail apart from the ID, which acts as a stable, unique identifier of the participant.

Image previews resize to fit aspect ratio

Image or video files now have improved thumbnail previews. Instead of cropping an image to fit, the preview thumbnail will resize to match the aspect ratio of the message attachment you sent. 

Image previews automatically resize to fit the aspect ratio of the file you sent

If you have previously edited the MessageBody component in your theme, you can follow the upgrade guide to add full support for improved attachment thumbnails.

Overview of other changes

Added

• Added bulleted list formatting to messages. You can now type *, + or - at the start of a new line, and your unordered list will automatically be formatted with bullet points in the sent message.
• Added an unread message counter to the Default Dark theme.
• Added support for playing MPEG transport stream (MPEG-TS) audio or video files (.ts, .tsv, .tsa, or .m2t). When you upload an MPEG-TS file, a preview with player options will automatically appear.

Changed

• Made various improvements to exporting a conversation transcript: the transcript export progress is calculated more accurately; download links have improved; the sender ID will be added to the transcript export; a date string will be used in the exported file name.

Fixed

• Fixed a bug where users who had been removed from a conversation were still able to reply to that conversation via email.
• Fixed a bug in the JS SDK where a rapid sequence of creating and destroying a chatbox would crash the chat.
• Fixed an error where, on the Activity view of the dashboard, it was not possible to delete a conversation.
• Fixed a bug where, on the Activity view of the dashboard, the participants dropdown would disappear after opening.
• Fixed an issue where the chat would crash when changing between chats while replying to a message.
• Fixed an issue where @mentions would break when they contained markup.
• Fixed an issue in the accuracy of the unread message counter.
• Fixed an issue where conversation participants with read permissions were not able to mark a conversation as read.  

Deprecated

• Deprecated syncThemeForLocalDev in the JS SDK. Instead of using this method, you can use custom themes, which give you full control over the HTML and CSS of chat messages.

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:

<div class="productHeader">{{theme.custom.productTitle}}</div>

.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.