Upgrade from v2

About v3

This version's main focus was to enhance the customizability of the SDK, the two main features are:

• there are many new customization points where you can provide your own template to override the default UI - our customization guide covers this topic in detail
• you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our generics guide explain this topic in more details

Below you can find the list of breaking changes and instructions on how to update your code.

Peer dependencies

stream-chat

Upgrade to stream-chat ^6.4.0.

You might need to update your code if you created custom components/services that used stream-chat in your application.

The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:

• If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the DefaultStreamChatGenerics parameter instead of the individual DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType DefaultMessageType, DefaultReactionType and DefaultUserType parameters.
• If you are interacting with the ChannelService or ChatClientService you'll have to provide the DefaultStreamChatGenerics parameter (or a descended) for message reactions, attachments, commands, channels or events (you don't need to provide it for messages as it's already part of the StreamMessage class)

Our generics guide explains this topic in more details.

You can find the full list of breaking changes in stream-chat v5 and v6 on GitHub.

Angular 13

Run the following command to upgrade if you're using Angular 13:

npm install stream-chat@6.4.0 stream-chat-angular

Angular 12

Run the following command to upgrade if you're using Angular 12:

npm install stream-chat@6.4.0 stream-chat-angular@3 --legacy-peer-deps

stream-chat-css

You can drop the @stream-io/stream-chat-css dependency because going forward stream-chat-angular will encapsulate the library.

Rewrite your stylesheet imports to this:

~stream-chat-angular/src/assets/styles/scss/index.scss

Or this if you were using CSS:

~stream-chat-angular/src/assets/styles/css/index.css

It's still possible to individually import stylesheets you just have to replace the ~@stream-io/stream-chat-css/dist prefix with ~stream-chat-angular/src/assets/styles.

Inputs removed in favor of channel capabilities

The following inputs are removed:

Component/service	Input name	Replacement
MessageListComponent	enabledMessageActionsInput	Use our permission framework to control what actions are available to different users
MessageListComponent	areReactionsEnabled	Use our permission framework to control what actions are available to different users
MessageInputConfigService	acceptedFileTypes	Use application settings to control the accepted file types
MessageInputComponent	acceptedFileTypes	Use application settings to control the accepted file types
MessageComponent	areReactionsEnabled	Use our permission framework to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled.
MessageComponent	canReactToMessage	Use our permission framework to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled.
MessageComponent	canReceiveReadEvents	Use our permission framework to control what actions are available to different users

Centralized customizations

Description	Old option	New option
The autocomplete list item template for mentioning users	AutocompleteTextareaComponent.mentionAutocompleteItemTemplate	CustomTemplatesService.mentionAutocompleteItemTemplate$
The autocomplete list item template for commands	AutocompleteTextareaComponent.commandAutocompleteItemTemplate	CustomTemplatesService.commandAutocompleteItemTemplate$
Item in the channel list	ChannelListComponent.customChannelPreviewTemplate	CustomTemplatesService.customChannelPreviewTemplate$
The message input template used when editing a message	MessageActionsBoxComponent.messageInputTemplate	CustomTemplatesService.messageInputTemplate$
The message input template used when editing a message	MessageComponent.messageInputTemplate	CustomTemplatesService.messageInputTemplate$
The template used for displaying a mention inside a message	MessageComponent.mentionTemplate	CustomTemplatesService.mentionTemplate$
The autocomplete list item template for mentioning users	MessageInputComponent.mentionAutocompleteItemTemplate	CustomTemplatesService.mentionAutocompleteItemTemplate$
The autocomplete list item template for commands	MessageInputComponent.commandAutocompleteItemTemplate	CustomTemplatesService.commandAutocompleteItemTemplate$
The template for emoji picker	MessageInputComponent.emojiPickerTemplate$	CustomTemplatesService.emojiPickerTemplate$
The template used to display a message in the message list	MessageListComponent.messageTemplate	CustomTemplatesService.messageTemplate$
The message input template used when editing a message	MessageListComponent.messageInputTemplate	CustomTemplatesService.messageInputTemplate$
The template used for displaying a mention inside a message	MessageListComponent.mentionTemplate	CustomTemplatesService.mentionTemplate$
The typing indicator template used in the message list	MessageListComponent.typingIndicatorTemplate	CustomTemplatesService.typingIndicatorTemplate$
The typing indicator template used in the message list	MessageReactionsComponent.typingIndicatorTemplate	CustomTemplatesService.typingIndicatorTemplate$
The autocomplete list item template for commands	MessageInputConfigService.commandAutocompleteItemTemplate	CustomTemplatesService.commandAutocompleteItemTemplate$
The autocomplete list item template for mentioning users	MessageInputConfigService.mentionAutocompleteItemTemplate	CustomTemplatesService.mentionAutocompleteItemTemplate$
The template for emoji picker	MessageInputConfigService.emojiPickerTemplate	CustomTemplatesService.emojiPickerTemplate$
The template for channel actions	ChannelHeaderComponent.channelActionsTemplate	CustomTemplatesService.channelActionsTemplate$

ChatClient.notification$ renamed to events$

The notification$ stream on the ChatClientService was renamed to events$ as it better represents what this Observable does.

The events$ stream emits the received client, notification and user presence events.

The payload of this Observable was renamed from Notification to ClientEvent.

Custom action names removed

Use our permission framework to control the authorization of the following message actions:

Custom action name	Channel capability	Comment
quote	quote-message
pin	pin-message	Currently turned off because not implemented
flag	flag-message
edit	update-own-message
edit-any	update-any-message

The mute action is removed.