Merge branch 'develop' into V7

# Conflicts:
#	package/expo-package/package.json
#	package/native-package/package.json
#	package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
#	package/src/components/MessageInput/MessageInput.tsx
#	package/src/components/MessageInput/MoreOptionsButton.tsx
#	package/src/contexts/messageInputContext/MessageInputContext.tsx
#	package/src/contexts/suggestionsContext/SuggestionsContext.tsx

Author: isekovanic

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+### [6.7.2](https://github.com/GetStream/stream-chat-react-native/compare/v6.7.1...v6.7.2) (2025-04-09)
+
+
+### Bug Fixes
+
+* add property to customize the wrapper style of message ([#3052](https://github.com/GetStream/stream-chat-react-native/issues/3052)) ([74a3d04](https://github.com/GetStream/stream-chat-react-native/commit/74a3d04c73e6790bf2d8ac7beffa43cccb2bbfca))
+* bottom sheet animations on new reactions ([#3044](https://github.com/GetStream/stream-chat-react-native/issues/3044)) ([3e49044](https://github.com/GetStream/stream-chat-react-native/commit/3e49044a86fa747a63c11ecb8afc9c136f86c5ed))
+
 ### [6.7.1](https://github.com/GetStream/stream-chat-react-native/compare/v6.7.0...v6.7.1) (2025-03-27)
 
 

package/expo-package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-expo",
   "description": "The official Expo SDK for Stream Chat, a service for building chat applications",
-  "version": "6.6.8",
+  "version": "6.7.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/native-package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native",
   "description": "The official React Native SDK for Stream Chat, a service for building chat applications",
-  "version": "6.6.8",
+  "version": "6.7.2",
   "homepage": "https://www.npmjs.com/package/stream-chat-react-native",
   "author": {
     "company": "Stream.io Inc",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "6.7.1",
+  "version": "6.7.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -3,10 +3,6 @@ import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native
 
 import throttle from 'lodash/throttle';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../contexts/channelContext/ChannelContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -51,23 +47,26 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
-type AutoCompleteInputPropsWithContext = Pick<ChannelContextValue, 'giphyEnabled'> &
+type AutoCompleteInputPropsWithContext = Pick<
+  MessageInputContextValue,
+  | 'additionalTextInputProps'
+  | 'autoCompleteSuggestionsLimit'
+  | 'giphyActive'
+  | 'giphyEnabled'
+  | 'maxMessageLength'
+  | 'mentionAllAppUsersEnabled'
+  | 'mentionAllAppUsersQuery'
+  | 'numberOfLines'
+  | 'onChange'
+  | 'setGiphyActive'
+  | 'setInputBoxRef'
+  | 'text'
+  | 'triggerSettings'
+> &
   Pick<
-    MessageInputContextValue,
-    | 'additionalTextInputProps'
-    | 'autoCompleteSuggestionsLimit'
-    | 'giphyActive'
-    | 'maxMessageLength'
-    | 'mentionAllAppUsersEnabled'
-    | 'mentionAllAppUsersQuery'
-    | 'numberOfLines'
-    | 'onChange'
-    | 'setGiphyActive'
-    | 'setInputBoxRef'
-    | 'text'
-    | 'triggerSettings'
+    SuggestionsContextValue,
+    'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
   > &
-  Pick<SuggestionsContextValue, 'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'> &
   Pick<TranslationContextValue, 't'> & {
     /**
      * This is currently passed in from MessageInput to avoid rerenders
@@ -462,9 +461,11 @@ const MemoizedAutoCompleteInput = React.memo(
   areEqual,
 ) as typeof AutoCompleteInputWithContext;
 
-export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
-  const { giphyEnabled } = useChannelContext();
+export const AutoCompleteInput = (
+  props: AutoCompleteInputProps,
+) => {
   const {
+    giphyEnabled,
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
     giphyActive,

package/src/components/Channel/Channel.tsx

@@ -771,9 +771,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       }
 
       // If the event is typing.start or typing.stop, set the typing state
-      const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
-      if (isTypingEvent) {
-        setTyping(channel);
+      if (event.type === 'typing.start' || event.type === 'typing.stop') {
+        if (event.user?.id !== client.userID) {
+          setTyping(channel);
+        }
+        return;
       } else {
         if (thread?.id) {
           const updatedThreadMessages =
@@ -1719,6 +1721,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   // once our memoization issues are fixed in most places in the app or we move to a reactive state store.
   const sendMessageRef = useRef<InputMessageInputContextValue['sendMessage']>(sendMessage);
   sendMessageRef.current = sendMessage;
+  const sendMessageStable = useCallback<
+    InputMessageInputContextValue<StreamChatGenerics>['sendMessage']
+  >((...args) => {
+    return sendMessageRef.current(...args);
+  }, []);
 
   const inputMessageInputContext = useCreateInputMessageInputContext({
     additionalTextInputProps,
@@ -1772,7 +1779,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     quotedMessage,
     SendButton,
     sendImageAsync,
-    sendMessage: (...args) => sendMessageRef.current(...args),
+    sendMessage: sendMessageStable,
     SendMessageDisallowedIndicator,
     setInputRef,
     setQuotedMessageState,
@@ -1905,11 +1912,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     VideoThumbnail,
   });
 
-  const suggestionsContext = {
-    AutoCompleteSuggestionHeader,
-    AutoCompleteSuggestionItem,
-    AutoCompleteSuggestionList,
-  };
+  const suggestionsContext = useMemo(() => {
+    return {
+      AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem,
+      AutoCompleteSuggestionList,
+    };
+  }, [AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem, AutoCompleteSuggestionList]);
 
   const threadContext = useCreateThreadContext({
     allowThreadMessagesInChannel,

package/src/components/Message/Message.tsx

@@ -277,7 +277,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const {
     theme: {
       colors: { targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor },
+      messageSimple: { targetedMessageContainer, unreadUnderlayColor, wrapper },
       screenPadding,
     },
   } = useTheme();
@@ -718,8 +718,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         <View
           style={[
             { marginTop: 2, paddingHorizontal: screenPadding },
+            wrapper,
             (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
-              ? { backgroundColor: targetedMessageBackground, ...targetedMessageContainer }
+              ? {
+                  backgroundColor: targetedMessageBackground,
+                  ...targetedMessageContainer,
+                }
               : {},
           ]}
           testID='message-wrapper'