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.

Added

Conversation List Item component: Theme your inbox list items with the new component.

Idempotency keys: Ensure exactly-once delivery of messages - Read more.

Webhooks: message.deleted added to the webhooks list in the dashboard.

API: Fully delete participants when leaving a conversation - Read more.

Push notification tester: You can now test your push notifications via the dashboard UI.

Improved

Android Push Notifications: Priority changed to high, which helps apps that aren't running in the background.

Emojis 😲: Updated to include newer emojis.

Dashboard Settings: Improved layout to give saving settings more visible.

Improved UX for autoscrolling new messages.

Security and performance improvements.

Fixed

System messages suppressed in emails: Fixed a bug where system messages containing contact information were incorrectly being suppressed.

Added: 

Themeable inbox conversation list header component, allowing more customization on your chat's UI.

Fixed:

Triggering of on("conversationSelected") was being called inconsistently.

Added: You can now run TalkJS on a custom subdomain (eg chat.yourcompany.com). This way, no network requests go to talkjs.com at all. (Enterprise plan only - get in touch if you're interested).

Improved: 

• The Chat UI got much faster 🚀. It's snappier and uses less battery than before.
• Made it possible to run TalkJS with a stricter Content-Security-Policy (docs)
• "Send message" REST API endpoint now returns message IDs in the response payload
• Made dashboard "Role editor" navigation clearer and easier to use

Fixed:

• Sending a large message would not always scroll the message list down to the bottom correctly.
• Inbox Feed Filters would sometimes not show sufficient data in the conversation list, or the "load more" button would be unavailable
• showChatHeader: false was ignored in some cases, making it impossible to hide the header.
• In the enlarged shared image view, the close button would display as "⨯" and not as "X" (on sites/apps that did not use UTF-8 encoding)
• Email attachment file sizes were sometimes incorrectly reported in the Chat UI
• CSS syntax errors in the Theme Editor could break the Chat UI without an actionable error. Now, it shows a useful error in the devtools console.

Added: the current amount of Monthly Active Users to the billing page.

Fixed: Issue where the inbox would show no conversations when a feed filter was applied, even when there were conversations that match the filter.

Several other bug fixes.

Added: New themeable component, Chat Header - customize the chat header with the new HTML & CSS template.

Added: New themeable component, No Chats view - customize the messaging and layout of the view when there aren't any chats with the new HTML & CSS template.

Added: Autofocus the message field on desktop devices, new option to toggle this behaviour with messageField.autofocus.

Fixed: When a user has been removed from a conversation, it will no longer be reported as unread when new messages come in.

Added: You can now order conversations and users by createdAt and lastActivity via the API when using the API version 2021-02-09.

Added: New pricing model for customers signed up after March 24 2021. If you have signed up before this, then you can remain on the pricing plan you signed up with. View new pricing.

Added: New SDK event for when a user clicks on a desktop notification generated by TalkJS. Docs.

Fix: Link colors in email notifications now inherit their text color.

Added: Multiple recipients can now be added to the 'To' field when replying to an email notification.

Fix: The 'Show more messages' action in the message list now has an inherited color to fit in with the active theme.

Performance optimizations.