feat!: add text composer and poll composer integration to the message input

examples/ExpoMessaging/yarn.lock

@@ -4070,6 +4070,11 @@ emoji-regex@^10.3.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
   integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
 
+emoji-regex@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -7441,6 +7446,21 @@ stream-chat@^9.0.0:
     linkifyjs "^4.2.0"
     ws "^8.18.1"
 
+stream-chat@^8.57.6:
+  version "8.60.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.60.0.tgz#b67d4fbb185da53fb8ac5fc5759986d6ad7e19a3"
+  integrity sha512-7FpO7Wno++r+n+x9aFuXtGYtNO06CIMd2Bxe3doYZLhMfS0nuaXloeFlGcMT0r4U/6bnguz1qQdDJUPNQAS8bQ==
+  dependencies:
+    "@babel/runtime" "^7.27.0"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.5.10"
+
 stream-slice@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/stream-slice/-/stream-slice-0.1.2.tgz#2dc4f4e1b936fb13f3eb39a2def1932798d07a4b"

examples/SampleApp/package.json

@@ -23,6 +23,7 @@
     "clean-all": "yarn clean && rm -rf node_modules && rm -rf ios/Pods && rm -rf vendor && bundle install && yarn install && cd ios && bundle exec pod install && cd -"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
     "@notifee/react-native": "^9.1.8",
     "@op-engineering/op-sqlite": "^11.4.7",
     "@react-native-async-storage/async-storage": "^2.1.1",
@@ -35,6 +36,8 @@
     "@react-navigation/drawer": "7.1.1",
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/stack": "^7.1.1",
+    "emoji-mart": "^5.6.0",
+    "lodash.mergewith": "^4.6.2",
     "react": "19.0.0",
     "react-native": "^0.78.0",
     "react-native-audio-recorder-player": "^3.6.12",
@@ -66,6 +69,7 @@
     "@react-native/typescript-config": "^0.78.0",
     "@rnx-kit/metro-config": "^2.0.1",
     "@types/jest": "^29.5.13",
+    "@types/lodash.mergewith": "^4.6.9",
     "@types/react": "^19.0.0",
     "@types/react-test-renderer": "^19.0.0",
     "eslint": "^9.20.1",

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -59,11 +59,7 @@ const baseFilters = {
   type: 'messaging',
 };
 
-const sort: ChannelSort = [
-  { pinned_at: -1 },
-  { last_message_at: -1 },
-  { updated_at: -1 },
-];
+const sort: ChannelSort = [{ pinned_at: -1 }, { last_message_at: -1 }, { updated_at: -1 }];
 
 const options = {
   presence: true,

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type { Channel as StreamChatChannel } from 'stream-chat';
+import type {
+  LocalMessage,
+  Channel as StreamChatChannel,
+  TextComposerMiddleware,
+} from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
   Channel,
@@ -13,6 +17,7 @@ import {
   useTheme,
   useTypingString,
   AITypingIndicatorView,
+  createTextComposerEmojiMiddleware,
 } from 'stream-chat-react-native';
 import { Platform, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -25,10 +30,10 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
+init({ data });
 
 export type ChannelScreenNavigationProp = StackNavigationProp<
   StackNavigatorParamList,
@@ -115,12 +120,9 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     },
   } = useTheme();
 
-  const [channel, setChannel] = useState<StreamChatChannel | undefined>(
-    channelFromProp,
-  );
+  const [channel, setChannel] = useState<StreamChatChannel | undefined>(channelFromProp);
 
-  const [selectedThread, setSelectedThread] =
-    useState<ThreadContextValue['thread']>();
+  const [selectedThread, setSelectedThread] = useState<ThreadContextValue['thread']>();
 
   useEffect(() => {
     const initChannel = async () => {
@@ -142,13 +144,30 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     setSelectedThread(undefined);
   });
 
-  const onThreadSelect = useCallback((thread) => {
-    setSelectedThread(thread);
-    navigation.navigate('ThreadScreen', {
-      channel,
-      thread,
+  useEffect(() => {
+    if (!chatClient) {
+      return;
+    }
+
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware],
+        position: { after: 'stream-io/text-composer/mentions-middleware' },
+        unique: true,
+      });
     });
-  }, [channel, navigation]);
+  }, [chatClient]);
+
+  const onThreadSelect = useCallback(
+    (thread: LocalMessage | null) => {
+      setSelectedThread(thread);
+      navigation.navigate('ThreadScreen', {
+        channel,
+        thread,
+      });
+    },
+    [channel, navigation],
+  );
 
   if (!channel || !chatClient) {
     return null;
@@ -168,12 +187,14 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         thread={selectedThread}
       >
         <ChannelHeader channel={channel} />
-        <MessageList
-          onThreadSelect={onThreadSelect}
-        />
+        <MessageList onThreadSelect={onThreadSelect} />
         <AITypingIndicatorView channel={channel} />
         <MessageInput />
       </Channel>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

examples/SampleApp/yarn.lock

@@ -1051,6 +1051,11 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
+"@emoji-mart/data@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.2.1.tgz#0ad70c662e3bc603e23e7d98413bd1e64c4fcb6c"
+  integrity sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
@@ -2566,6 +2571,18 @@
     "@types/ms" "*"
     "@types/node" "*"
 
+"@types/lodash.mergewith@^4.6.9":
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.9.tgz#7093028a36de3cae4495d03b9d92c351cab1f8bf"
+  integrity sha512-fgkoCAOF47K7sxrQ7Mlud2TH023itugZs2bUg8h/KzT+BnZNrR2jAOmaokbLunHNnobXVWOezAeNn/lZqwxkcw==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.16"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.16.tgz#94ae78fab4a38d73086e962d0b65c30d816bfb0a"
+  integrity sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==
+
 "@types/ms@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78"
@@ -3872,7 +3889,12 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
-emoji-regex@^10.3.0:
+emoji-mart@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.6.0.tgz#71b3ed0091d3e8c68487b240d9d6d9a73c27f023"
+  integrity sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==
+
+emoji-regex@^10.4.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
   integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
@@ -5931,6 +5953,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.mergewith@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
@@ -7582,6 +7609,21 @@ stream-chat@^9.0.0:
     linkifyjs "^4.2.0"
     ws "^8.18.1"
 
+stream-chat@^8.57.6:
+  version "8.60.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.60.0.tgz#b67d4fbb185da53fb8ac5fc5759986d6ad7e19a3"
+  integrity sha512-7FpO7Wno++r+n+x9aFuXtGYtNO06CIMd2Bxe3doYZLhMfS0nuaXloeFlGcMT0r4U/6bnguz1qQdDJUPNQAS8bQ==
+  dependencies:
+    "@babel/runtime" "^7.27.0"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.5.10"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

examples/TypeScriptMessaging/yarn.lock

@@ -3361,7 +3361,7 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
-emoji-regex@^10.3.0:
+emoji-regex@^10.3.0, emoji-regex@^10.4.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
   integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
@@ -6968,6 +6968,21 @@ stream-chat@^9.0.0:
     linkifyjs "^4.2.0"
     ws "^8.18.1"
 
+stream-chat@^8.57.6:
+  version "8.60.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.60.0.tgz#b67d4fbb185da53fb8ac5fc5759986d6ad7e19a3"
+  integrity sha512-7FpO7Wno++r+n+x9aFuXtGYtNO06CIMd2Bxe3doYZLhMfS0nuaXloeFlGcMT0r4U/6bnguz1qQdDJUPNQAS8bQ==
+  dependencies:
+    "@babel/runtime" "^7.27.0"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.5.10"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

package/native-package/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "es6-symbol": "^3.1.3",
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "7.0.0"
+    "stream-chat-react-native-core": "link:../"
   },
   "peerDependencies": {
     "@react-native-camera-roll/camera-roll": ">=7.8.0",

package/native-package/yarn.lock

@@ -1819,10 +1819,10 @@ electron-to-chromium@^1.5.73:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.112.tgz#8d3d95d4d5653836327890282c8eda5c6f26626d"
   integrity sha512-oen93kVyqSb3l+ziUgzIOlWt/oOuy4zRmpwestMn4rhFWAoFJeFuCVte9F2fASjeZZo7l/Cif9TiyrdW4CwEMA==
 
-emoji-regex@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
-  integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
+emoji-regex@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"

package/package.json

@@ -68,7 +68,7 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.1.1",
     "dayjs": "1.10.5",
-    "emoji-regex": "^10.3.0",
+    "emoji-regex": "^10.4.0",
     "i18next": "^21.6.14",
     "intl-pluralrules": "^2.0.1",
     "linkifyjs": "^4.1.1",
@@ -81,8 +81,10 @@
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
+    "@emoji-mart/data": "^1.1.0",
     "@op-engineering/op-sqlite": ">=9.3.0",
     "@react-native-community/netinfo": ">=11.3.1",
+    "emoji-mart": "^5.4.0",
     "react-native": ">=0.71.0",
     "react-native-gesture-handler": ">=2.16.1",
     "react-native-reanimated": ">=3.16.0",
@@ -91,6 +93,12 @@
   "peerDependenciesMeta": {
     "@op-engineering/op-sqlite": {
       "optional": true
+    },
+    "emoji-mart": {
+      "optional": true
+    },
+    "@emoji-mart/data": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/components/Attachment/Gallery.tsx

@@ -30,6 +30,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { isVideoPlayerAvailable } from '../../native';
 import { FileTypes } from '../../types/types';

package/src/components/Attachment/Giphy.tsx

@@ -70,10 +70,10 @@ const styles = StyleSheet.create({
   giphyHeaderText: {
     fontSize: 16,
     fontWeight: '600',
+    marginHorizontal: 8,
   },
   giphyHeaderTitle: {
     fontSize: 14,
-    marginLeft: 8,
   },
   giphyMask: {
     bottom: 8,
@@ -88,9 +88,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
     padding: 8,
-    width: '60%',
   },
   imageErrorIndicatorStyle: {
     alignItems: 'center',