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.

TalkJS lets you respond to the previously written message. This allows you to comment on particular messages without confusing others:

Just like for the other builtin message actions like "edit" and "delete", you can configure which roles are allowed to reply to a message. Newly created roles will have such a setting enabled by default. Currently used roles will have this feature disabled, so if you're using TalkJS in production right now, head to the dashboard to enable replies!

Changes in REST API and webhooks

All REST API endpoints that return Message objects in the response now contain a referencedMessageId field which refers to the message referred to by a reply. Message related webhook events (message.sent, message.updated etc) now contain this field too.

Spelling mistakes and other slip-ups happen just happen sometimes, but it's annoying if you only notice them when you've already sent a message. Now, users can edit messages after they've been sent, from within the TalkJS UI.

Just like with deleting messages, you can configure which roles are allowed to edit messages. You can even allow users to edit all messages in a conversation, which can be useful for moderation. All new roles will allow users to edit their own messages by default. Existing roles have this permission turned off so that nothing changes without you enabling it. 

As you can see in the animation above, once a message has been edited, it is labelled with "(edited)" in the chat. If you haven't made any changes to the UserMessage and MessageBody components in the theme you're using, this will work out of the box. If you did make changes there, you can learn how to add the edit indicator in our documentation on message actions.

Message Editing and the REST API

We've added an editedAt field to messages returned by the API. When a message is first created, this field is null. When the user edits a message it'll be set to the timestamp of the most recent edit.

When updating a message via the REST API, you can now pass a markEdited field (defaulting to false). When set to true, the message's editedAt field will be updated to the time of the update, and in our default theme, the message will show up with "(edited)".

Flutter SDK Changes

• Breaking: You can now configure a participant to only receive notifications for mentions. This required us to change the type of the notify field on Participant. It is now of type ParticipantNotification, an enum with the supported notification settings.

Bugfixes and improvements

We're constantly improving performance and fixing issues under the hood. Here's an overview of just some o the issues we've fixed recently.

• We now show upload progress when the user uploads an attachment.
• Improved the upload preview for videos on mobile. The video now plays back "inline" instead of going full screen.
• Fixed an issue where certain URLs might be parsed incorrectly in messages sent via the REST API, resulting in broken links.

You can now mention any participant in a conversation by typing @ followed by their name. Once you've typed the at-symbol, a menu will come up so you can quickly select the person you're looking for.

With the addition of mentions also comes a new option for notifications. When adding/updating a participant to a conversation, you can now set the "notify" option to "MentionsOnly" to only be notified when someone mentions the user. You can learn more about the different notification settings in our documentation on participants.

New Additions to the JavaScript SDK

• Added a sendFile method to all widgets to send a file to the current conversation.. You can pass it a Blob to upload a specific file directly from your application. If you don't specify a file, the file picker dialog will open, so the user can pick a file to upload.
• Added a sendLocation method to all widgets. It will send the user's current location in the current conversation.

Note that both methods still open the confirmation dialog, so the user can confirm or cancel sending the message.

• Added an onKeyDown method to all  widgets.

React Native SDK TalkJS for React Native v0.4.0

With this release, we have updated the SDK's dependencies and peer dependencies to keep them up to date and also fix bugs in some of them. As of npm v7, peer dependencies are installed by default so upgrading the TalkJS SDK should also upgrade the peer dependencies accordingly. For yarn users, you may have to update the packages individually as shown:

yarn upgrade @notifee/react-native@^5.3.0 @react-native-community/push-notification-ios@^1.10.1 @react-native-firebase/app@^14.11.0 @react-native-firebase/messaging@^14.11.0 react-native-webview@^11.21.2

These libraries are defined as peer dependencies rather than dependencies since they contain native code and currently, React Native does not auto link transitive dependencies.

The new version of the notifee library also eliminates the need to add the local maven repository manually to your project. You can remove the section below. (Your app will still build and run if you don't remove it)

maven {
  url "$rootDir/../node_modules/@notifee/react-native/android/libs"
}

Improvements and Bug Fixes

• Fixed an issue where certain sequences could of numbers and symbols could be incorrectly treated as phone numbers, meaning they would be turned into links or suppressed by contact info suppression.
• Fixed an issue where the scroll position was not maintained properly when the on-screen keyboard opened.
• Fixed an issue where quickly switching between conversations on a slow network could cause an error.
• Fixed an issue in Safari where message parsing could cause an error.
• Our dashboard should now give more useful errors for invalid APNS certificates
• Guests can now delete messages in conversations, if their role grants them to necessary permissions.
• Screen readers should now be able to better announce emoji in messages
• Fixed an issue where push notifications on IOS didn't have a sound
• Fixed an issue where the activity pag'e on the dashboard wouldn't load for certain customers with a lot of conversations
• Fixed an issue where the scroll bar wasn't visible on dark themes

New  Push Notifications

Push notifications are a critical part of what we offer and we are very excited to make it available on our Flutter SDK. Similar to our React Native SDK, we have abstracted registering of the device token among other things to make adding push notifications a fairly straightforward thing. You can check out our documentation for a step by step guide on what you'll need to do to setup push notifications on Android and iOS through Firebase and Apple Push Notification service respectively.

improvement File Upload on Android

Due to the nature of the WebView implementation on Android and limitations of the Flutter equivalent, we had initially shipped the Flutter SDK without support for file uploads on Android. At the time of writing, various factors prevent the maintainers of the Flutter Webview plugin from shipping this feature. We believe file upload is a core component of TalkJS and so we forked the plugin and added it to cater to our Flutter SDK.

Other than your users on Android being able to upload files, there's nothing to be done from your end. Remember, you can always enable or disable file attachment for a specific role through the dashboard.