Skip to main content

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/serviceInput nameReplacement
MessageListComponentenabledMessageActionsInputUse our permission framework to control what actions are available to different users
MessageListComponentareReactionsEnabledUse our permission framework to control what actions are available to different users
MessageInputConfigServiceacceptedFileTypesUse application settings to control the accepted file types
MessageInputComponentacceptedFileTypesUse application settings to control the accepted file types
MessageComponentareReactionsEnabledUse 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.
MessageComponentcanReactToMessageUse 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.
MessageComponentcanReceiveReadEventsUse our permission framework to control what actions are available to different users

Centralized customizations

DescriptionOld optionNew option
The autocomplete list item template for mentioning usersAutocompleteTextareaComponent.mentionAutocompleteItemTemplateCustomTemplatesService.mentionAutocompleteItemTemplate$
The autocomplete list item template for commandsAutocompleteTextareaComponent.commandAutocompleteItemTemplateCustomTemplatesService.commandAutocompleteItemTemplate$
Item in the channel listChannelListComponent.customChannelPreviewTemplateCustomTemplatesService.customChannelPreviewTemplate$
The message input template used when editing a messageMessageActionsBoxComponent.messageInputTemplateCustomTemplatesService.messageInputTemplate$
The message input template used when editing a messageMessageComponent.messageInputTemplateCustomTemplatesService.messageInputTemplate$
The template used for displaying a mention inside a messageMessageComponent.mentionTemplateCustomTemplatesService.mentionTemplate$
The autocomplete list item template for mentioning usersMessageInputComponent.mentionAutocompleteItemTemplateCustomTemplatesService.mentionAutocompleteItemTemplate$
The autocomplete list item template for commandsMessageInputComponent.commandAutocompleteItemTemplateCustomTemplatesService.commandAutocompleteItemTemplate$
The template for emoji pickerMessageInputComponent.emojiPickerTemplate$CustomTemplatesService.emojiPickerTemplate$
The template used to display a message in the message listMessageListComponent.messageTemplateCustomTemplatesService.messageTemplate$
The message input template used when editing a messageMessageListComponent.messageInputTemplateCustomTemplatesService.messageInputTemplate$
The template used for displaying a mention inside a messageMessageListComponent.mentionTemplateCustomTemplatesService.mentionTemplate$
The typing indicator template used in the message listMessageListComponent.typingIndicatorTemplateCustomTemplatesService.typingIndicatorTemplate$
The typing indicator template used in the message listMessageReactionsComponent.typingIndicatorTemplateCustomTemplatesService.typingIndicatorTemplate$
The autocomplete list item template for commandsMessageInputConfigService.commandAutocompleteItemTemplateCustomTemplatesService.commandAutocompleteItemTemplate$
The autocomplete list item template for mentioning usersMessageInputConfigService.mentionAutocompleteItemTemplateCustomTemplatesService.mentionAutocompleteItemTemplate$
The template for emoji pickerMessageInputConfigService.emojiPickerTemplateCustomTemplatesService.emojiPickerTemplate$
The template for channel actionsChannelHeaderComponent.channelActionsTemplateCustomTemplatesService.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 nameChannel capabilityComment
quotequote-message
pinpin-messageCurrently turned off because not implemented
flagflag-message
editupdate-own-message
edit-anyupdate-any-message

The mute action is removed.

Did you find this page helpful?