# Upgrade to v13 ## Removal of StreamChatGenerics See the [release guide of `stream-chat`](/chat/docs/javascript/upgrade-stream-chat-to-v9/) and [TypeScript & Custom Data Types](/chat/docs/sdk/react/v13/guides/typescript_and_custom_data_types/) article. ## Changes in Message Types ### Introduction of LocalMessage type `MessageToSend`, `StreamMessage`, and `UpdatedMessage` were removed and replaced by `LocalMessage`. `LocalMessage` represents the message stored in local state. Server responses (`MessageResponse`) are converted to `LocalMessage` immediately. ### Introduction of RenderedMessage type `RenderedMessage` includes `LocalMessage` plus client-side ephemeral messages like `DateSeparatorMessage` and `IntroMessage`. ## Change in Message Composition Message composition is now managed by `MessageComposer` instances. Each composition context has its own composer: - `channel` - for main channel list message composition - `thread` - for message composition in Thread view - `legacy_thread` - for the legacy side-by-side thread layout next to the channel list - `message` - for editing a message in any message list Get the current composer with `useMessageComposer`. Introduction of `MessageComposer` leads to breaking changes described in the following sections. ### Replaced Text Autocomplete Components The following components were removed and replaced: | Removed | Replaced by | | ------------------------- | ------------------ | | AutoCompleteTextarea | TextAreaComposer | | ChatAutoComplete | TextAreaComposer | | DefaultSuggestionList | SuggestionList | | DefaultSuggestionListItem | SuggestionListItem | `ChatAutoComplete` (which rendered `AutoCompleteTextarea`) was replaced by `TextAreaComposer`. ### Removed MessageInput, ChatAutoComplete, and AutoCompleteTextarea Props The following props previously exposed on `ChatAutoComplete` and `AutoCompleteTextarea` are no longer available. **AutoCompleteTextarea** | Prop | Replacement | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `containerStyle` | Apply custom styles using CSS | | `defaultValue` | Set via `MessageComposer` configuration (`text.defaultValue`) ([see the composer configuration guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer#message-composer-configuration)) or via the `TextComposer.defaultValue` setter. | | `disabled` | Set via `MessageComposer` configuration (`text.enabled`) ([see the composer configuration guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer#message-composer-configuration)) | | `disableMentions` | Remove mentions middleware from the `TextComposer.middlewareExecutor` ([see the composer middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)) | | `dropdownClassName` | Override prop `containerClassName` directly on `SuggestionList` and pass the list component as `AutocompleteSuggestionList` to `Channel` | | `dropdownStyle` | Apply custom styles using CSS | | `itemClassName` | Override prop `className` directly on `SuggestionListItem` and pass the item component as `AutocompleteSuggestionItem` to `Channel` | | `itemStyle` | Apply custom styles using CSS | | `listClassName` | Override prop `className` directly on `SuggestionList` and pass the list component as `AutocompleteSuggestionList` to `Channel` | | `listStyle` | Apply custom styles using CSS | | `loaderClassName` | The prop was not used. No replacement provided. | | `loaderStyle` | The prop was not used. No replacement provided. | | `loadingComponent` | The prop was not used. No replacement provided. | | `grow` | Redundant prop. Use prop `maxRows` to indicate up to what number of rows the textarea can grow. | | `onCaretPositionChange` | Subscribe to `TextComposer.state` and observe `selection` ([see the state store guide](/chat/docs/sdk/react/v13/guides/sdk-state-management/)) | | `onSelect` | Add custom middleware to `TextComposer.middlewareExecutor` to handle `onSuggestionItemSelect` event ([see the composer middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)) | | `style` | Apply custom styles using CSS | | `trigger` | The current trigger value is signaled via `TextComposer.state.suggestions` | | `value` | The current (text) value is signaled via `TextComposer.state.text` | **ChatAutoComplete** The component used to forward props to `AutoCompleteTextarea`. As those are already described in the previous section, we will omit them in the below table. | Prop | Replacement | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `handleSubmit` | Customize composition via `MessageComposer.compositionMiddlewareExecutor` and draft composition via `MessageComposer.draftCompositionMiddlewareExecutor` ([see the composer middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). Sending can be customized via the `Channel` prop `doSendMessageRequest`. | | `wordReplace` | Emoji replacement now happens in `TextComposer` middleware via `onChange`. The built-in emoji middleware covers this ([see the composer middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). | **MessageInput** | Prop | Replacement | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `doFileUploadRequest` | Custom upload function can be configured via `MessageComposer` configuration (`attachments.doUploadRequest`) or `MessageComposer.attachmentManager.setCustomUploadFn` method. | | `doImageUploadRequest` | Custom upload function can be configured via `MessageComposer` configuration (`attachments.doUploadRequest`) or `MessageComposer.attachmentManager.setCustomUploadFn` method. | | `errorHandler` | To handle errors thrown during the file upload, subscribe to `client.notifications.state` and react to `notification.message` 'Error uploading attachment'. | | `getDefaultValue` | The default value is set via `MessageComposer` configuration (`text.defaultValue`) ([see the composer configuration guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer#message-composer-configuration)) or set reactively via `TextComposer.defaultValue` setter | | `mentionAllAppUsers` | Mentions configuration can be done via `TextComposer` mentions middleware ( `createMentionsMiddleware(channel, {searchSource: new MentionsSearchSource(channel, {mentionAllAppUsers: true}) })` | | `mentionQueryParams` | Override methods `MentionsSearchSource.prepareQueryUsersParams` or `MentionsSearchSource.prepareQueryMembersParams` respectively to generate filter, sort and options objects to perform user and member requests based on search text. | | `message` | `MessageComposer` is automatically provided with the edited message. No replacement. | | `noFiles` | Custom logic to filter files can be specified via `MessageComposer` configuration (`attachments.fileUploadFilter`) or `MessageComposer.attachmentManager.fileUploadFilter` setter. | | `parent` | The parent message is automatically provided to the `MessageComposer`. No replacement. | | `publishTypingEvent` | Configure with `MessageComposer.textComposer.publishTypingEvents` | | `urlEnrichmentConfig` | The link preview config can be specified via `MessageComposer.linkPreviews` configuration or `MessageComposer.linkPreviewsManager` setters | | `useMentionsTransliteration` | Mentions configuration can be done via `TextComposer` mentions middleware ( `createMentionsMiddleware(channel, {searchSource: new MentionsSearchSource(channel, {transliterate: (textToTransliterate: string) => string}) })` | Further, the signature of function passed to `overrideSubmitHandler` has changed. It now accepts a single object parameter: ```ts type overrideSubmitHandler = (params: { cid: string; localMessage: LocalMessage; message: Message; sendOptions: SendMessageOptions; }) => Promise | void; ``` ### Removed Channel Props | Prop | Replacement | | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `acceptedFiles` | The array of strings can be specified via `MessageComposer` configuration (`attachments.acceptedFiles`) or `MessageComposer.attachmentManager.acceptedFiles` setter. | | `enrichURLForPreview`, `enrichURLForPreviewConfig` | The link preview config can be specified via `MessageComposer.linkPreviews` configuration or `MessageComposer.linkPreviewsManager` setters. | | `maxNumberOfFiles` | Can be specified via `MessageComposer` configuration (`attachments.maxNumberOfFilesPerMessage`) or `MessageComposer.attachmentManager.maxNumberOfFilesPerMessage` setter. | | `multipleUploads` | Does not have replacement. Multiple uploads are inferred from configuration parameter `maxNumberOfFilesPerMessage` value greater than 1. | | `TriggerProvider` | Triggers are characters in composed message text that cause suggestions to be rendered (emoji, mentions, commands). This component served to propagate potentially custom trigger logic. This is however now done via `TextComposer.middlewareExecutor` by providing custom middleware functions ([see the composer middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). | ### Autocomplete trigger logic migration Autocomplete triggers are now handled by `TextComposer` middleware in `stream-chat`. The following types were removed from `stream-chat-react`: - `SuggestionHeaderProps` - `ChatAutoCompleteProps` - `AutocompleteMinimalData` - `CommandTriggerSetting` - `EmojiTriggerSetting` - `UserTriggerSetting` - `TriggerSetting` - `TriggerSettings` This migration also led to removal of the trigger generic parameter from `stream-chat-react` components. Typed text now flows through middleware before it is committed to `MessageComposer` state. ### ChannelActionContext Changes Besides the `LocalMessage` change for `editMessage`, `openThread`, `removeMessage`, and `updateMessage`, the following changes apply: The `sendMessage` function signature has changed. Now it accepts a single object parameter: ```ts type sendMessage = (params: { localMessage: LocalMessage; message: Message; options?: SendMessageOptions; }) => Promise; ``` `setQuotedMessage` was removed. Quoted message state is now handled by `MessageComposer`, via `MessageComposer.setQuotedMessage(quotedMessage: LocalMessage | null)`. ### ChannelStateContext Changes Removed `Channel` props are now absent from `ChannelStateContext` too: `acceptedFiles`, `enrichURLForPreview`, parts of `enrichURLForPreviewConfig` (`debounceURLEnrichmentMs`, `findURLFn`, `onLinkPreviewDismissed`), and `multipleUploads`. | Prop | Replacement | | --------------- | ------------------------------------------------------------------------------------ | | `quotedMessage` | Value changes can now be observed by subscribing to `MessageComposer.state` changes. | ```ts const messageComposerStateSelector = (state: MessageComposerState) => ({ quotedMessage: state.quotedMessage, }); const messageComposer = useMessageComposer(); const { quotedMessage } = useStateStore( messageComposer.state, messageComposerStateSelector, ); ``` ### useMessageInputState → useMessageInputControls Message composition state moved from `stream-chat-react` to `stream-chat` and `MessageComposer`. As a result, `useMessageInputState` was renamed to `useMessageInputControls` and now exposes only the following API via `MessageInputContext`: - `handleSubmit` - Also received an overhaul resulting in signature change (see below). - `onPaste` - `recordingController` - `textareaRef` Message input state and most of the API now live in `MessageComposer`, not `MessageInputContext`. ### MessageInputContext Changes With the `useMessageInputState` refactor: **1. Context Values Removed** | Prop | Replacement | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `insertText` | Use `MessageComposer.textComposer.insertText` method | | `handleChange` | Use `MessageComposer.textComposer.handleChange` method | | `isUploadEnabled` | Use `useAttachmentManagerState` hook to subscribe to `isUploadEnabled` value changes | | `maxFilesLeft` | Use `useAttachmentManagerState` hook to subscribe to `availableUploadSlots` value changes | | `numberOfUploads` | Use `useAttachmentManagerState` hook to subscribe to `successfulUploadsCount` and `uploadsInProgressCount` value changes | | `onSelectUser` | Use `MessageComposer.textComposer.handleSelect` method to announce a suggestion item has been selected. It is possible to register custom TextComposer middleware ([see the middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). | | `removeAttachments` | Use `MessageComposer.attachmentManager.removeAttachments` method | | `uploadAttachment` | Use `MessageComposer.attachmentManager.uploadAttachment` method | | `uploadNewFiles` | Use `MessageComposer.attachmentManager.uploadFiles` method | | `upsertAttachments` | Use `MessageComposer.attachmentManager.upsertAttachments` method | | `closeCommandsList` | Use `MessageComposer.textComposer.closeSuggestions` method | | `openCommandsList` | Done automatically upon trigger identification. You can register custom `TextComposer` `onChange` middleware or override trigger characters ([see the middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). | | `showCommandsList` | Check whether the command list is open via `TextComposer.suggestions?.trigger === commandTrigger` | | `closeMentionsList` | Use `MessageComposer.textComposer.closeSuggestions` method | | `openMentionsList` | Done automatically upon trigger identification. We can register a custom `TextComposer` middleware for `onChange` event to introduce custom logic, or override the mentions trigger character(s) ([see the middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)). | | `showMentionsList` | Check whether the mentions list is open via `TextComposer.suggestions?.trigger === mentionTrigger` | The removed values forwarded from `MessageInputProps` to `MessageInputContext` have been documented above. **2. handleSubmit Signature Change** `handleSubmit` now accepts only an optional `event` object. The `customMessageData` and `options` parameters were removed. Before: ```ts type handleSubmit = ( event?: React.BaseSyntheticEvent, customMessageData?: Partial>, options?: SendMessageOptions, ) => Promise; ``` Now: ```ts type handleSubmit = (event?: React.BaseSyntheticEvent) => Promise; ``` Custom message data can be injected via middleware ([see the middleware guide](/chat/docs/sdk/react/v13/components/message-input-components/message-composer-middleware/)) or by setting it directly: ```ts messageComposer.customDataManager.setMessageData({ a: "b" }); ``` ### Attachment Identity Functions Moved to stream-chat The following identity functions were moved to `stream-chat`: | Original Name | New Name | | --------------------------------- | --------------------------------- | | `isLocalAttachment` | `isLocalAttachment` | | `isScrapedContent` | `isScrapedContent` | | none | `isLocalUploadAttachment` | | `isFileAttachment` | `isFileAttachment` | | `isLocalFileAttachment` | `isLocalFileAttachment` | | `isUploadedImage` | `isImageAttachment` | | none | `isLocalImageAttachment` | | `isAudioAttachment` | `isAudioAttachment` | | `isLocalAudioAttachment` | `isLocalAudioAttachment` | | `isVoiceRecordingAttachment` | `isVoiceRecordingAttachment` | | `isLocalVoiceRecordingAttachment` | `isLocalVoiceRecordingAttachment` | | `isMediaAttachment` | `isVideoAttachment` | | `isLocalMediaAttachment` | `isLocalVideoAttachment` | | none | `isUploadedAttachment` | `isGalleryAttachmentType` remains in `stream-chat-react` because it’s SDK-specific. ### Message Composition Changes Summary Message composition is now handled by the `MessageComposer` class. Use `useMessageComposer` to get the correct instance for the current context. APIs moved to `MessageComposer` were removed from the relevant React contexts and component props in `stream-chat-react`. ## Removal of Channel.dragAndDropWindow Prop The [`Channel`](/chat/docs/sdk/react/v13/components/core-components/channel/) prop [`dragAndDropWindow`](/chat/docs/sdk/react/v12/components/core-components/channel/#draganddropwindow) and associated [`optionalMessageInputProps`](/chat/docs/sdk/react/v12/components/core-components/channel/#optionalmessageinputprops) were removed. Use [`WithDragAndDropUpload`](/chat/docs/sdk/react/v13/components/utility-components/with-drag-and-drop-upload/#basic-usage) instead. --- This page was last updated at 2026-04-21T07:55:45.814Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/release-guides/upgrade-to-v13/](https://getstream.io/chat/docs/sdk/react/v13/release-guides/upgrade-to-v13/).