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 individualDefaultAttachmentType
,DefaultChannelType
,DefaultCommandType
,DefaultEventType
DefaultMessageType
,DefaultReactionType
andDefaultUserType
parameters. - If you are interacting with the
ChannelService
orChatClientService
you'll have to provide theDefaultStreamChatGenerics
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 theStreamMessage
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.