v13.0.0

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
     name: Release from "${{ github.ref_name }}" branch
     runs-on: ubuntu-latest
     # GH does not allow to limit branches in the workflow_dispatch settings so this here is a safety measure
-    if: ${{ inputs.dry_run || startsWith(github.ref_name, 'release') || startsWith(github.ref_name, 'master') }}
+    if: ${{ inputs.dry_run || startsWith(github.ref_name, 'release') || startsWith(github.ref_name, 'master') || startsWith(github.ref_name, 'rc')}}
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0",
+  "src/**/*.{js,ts,tsx,md}": "eslint --max-warnings 0 --no-warn-ignored",
   "**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}": "prettier --list-different",
   "src/i18n/*.json": "yarn run validate-translations"
 }

.releaserc.json

@@ -1,5 +1,10 @@
 {
   "branches": [
+    {
+      "name": "rc",
+      "channel": "rc",
+      "prerelease": "rc"
+    },
     {
       "name": "master",
       "channel": "latest"

CHANGELOG.md

@@ -1,3 +1,68 @@
+## [13.0.0-rc.1](https://github.com/GetStream/stream-chat-react/compare/v12.14.0...v13.0.0-rc.1) (2025-04-28)
+
+### ⚠ BREAKING CHANGES
+
+* `Channel` props `dragAndDropWindow` &
+`optionalMessageInputProps` have been removed, use
+* Remove ChatAutoComplete, AutoCompleteTextarea,
+DefaultSuggestionList, DefaultSuggestionListItem and introduce
+TextareaComposer, SuggestionList, SuggestionListItem
+* Remove defaultScrollToItem function previously used by
+SuggestionList
+* Removed DefaultTriggerProvider component
+* Remove from Channel props - acceptedFiles,
+enrichURLForPreview, enrichURLForPreviewConfig, maxNumberOfFiles,
+multipleUploads, TriggerProvider
+* Removal of acceptedFiles, debounceURLEnrichmentMs,
+enrichURLForPreview, findURLFn, multipleUploads, onLinkPreviewDismissed,
+quotedMessage from ChannelStateContext
+* Changed signature for functions sendMessage and
+editMessage in ChannelActionContext
+* Changed signature for handleSubmit
+* Removed setQuotedMessage from ChannelActionContext
+* Removed types MessageToSend, StreamMessage,
+UpdatedMessage in favor of LocalMessage or RenderedMessage
+* Removed Trigger generics from ChannelProps
+* Message input state as well as the API is now kept
+within MessageComposer instead of MessageInputContext
+* Renamed useMessageInputState to useMessageInputControls
+as it does not handle the composition state anymore
+* Removed from MessageInputProps - disabled,
+disableMentions, doFileUploadRequest, doImageUploadRequest,
+errorHandler, getDefaultValue, mentionAllAppUsers, mentionQueryParams,
+message, noFiles, urlEnrichmentConfig, useMentionsTransliteration,
+additionalTextareaProps do not expect default value anymore
+* Changed the signature of MessageInput prop
+overrideSubmitHandler
+* Local attachment and link preview types moved to
+stream-chat
+* The SuggestionListItem UI components for
+TextareaComposer receive tokenizedDisplayName instead of itemNameParts
+* Removed duplicate types SendMessageOptions,
+UpdateMessageOptions which should be imported from stream-chat instead
+* Removed type LinkPreviewListProps - LinkPreviewList
+does not have any props anymore
+* dropped `StreamChatGenerics`, use `Custom<Entity>Data`
+to extend your types
+
+### Bug Fixes
+
+* replace StreamChatGenerics with module augmentation ([#2634](https://github.com/GetStream/stream-chat-react/issues/2634)) ([67bed79](https://github.com/GetStream/stream-chat-react/commit/67bed794555cd1e71456c0732c6bacfcd2712685))
+
+### Features
+
+* default data interfaces ([#2683](https://github.com/GetStream/stream-chat-react/issues/2683)) ([a88e145](https://github.com/GetStream/stream-chat-react/commit/a88e1456e970b6c344545422bdbc4edd1370b862))
+* introduce WithDragAndDropUpload component ([#2688](https://github.com/GetStream/stream-chat-react/issues/2688)) ([6b03abd](https://github.com/GetStream/stream-chat-react/commit/6b03abd707165d08539af435b940dd13025481d2))
+* message composer ([#2669](https://github.com/GetStream/stream-chat-react/issues/2669)) ([fa2519b](https://github.com/GetStream/stream-chat-react/commit/fa2519b50f1a3bb8837369188bffb356509236ed)), closes [#2688](https://github.com/GetStream/stream-chat-react/issues/2688)
+
+### Chores
+
+* **deps:** upgrade @stream-io/stream-chat-css to v5.8.1 ([#2689](https://github.com/GetStream/stream-chat-react/issues/2689)) ([d0c32e3](https://github.com/GetStream/stream-chat-react/commit/d0c32e33225c2e72bf4f14f368c34fa3a34c543c))
+
+### Refactors
+
+* simplify WithDragAndDropUpload API ([#2691](https://github.com/GetStream/stream-chat-react/issues/2691)) ([46c9add](https://github.com/GetStream/stream-chat-react/commit/46c9add73d8c37ed65cd0c2808c148199820889a))
+
 ## [12.14.0](https://github.com/GetStream/stream-chat-react/compare/v12.13.1...v12.14.0) (2025-04-08)
 
 ### Features

eslint.config.mjs

@@ -91,6 +91,7 @@ export default tseslint.config(
         { ignoreRestSiblings: false, caughtErrors: 'none' },
       ],
       '@typescript-eslint/no-unsafe-function-type': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-wrapper-object-types': 'error',
       '@typescript-eslint/no-non-null-assertion': 'error',
       'no-empty-function': 'off',

examples/capacitor/src/App.tsx

@@ -21,25 +21,7 @@ const filters: ChannelFilters = { type: 'messaging', members: { $in: [userId] }
 const options: ChannelOptions = { state: true, presence: true, limit: 10 };
 const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  messageType: LocalMessageType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+const chatClient = StreamChat.getInstance(apiKey);
 
 if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
   chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);

examples/typescript/src/App.tsx

@@ -23,31 +23,7 @@ const filters: ChannelFilters = { type: 'messaging', members: { $in: [userId] }
 const options: ChannelOptions = { state: true, presence: true, limit: 10 };
 const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMemberType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalPollOptionType = Record<string, unknown>;
-type LocalPollType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  memberType: LocalMemberType;
-  messageType: LocalMessageType;
-  pollOptionType: LocalPollOptionType;
-  pollType: LocalPollType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+const chatClient = StreamChat.getInstance(apiKey);
 
 if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
   chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);

examples/vite/src/App.tsx

@@ -1,4 +1,11 @@
-import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import { useEffect } from 'react';
+import {
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  LocalMessage,
+  TextComposerMiddleware,
+} from 'stream-chat';
 import {
   AIStateIndicator,
   Channel,
@@ -8,13 +15,19 @@ import {
   Chat,
   ChatView,
   MessageInput,
-  StreamMessage,
+  SendButtonProps,
   Thread,
   ThreadList,
   useCreateChatClient,
+  useMessageComposer,
   VirtualizedMessageList as MessageList,
   Window,
 } from 'stream-chat-react';
+import { createTextComposerEmojiMiddleware } from 'stream-chat-react/emojis';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
+
+init({ data });
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
@@ -40,40 +53,30 @@ const filters: ChannelFilters = {
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMemberType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalPollOptionType = Record<string, unknown>;
-type LocalPollType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  memberType: LocalMemberType;
-  messageType: LocalMessageType;
-  pollOptionType: LocalPollOptionType;
-  pollType: LocalPollType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const isMessageAIGenerated = (message: StreamMessage<StreamChatGenerics>) =>
-  !!message?.ai_generated;
+// @ts-ignore
+const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 
 const App = () => {
-  const chatClient = useCreateChatClient<StreamChatGenerics>({
+  const chatClient = useCreateChatClient({
     apiKey,
     tokenOrProvider: userToken,
     userData: { id: userId },
   });
 
+  useEffect(() => {
+    if (!chatClient) return;
+
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [
+          createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware,
+        ],
+        position: { before: 'stream-io/text-composer/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   if (!chatClient) return <>Loading...</>;
 
   return (
@@ -89,12 +92,12 @@ const App = () => {
             showChannelSearch
             additionalChannelSearchProps={{ searchForChannels: true }}
           />
-          <Channel>
+          <Channel emojiSearchIndex={SearchIndex}>
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
               <AIStateIndicator />
-              <MessageInput focus />
+              <MessageInput focus audioRecordingEnabled />
             </Window>
             <Thread virtualized />
           </Channel>