Changelog

a week ago

React SDK, batch user updates, and more

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.

Chat interface with in the top left the channel name ‘#fundraising’, and from the top right a search bar and three horizontal dots. A dropdown option from the three dots reads ‘Mark as unread’. In the chat itself is a single message stating ‘Any updates?’.

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.

A chat interface with the header ‘Merchandise’ and a message. The message states ‘Which color do you prefer?’, followed by two action buttons: one red button with the text ‘Red’, and a blue button with the text ‘Blue’. At the bottom is a message field where a user can type their message.

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.