The TalkJS Components SDK 0.3.0 is here, bringing a redesigned default theme and more flexibility in how you work with theme files.
A fresh default theme
The default theme has been redesigned with a cleaner, more modern design. When upgrading to the latest Components SDK version, you'll see the new look straightaway.
Do you have an existing integration, and want to preserve your current look and feel? The previous default theme is still available: it’s now called classic. You can opt in to the classic theme by setting the new baseTheme prop on your Chatbox, ConversationList, or Inbox component:
<Chatbox baseTheme="classic" ... />This means that you won’t see any visual changes unless you choose to upgrade and adopt the new theme. You can migrate on your own timeline.
Both the default and classic themes are available to copy, modify, and extend. You can find them in the updated talkjs/themes repository (previously talkjs/theme-default).
Theme formats for every stack
Themes were previously distributed as JS files. That worked well for many setups, but it wasn't a natural fit for TypeScript projects or React codebases that use JSX.
Starting with 0.3.0, themes are available in four formats, to best match your setup:
| Format | Best for |
|---|---|
react-jsx |
React apps using JavaScript |
react-tsx |
React apps using TypeScript |
web-js |
Other frameworks or plain JavaScript without a framework |
web-ts |
Other frameworks or plain TypeScript without a framework |
This means you can now copy a theme file that already matches the syntax and tooling of your project. If you're working in a TypeScript-first codebase, you get proper type safety in your theme components from the start. If you're building a React app, the theme files use JSX syntax throughout, which makes them easier to read, edit, and reason about.
Stepping stone releases: 0.2.3 and 0.2.4
To keep the upgrade path smooth, two intermediate releases precede Components SDK 0.3.0:
- Version 0.2.3 makes small API changes around search functionality, including a new
searchQueryprop and asetSearchQuery()method onChatboxController. - Version 0.2.4 updates theme file formatting to align with the new build output structure.
If you've customized how search works in your theme, or modified one or more other theme components, check the guides for 0.2.3 and 0.2.4 and apply any relevant changes to your local copies.
Get started
To try out the new default theme before upgrading, take a look at the demo sandbox. Check the full changelog for complete details.
