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.

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: 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: 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: Users can now search for text within a conversation, available on the premium plan and above
• Added: Improved the styling of the scroll bar for webkit specific browsers e.g. Chrome
• Changed: Separated the role editor to a separate page to help reduce the bloat in the dashboard. Roles can now be edited by pressing the 'Roles' link found in the top left of the TalkJS Dashboard
• Fixed: Improved the performance of listing the conversations a user is part of
• Fixed: Under certain circumstances the scroll bar would't scroll to the bottom of the chat UI for the initial render