TalkJS Changelog logo
Back to Homepage

Changelog

Subscribe to Updates

Labels

  • All Posts
  • Bug fix
  • Announcement
  • Improvement
  • Chat UI
  • JavaScript SDK
  • REST API
  • Dashboard
  • Deprecated
  • New
  • React Native SDK
  • Flutter SDK
  • Security
  • React

Jump to Month

  • April 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • January 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • March 2022
  • February 2022
  • December 2021
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
Changelog byAnnounceKit

Create yours, for free!

Bug fixImprovementChat UIJavaScript SDKDeprecatedReact Native SDK
4 weeks ago

Chat UI components preview, real-time messaging data, and more

Highlights

Chat UI components ✨ preview  ✨

TalkJS chat UI components (‘Components v2’) are now in preview and safe to use in production. 

Chat UI components give you ultimate flexibility to control the appearance and behavior of your chat. You can use the components with a ready-to-go pre-built theme, or customize your theme to get the exact look and feel you want.

Currently components are available for a chatbox UI with a range of basic features, which is continuously expanding. 

To work with chat UI components, you’ll need to combine the following two packages:

  • @talkjs/components — a library that provides both React components and web components that you can use with any frontend framework, such as Angular, Vue, or Svelte.
  • @talkjs/theme-default — a package with the default theme for @talkjs/components which lets you display a chat with any frontend framework. The default theme is fully open source, and you can fork and customize it to fit your own brand. See the default theme Github repository.

Use one of the dedicated getting started guides for chat UI components:

  • JavaScript getting started guide →
  • React getting started guide →
  • Next.js getting started guide →
  • Angular getting started guide →
  • Vue getting started guide →
  • Svelte getting started guide →

Note: Chat UI components are currently in preview. They're safe to use in production, but still offer limited features. Updates are added on a rolling basis and are always fully backward-compatible.

Real-time messaging data

You can now read, update, and subscribe to all your chat messaging data—no chat UI needed. This means that you can bring your own fully custom-built chat UI, and let TalkJS take care of the rest.

To work with real-time chat data, you have the following two options:

  • Realtime API, part of the JavaScript SDK
  • @talkjs/core, a standalone package now available on NPM

Want to get started directly? Here are some guides: 

  • 1:1 chat getting started guide →
  • Group chat getting started guide →

In a hurry? Copy a full working code example.

Overview of other changes

Added

  • JavaScript SDK (0.35.0): Added ConversationRef.subscribe to be able to subscribe to a conversation with the Realtime API. 
  • React Native SDK (0.13.0): The keyboardVerticalOffset prop is now also used in Android. This is part of the fix to ensure proper keyboard behaviour on apps targeting Android 15 and above. The default value on Android is 55 + StatusBar.currentHeight.

Changed

  • React Native SDK (0.13.0): Updated dependencies.

Deprecated

  • JavaScript SDK (0.35.0): Removed ConversationSnapshot.lastMessageAt. Use ConversationSnapshot.lastMessage.createdAt instead.

Fixed

  • React Native SDK (0.13.0): Fixed keyboard issues on Android 15 that arose due to Android's enforcement of edge-to-edge.
  • React Native SDK (0.13.0): Fixed internal event subscriptions not being cleaned up properly on re-renders.




Resources

Case study: FrostyWave is empowering young women with TalkJS messaging

Find out how FrostyWave is empowering young women to grow into their best selves with the TalkJS chat API.

Read FrostyWave's story.

Trying out TalkJS demos? Make it collaborative!

You can now use a one-click invite to try out TalkJS demos with colleagues in a shared conversation. Check out the latest demos:

  • Job board →
  • Virtual events →
  • Team collaboration →
  • Marketplace →




👋 Thoughts? Questions? Get in touch.

✨ Follow TalkJS on LinkedIn, Bluesky or 𝕏 to stay up to date.

👩🏾‍💻 Come join TalkJS! Check out the jobs page.

Bug fixChat UIJavaScript SDKREST APINewReact Native SDK
a month ago

Manage chat UI themes with the REST API, and more

Highlight

Manage themes with the REST API

You can now manage your chat UI themes using the TalkJS REST API. This includes the options to create, update, delete or export a theme. You can directly edit themes for your test environment. Once you’re happy with the updates, copy the changes to your live environment, and you’re all set.

Managing your themes through the REST API makes it easier to work with themes across multiple projects, or keep themes in your code base and update them when deploying.

Overview of other changes

Added

  • Added an endpoint to the REST API that allows you to get a user's notification reply-to email address for a conversation. Any emails sent to that email address appear in the conversation as being sent by the user.
  • JavaScript SDK (0.34.0): Added SendMessageParams that can be passed to ConversationRef.send to send a message by specifying its content directly. This allows you to send text messages with manually-specified formatting, in addition to file attachments and locations.
  • JavaScript SDK (0.34.0): Added EditMessageParams that can be passed to MessageRef.edit to edit a message by specifying its content directly. This allows you to edit text messages with manually-specified formatting, in addition to file attachments and locations.
  • JavaScript SDK (0.34.0): Added Session.uploadFile and file-subtype-specific variants. This returns a FileToken that you can use in SendMessageParams or EditMessageParams.
  • React Native SDK (0.12.0): Added the customEmojis prop to Chatbox and ConversationList. This prop adds a set of custom emoji images to the emoji picker, the emoji autocompleter, and emoji reactions. It allows users to send and receive custom emojis.
  • React Native SDK (0.12.0): Added keyboardVerticalOffset prop to Chatbox. This prop is basically identical to the one passed to KeyboardAvoidingView. The default value is 90. Note that the keyboardVerticalOffset prop is only used in iOS to fix an iOS bug. On Android, the KeyboardAvoidingView component isn’t available.

Changed

  • React Native SDK (0.12.1): Changed the default value for the keyboardVerticalOffset to 95.

Fixed

  • Fixed an issue where user IDs weren’t sent correctly, which caused user mentions to break.
  • Fixed an issue where user mentions would break when the user ID contained a pipe (|) character.
  • React Native SDK (0.12.1): Fixed a bug in iOS when New Architecture is enabled, where the whole UI would be scrollable when the keyboard is open.
  • React Native SDK (0.12.0): Fixed a bug in iOS, where opening the keyboard would cause the ChatHeader or the top messages to get hidden. 
  • React Native SDK (0.12.0): Fixed the TypeError: _messageField.getTextResolver is not a function (it is undefined), js engine: hermes. error.
  • React Native SDK (0.12.0): Fixed ref methods not working when called after a delay.

New tutorial

Send event invitations and other custom message types

Out of the box, TalkJS lets you send text, attachments and even voice clips, but what if you business has more specialized types of content to send? In this tutorial, TalkJS developer Frederik Creemers shows you a pattern to create a whole range of custom message types for your chat—from event invitations to payment requests, auction bids, and contact cards.    




👋 Thoughts? Questions? Get in touch.

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

👩🏾‍💻 Come work at TalkJS! Check out our jobs page.

Bug fixImprovementChat UIJavaScript SDK
8 months ago

Add custom emojis, and more

Highlight

Add custom emojis

You can now add your own custom emojis to your chat 😀

Using the customEmojis option, you can add images for emojis that your users can use in their messages, or as emoji reactions.

To add a custom emoji, specify an emoji name and a url to the emoji image you’d like to add. The emoji name must be unique, and must start and end with a colon, for example :coffee-mug:, :cool-doge: or :roomba-cat:. The image URL must be a URL to an image file, such as an SVG, GIF or PNG. The image itself can be any size, as long as it’s square (that is, has the same width and height). 

You can then add your custom emojis when creating your chat UI, for example as follows:

 customEmojis: {
   ':coffee-mug:': { url: 'https://example.com/images/coffee-mug.png' },
   ':roomba-cat:': { url: 'https://example.com/images/roomba-cat.gif' },
   ':cool-doge:': { url: 'https://example.com/images/cool-doge.gif' },
 }

Read more about custom emojis.

Overview of other changes

Added

  • JavaScript SDK (0.24.0): Added support for subscribing to a user via UserRef.subscribe, which returns a UserSubscription.
  • JavaScript SDK (0.26.0): Added customEmojis setting to createChatbox, createInbox and createPopup.

Changed

  • JavaScript SDK (0.25.0): Removed UserData from the Realtime API. Everything that previously returned UserData now returns UserSnapshot.
  • JavaScript SDK (0.25.0): Changed UserSnapshot.locale and SetUserParams.role, so that these are now correctly marked as nullable.

Fixed

  • Fixed a bug where UserRef.set in the Realtime API would give an error if you didn’t specify a name.
  • Fixed an issue where, under certain conditions, you couldn’t add message translation for your preferred language.




New guides and tutorials




👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIJavaScript SDKREST APIDashboardReact Native SDKFlutter SDK
8 months ago

Customizable search UI, more push notifications options, and other changes

Highlights

Customizable search UI

You can now customize the conversation list search as part of your theme, to match your own brand’s look and feel. The conversation list search allows users to search for both conversations and messages when using the Inbox pre-built chat UI. 

Components that you can customize as part of your theme include: 

  • ConversationListSearchBox
  • MessageSearchResult
  • NoSearchResults
  • SearchResultHeader 
  • SearchResultFooter

For more information about customizing your search UI, check out the documentation for these theme components.

More push notification options on the Expo SDK

Are you using the Expo SDK for React Native? Then you now have yet more flexibility when setting up push notifications. In addition to Firebase, you can now also use Apple Push Notification Service (APNs) for push notifications when working with the React Native Expo SDK. You can choose either the expo-notifications or the @react-native-firebase/messaging library for your push notifications. 

For more details on setting up push notifications for Expo, see: Mobile Push Notifications: Expo.

Overview of other changes

Added

  • Added the option to have multiple secret keys. You can also rotate your secret keys directly from your TalkJS dashboard.
  • Added the option to mark a conversation as read or unread via the REST API.
  • JavaScript SDK (0.23.0): Added a ConversationRef to fetch and manipulate data about conversations on the Realtime API.
  • JavaScript SDK (0.23.0): Added Session.conversation(id: string): ConversationRef to get a reference to a conversation by its conversation ID.
  • React Native SDK (0.11.0): Added a scrollToMessage prop to the Chatbox component.
  • Flutter SDK (0.13.0): Added a scrollToMessage property to the Chatbox component.

Changed

  • Changed the option to get a conversation on the REST API to expose isUnread for each participant in a conversation, to identify whether or not the conversation is unread for that participant.

Fixed

  • Fixed an issue with pasting lists into the chat from Google Docs on Chrome on Windows.
  • Fixed an issue where scrolling to a specific message didn’t work properly when calling select. 
  • Fixed an issue where, under certain conditions, it wasn’t possible to run multiple sessions concurrently.
  • JavaScript SDK (0.23.1): Fixed ConversationSnapshot.createdAt and ConversationSnapshot.lastMessageAt to be number instead of Date.
  • React Native SDK (0.11.0): Fixed an issue where the device token wasn’t registered properly if the Session component was used immediately after the app had been launched.
  • Flutter SDK (0.13.0): Fixed an issue where the push notification device token registration didn’t work correctly in release builds.
  • Flutter SDK (0.13.0): Fixed an issue where Session.hasValidCredentials didn’t work correctly.

New guides and tutorials 

How to add chat to a Blazor web app with TalkJS
How to build a Django chat app with TalkJS


👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIJavaScript SDKReact Native SDKFlutter SDKSecurityReact
10 months ago

More secure authentication, comments theme, and more

Highlights

More secure authentication

Using authentication for your chat helps you protect your user’s messages and data. You can now also enable more secure authentication on your chat using industry-standard JSON Web Tokens (JWTs). 

Token-based authentication is more secure. Because tokens can be set to expire, if a token accidentally gets leaked or stolen, any attacker only has a limited window of time in which they could carry out their attack—giving you the confidence of better protecting your chat data.

The new authentication guide walks you through the basic steps to take to:

  • Generate a token
  • Pass a token
  • Activate token-based authentication on your dashboard

You can also use token-based authentication for the REST API.

Read the authentication guide and further details:

  • Security: Authentication
  • REST API authentication

Comments theme

Two windows with comments. On the left a static comment thread in a white chat. On the right a comment box in black, where comments are actively being posted on the topic of hybrid working.

Preset themes let you select a complete look and feel of your TalkJS user interface in one go. The new comments preset theme is tailored for any in-app commenting experience, such as for a:

  • Text or code editor
  • Whiteboard
  • Media player
  • Collaboration tool

With the comments preset theme, you can seamlessly embed comments, mentions, and reactions into your app. Moreover, using ready-made components, you can customize the commenting experience to meet your exact needs.

You can enable the comments theme directly from the Themes page of your dashboard.

Learn more about the Comments preset theme.

Overview of other changes

Added

JavaScript SDK

0.21.0

  • Added support for JSON Web Token (JWT)-based session authentication, adding SessionOptions.token and SessionOptions.tokenFetcher. For more details on how to use JWT-based authentication, see the authentication documentation.

0.20.0

  • Added the first aspects of the Realtime API.
  • Added UserRef to fetch and manipulate data about users.
  • Added Session.currentUser: UserRef to get a reference to the current user for use in the Realtime API.
  • Added Session.user(): UserRef to get a reference to an arbitrary user.

0.19.0

  • Added the option messageId to Inbox.select.

React SDK

0.1.8

  • Added token and tokenFetcher props to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

React Native SDK

0.10.0

  • Added token and tokenFetcher props to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

0.9.0

  • Added disableZoom prop to Chatbox and ConversationList. This allows you to choose whether the user can pinch to zoom in and out of the UI. By default its value is false and the user can zoom into the UI.

Flutter SDK

0.12.0

  • Added token and tokenFetcher properties to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

0.11.0

  • Added the enableZoom property to Chatbox.
  • Added the sendMessage method to Conversation.

Changed

  • Made the ReferencedMessage component customizable in the Theme editor. The ReferencedMessage component renders the contents of the message that is being replied to.

Deprecated

  • JavaScript SDK (version 0.21.0): Deprecated SessionOptions.signature. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • React SDK (version 0.1.8): Deprecated the signature prop on the Session component. Signature-based authentication continues to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • React Native SDK (version 0.10.0): Deprecated the signature prop on the Session component. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • Flutter SDK (version 0.12.0): Deprecated the signature prop on the Session component. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.

Fixed

  • Fixed an error where a certain combination of unicode characters in emoticons could cause a page to crash.
  • Fixed an issue where, under certain conditions, updating a user’s presence (such as by typing, or focusing a window) would result in errors.
  • Fixed an issue where performing a search didn’t respect feed filters.
  • React Native SDK (version 0.9.1): Fixed a regression with messages not getting marked as read when loading the Chatbox.
  • React Native SDK (version 0.9.0): Fixed unnecessary warnings in iOS when calling MessageField methods.

New guides and tutorials

  • How to integrate chat into a Framer site with TalkJS
  • How to show a system message only to a specific user




👋 Thoughts? Questions? Get in touch.

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

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

Bug fixAnnouncementImprovementChat UIReact Native SDKFlutter SDKReact
a year ago

Control the style of absolutely anything with CSS overrides, and more

Highlight

Control the style of absolutely anything with CSS overrides

You can now style absolutely any aspect of your TalkJS UI, using the global CSS overrides tab in your theme editor. 

Global CSS overrides complement the ability to edit and style chat components. A vast number of parts of the TalkJS UI are currently exposed as components that you can edit directly in your theme editor. However, if that’s not enough, the global CSS overrides tab gives you full control to customize your chat UI. 

For example, with a global CSS overrides you can customize the background of a chat panel however you like, such as by setting an image as the background:

.Panel {
   background-image:url('https://example.com/image.jpg');
   background-size:cover;
}

With the following result:

A TalkJS chat UI with a custom image background. The custom background shows a landscape with luscious green hills and a cloudy sky. The chat itself contains a link to a video about hiking in the Lake District, and posts asking about an upcoming hike.

Chat UI with an image set as the background of a chat panel

Using global CSS overrides, you could for instance also hide the day marker that separates messages sent on different days, by setting DayMarker to display: none:

.DayMarker {
   display: none;
}

The difference between showing and hiding the day marker would be as follows:

Two instances of the same chat conversation side by side. On the left, a message sent on February 14 and a message sent just now are separated by a line, with at the center the word ‘Today’. On the right, the same messages are shown directly following one another, without a day marker separator.

Chat UI with and without a day marker 

You can find the global CSS override tab in the Themes section of your dashboard when editing a theme.

Overview of the theme editor in the TalkJS dashboard, with the Global CSS override file indicated in the sidebar navigation, above the list with built-in components. Inside the global CSS override file is a code comment that reads: ‘This file can be used to override default TalkJS styling outside your components. Any styles that you add here will be applied globally to the entire TalkJS UI.’

Global CSS override the the theme editor of the dashboard

Any CSS styles added to the global CSS overrides section of the theme editor get applied globally, to all parts of the TalkJS UI. To add a style only to a specific component, update that component directly in your theme editor.

For more information, see: Global CSS overrides.

Overview of other changes

Added

  • Added support for rich text shortcodes in the message editor. Ctrl-B (on Windows) or Cmd-B (on MacOS) now adds markup for bold text, while Ctrl-I or Cmd-I adds markup for italics.
  • React SDK (version 0.1.7): Added a show prop to Popup, that allows you to specify whether the pop-up widget pre-built chat UI should be shown or hidden.
  • React Native SDK (version 0.8.0): Added support for push notifications via Firebase on iOS. Note: For push notifications to iOS on Expo, we currently only support using Firebase, not APNs.
  • React Native SDK (version 0.8.0): Added onMessage and onUnreadsChange props to the Session component.
  • React Native SDK (version 0.8.0): Added hasValidCredentials, clearPushRegistration, setPushRegistation and unsetPushRegistration methods to the Session component.
  • Flutter SDK (version 0.10.0): Added support for Firebase push notifications on iOS.
  • Flutter SDK (version 0.10.0): Added compound predicates to Chatbox and ConversationList.
  • Flutter SDK (version 0.10.0): Added a missing themeOptions property in ConversationList.

Changed

  • React Native SDK (version 0.8.0) Removed an implicit push notification permissions request. Users of this library must explicitly request for push notification permissions on iOS and Android 13+.
  • React Native SDK (version 0.8.0): Removed bounce in iOS when the UI reached the edge of the content.
  • React Native SDK (version 0.8.0): Renamed the AndroidChannel interface to AndroidSettings, and the IOSPermissions interface to IOSSettings.
  • React Native SDK (version 0.8.1): The ConversationList no longer highlights the first conversation by default.

Fixed

  • Fixed an issue where a group chat with only guests wouldn’t show usernames alongside messages in the default preset themes.
  • Fixed an issue where external links would open inside an app even when Cordova InAppBrowser is used.
  • Flutter SDK (version 0.10.0): Fixed a push notification error when a sender's photoUrl is invalid.
  • Flutter SDK (version 0.10.0): Fixed a build issue on Android Gradle Plugin (AGP) 8.0+.
  • React Native SDK (version 0.8.0): Fixed bug in Session when user synchronization is disabled.
  • React Native SDK (version 0.8.0): Fixed bug with MessageField.setText and MessageField.typeText that would cause a crash when given certain strings.
  • React Native SDK (version 0.8.0): Fixed bug where, under certain conditions, the HTMLPanel wouldn’t load.

New guides and tutorials 

  • How to set up the Inbox UI mode as a pop-up
  • How to create a poll in TalkJS
  • Integrate chat into your Bildr webapp with TalkJS
  • Integrate chat into a Webflow site with TalkJS

👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIREST APIReact
a year ago

Customizable link previews, effortless mentions, and more

Highlights

Customizable link previews

You control how TalkJS displays link previews for URLs shared in the chat. For example, you can choose to remove previews for links that contain certain blocked words. And you can now also set whether you prefer your link previews to show up large or compact. 

By default, TalkJS generates a full, large preview for any link that a user shares. However, you can also set your link previews to be more compact.

A large link preview and a compact link preview are show side-by-side. Both link previews have the same width, but the height of the large link preview is about double that of the compact link preview. As a result, the large link preview shows more of the associated website image, and contains more text than the compact link preview.

A large link preview (on the left) and a compact link preview (on the right)

If you’d like your link previews to be more compact, then you can do so by setting the compact parameter of the LinkPreview or LinkPreviews components to true.

Read more on link previews.

Effortless mentions

Mentioning someone in a chat just became more effortless. Users no longer need to manually select, or hit enter or tab to mention another user in a conversation. They can simply type @name and once the user’s name is typed out in full, the chat auto-accepts the first remaining suggested mention. 

A message field in a chat where a user types

A user is mentioned in a conversation simply by writing an @ symbol and fully typing their name

For names that include diacritics, the user can even type the letters without diacritics, and the mention still matches.

Overview of other changes

Added

  • Added support for sending mobile push notifications using Firebase on iOS.
  • Added customizable unsubscribe links to email notifications, to allow users to unsubscribe from email notifications. You can edit the link text. If you’re on the Growth or Enterprise plan, then you can also edit the style and placement of the unsubscribe links in your email theme. 
  • React SDK (version 0.1.6): Added an asGuest prop to Chatbox, Inbox and Popup, to enable users to join a conversation as a guest.

Changed

  • Changed the behavior of custom message filters and custom conversation filters. You can now also filter messages and conversations for either one custom property or another, rather than only for a combination of custom properties.
  • Changed the options for selecting an emoji reaction. If there is enough space for it, selecting an emoji reaction now first shows the emoji reaction favorites bar.

Fixed

  • Improved stability and performance for large chats.
  • Fixed a bug where selecting a conversation in which the user had a draft message would crash the chat.
  • Fixed an issue where SMS notifications would not get sent for identical messages sent to the same person within a two-minute timeframe.
  • Fixed an issue where push notifications were not sent for large payloads.
  • Fixed an issue where ActionButton params wouldn’t update when switching between conversations.
  • Fixed in issue where no SVG group chat images were generated for group chats.
  • Fixed a bug where, under certain conditions, the message action menu would continue to stay visible even when it wasn’t interacted with.
  • REST API (version 2024-01-01): Fixed a bug related to fetching conversations for a non-existing user. Fetching a conversation for a non-existent user now returns a HTTP 404 Not found status, instead of an HTTP 200 OK status.

New guides 

  • How to add a hidden user to a TalkJS conversation 
  • How to add a ‘Create new chat’ button in TalkJS 

👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIREST API
a year ago

Action buttons and action links in the conversation list, and more

Highlight

Action buttons and action links in the conversation list

You can now use action buttons and action links inside the ConversationListHeader and ConversationListItem theme components in the Inbox UI, giving you yet more control in customizing your chat. 

For example, you could add a custom action button to your ConversationListHeader to allow users easily to create a new chat, or add a custom action link to a ConversationListItem with relevant information for each conversation in the list.

A chat window with an Inbox UI with one conversation about a job application open, and three other conversations about job applications shown in the conversation list in the inbox. Two elements have orange annotation circles around them: at the top of the inbox, the conversation list header (ConversationListHeader) with a custom action button to create a new chat, and one conversation in the conversation list with a custom action link to an application file (a ConversationListItem).

A ConversationListHeader with a custom action button and a ConversationListItem with a custom action link

Read more on action buttons and action links.

Overview of other changes

Changed

  • Changed the number of patches that you can send in a single call to the batch user update endpoint of the REST API to a maximum of 100 patches at a time.

Fixed

  • Fixed an issue where deleting a message with an attachment did not properly delete the associated file on Cloud Storage for Firebase.
  • Fixed an issue with uploading attachments when replying to a conversation via email.
  • Fixed an issue in the Flutter SDK where links in Android would open in the user’s external browser by default, instead of in the WebView.
  • Fixed a bug where Conversation.otherIds would return the current user (me) if that user was the only person in the conversation.
  • Fixed bug that caused CustomMessageAction events to have message.id set to null for newly sent messages.



👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIREST APISecurityReact
a year 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.

Bug fixAnnouncementImprovementChat UIJavaScript SDKDashboardDeprecated
a year ago

Edit participant data from dashboard, improved previews, and more

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.

The User details page in the Activity section of the TalkJS dashboard. The property ‘Name’ is being edited, with buttons to cancel or save the edits. All other properties, apart from the ID, have a button to edit them.

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. 

A chat with two participants in which a square image of a top view lunch menu is sent. The thumbnail preview of the image is itself also square.

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.