Changelog

TalkJS chat UI components are versioned. This page gives an overview of the changes introduced with each new version.

Version 0.1.1

  • Deprecated the common.participants theme prop. Added new useParticipants() hook as a substitute.
  • Fixed a bug in @talkjs/web-components that prevented explicitly passing null to nullable props like selectedConversationId.
  • Added a Preact named export to @talkjs/web-components, which lets you define state, effects & more using Preact
  • Changed the following in theme files: Compare 0.1.0 and 0.1.1.

Version 0.1.0

  • Breaking: changed the MessageListFooter theme component to be rendered below the message list container. It no longer scrolls along with the message list. Typing indicators have been moved to the new AfterMessages component. If you've customized the MessageListFooter component, see the upgrade guide below for more info.
  • Added a MessageListHeader theme component, rendered above the message list container.
  • Added a BeforeMessages theme component, rendered inside the message list, before the first message.
  • Added an AfterMessages theme component, rendered inside the message list, after the last message.
  • Added localizations for the emoji picker, including emoji data for various languages, so that users can enter keywords in their native language when searching for emoji.
  • Fixed a bug where the waveform of audio files would sometimes not appear in Safari 26

Version 0.0.36

  • Fixed bug where mentions dropdown would sometimes be incomplete

Version 0.0.35

  • Fixed bug where mentions dropdown would sometimes disappear or be incomplete
  • Fixed bug where drag&drop file sharing did not respect the file sharing setting in the dashboard

Version 0.0.34

  • Fixed bug where React strict mode would cause infinite loading
  • Fixed upload preview when uploading very tall images or videos

Version 0.0.33

  • Fixed incompatibility with some build tools that caused emoji picker to load forever

Version 0.0.32

  • Improved accessibility with more localized aria-label attributes
  • Fixed a bug causing crashes when a user with a non-existent role mounts the UI
  • Added localization for error messages during file upload when the file is too big or has an unsupported extension
  • Changed the following in theme files: Compare 0.0.31 and 0.0.32.

Version 0.0.31

This release contains breaking changes. See the Upgrade guide.

  • Improved keyboard accessibility for the message actions menu and the emoji reactions button
  • Removed the @talkjs/react-components/theming and @talkjs/web-components/theming package entrypoints. All of their exports are now available from @talkjs/react-components and @talkjs/web-components directly.
  • Made @talkjs/core a peer dependency of @talkjs/react-components and @talkjs/web-components
  • Changed the following in theme files: Compare 0.0.30 and 0.0.31.

Version 0.0.30

  • Added support for action buttons and action links.
  • Fixed a bug related to content suppression that would cause an error when attempting to mount the UI under certain conditions.
  • Changed the following in theme files: Compare 0.0.29 and 0.0.30.

Version 0.0.29

  • Added support for content suppression.
  • Changed the following in theme files: Compare 0.0.28 and 0.0.29.
  • Fixed a bug where, under certain conditions, editing a message would cause an error.

Version 0.0.28

  • Improved the border styling of the conversation list.
  • Improved error tracking.
  • Changed the following in theme files: Compare 0.0.27 and 0.0.28.

Version 0.0.27

  • Fixed a bug where trying to insert mentions or emojis while using a custom theme would silently fail.
  • Fixed a bug where selecting the action to edit a message would cause an error.

Version 0.0.26

  • Changed the following in theme files: Compare 0.0.25 and 0.0.26.
  • Fixed a bug that would prevent users from sending messages longer than 1,000 characters.

Version 0.0.25

  • Fixed a bug where the UI jumped when a user clicked message actions.
  • Fixed a bug that prevented programmatically selecting a conversation.
  • Fixed a bug that would make one’s scroll position jump when you add emojis from the emoji picker.
  • Fixed an issue to ensure that when a user marks a conversation as unread, it’s only marked as read again when the user switches to it or remounts.

Upgrade guide

Upgrading to 0.1.0

In the default theme, what used to be the MessageListFooter component, is now called the AfterMessages component.

If you're currently passing a MessageListFooter as part of the theme prop to the chatbox, you should update it to pass it as AfterMessages instead, like this:

1import { useMemo } from 'react';
2import { Chatbox } from '@talkjs/react-components';
3import '@talkjs/react-components/default.css';
4import './chat-header.css';
5

6function CustomMessageListFooter() {
7function CustomAfterMessages()
8  return <div>
9    <!-- Your markup -->
10  </div>;
11}
12

13export default function App() {
14  // Use useMemo so the theme object stays stable between renders.
15  const theme = useMemo(
16    () => ({
17      MessagelistFooter: CustomMessageListFooter,
18      AfterMessages: CustomAfterMessages,
19    }),
20    []
21  );
22

23  return (
24    <Chatbox
25      appId="<APP_ID>"
26      userId="sample_user_alice"
27      conversationId="sample_conversation"
28      theme={theme}
29    />
30  );
31}

If you've previously copied our default theme then the quickest way to update it is to do the following:

  • Download the latest release of our default theme
  • Rename MessageListFooter.js and MessageListFooter.css in your theme to AfterMessages.js and AfterMessages.css respectively.
  • Copy MessageListHeader (MessageListHeader.js, MessageListHeader.css), MessageListFooter (MessageListFooter.js, MessageListFooter.css), and BeforeMessages (BeforeMessages.js and BeforeMessages.css) from the newest version into your theme.
  • Copy index.js and index.css from the newest version into your theme, or update the versions in your theme to include the new files if you've made changes to the index files.

Upgrading to 0.0.31

Update all of the following imports in your code, if you have them:

1// If you're using the `@talkjs/react-components` package
2import { MessageContent } from "@talkjs/react-components/theming"
3import { MessageContent } from "@talkjs/react-components"
4

5// If you're using the `@talkjs/web-components` package
6import { MessageContent } from "@talkjs/web-components/theming"
7import { MessageContent } from "@talkjs/web-components"

If you don't have @talkjs/core installed as a dependency already, add it to your package:

1npm install @talkjs/core