fix: add new design changes to the message composer as per figma

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Modal, Platform, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
+import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
 
 import {
   Gesture,
@@ -21,6 +21,8 @@ import Animated, {
   ZoomOut,
 } from 'react-native-reanimated';
 
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import { type MessageComposerState, type TextComposerState, type UserResponse } from 'stream-chat';
 
 import { OutputButtons } from './components/OutputButtons';
@@ -83,7 +85,7 @@ const styles = StyleSheet.create({
   },
   floatingWrapper: {
     left: 0,
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
     position: 'absolute',
     right: 0,
   },
@@ -123,8 +125,8 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     borderTopWidth: 1,
-    paddingHorizontal: 24,
-    paddingTop: 24,
+    paddingHorizontal: 16,
+    paddingTop: 16,
   },
 });
 
@@ -452,13 +454,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
       },
     ],
   }));
+  const { bottom } = useSafeAreaInsets();
 
-  const BOTTOM_OFFSET = isKeyboardVisible ? 24 : Platform.OS === 'ios' ? 32 : 24;
+  const BOTTOM_OFFSET = isKeyboardVisible ? 16 : bottom ? bottom : 16;
 
   return (
     <>
       <Animated.View
-        layout={LinearTransition.duration(200)}
         onLayout={({
           nativeEvent: {
             layout: { height: newHeight },

package/src/components/MessageList/MessageFlashList.tsx

@@ -1236,7 +1236,7 @@ const styles = StyleSheet.create({
   scrollToBottomButtonContainer: {
     bottom: 8,
     position: 'absolute',
-    right: 24,
+    right: 16,
   },
   stickyHeaderContainer: {
     left: 0,

package/src/components/MessageList/MessageList.tsx

@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
   scrollToBottomButtonContainer: {
     bottom: 8,
     position: 'absolute',
-    right: 24,
+    right: 16,
   },
   stickyHeaderContainer: {
     left: 0,

package/src/components/Reply/Reply.tsx

@@ -120,10 +120,6 @@ const SubtitleText = React.memo(({ message }: { message?: LocalMessage | null })
       return message?.text;
     }
 
-    if (imageAttachments?.length && videoAttachments?.length) {
-      return `${imageAttachments?.length + videoAttachments.length} Media`;
-    }
-
     if (onlyImages) {
       if (imageAttachments?.length === 1) {
         return 'Photo';
@@ -193,6 +189,7 @@ const SubtitleIcon = React.memo((props: { message?: LocalMessage | null }) => {
     (attachment) => attachment.type === FileTypes.VoiceRecording,
   );
   const fileAttachments = attachments?.filter((attachment) => attachment.type === FileTypes.File);
+  const onlyImages = imageAttachments?.length && imageAttachments?.length === attachments?.length;
   const onlyAudio = audioAttachments?.length && audioAttachments?.length === attachments?.length;
   const onlyVideos = videoAttachments?.length && videoAttachments?.length === attachments?.length;
   const onlyVoiceRecordings =
@@ -238,21 +235,26 @@ const SubtitleIcon = React.memo((props: { message?: LocalMessage | null }) => {
     );
   }
 
-  if (fileAttachments?.length) {
+  if (onlyVideos) {
     return (
-      <NewFile height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...fileIcon} />
+      <NewVideo height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...videoIcon} />
     );
   }
 
-  if (onlyVideos) {
+  if (onlyImages) {
     return (
-      <NewVideo height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...videoIcon} />
+      <NewPhoto height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...photoIcon} />
     );
   }
 
-  if (imageAttachments?.length) {
+  if (
+    fileAttachments?.length ||
+    imageAttachments?.length ||
+    videoAttachments?.length ||
+    audioAttachments?.length
+  ) {
     return (
-      <NewPhoto height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...photoIcon} />
+      <NewFile height={12} stroke={'#384047'} style={styles.iconStyle} width={12} {...fileIcon} />
     );
   }
 

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1896,19 +1896,18 @@ exports[`Thread should match thread snapshot 1`] = `
       />
     </View>
     <View
-      layout={BaseAnimationMock {}}
       onLayout={[Function]}
       style={
         [
           {
             "borderTopWidth": 1,
-            "paddingHorizontal": 24,
-            "paddingTop": 24,
+            "paddingHorizontal": 16,
+            "paddingTop": 16,
           },
           {
             "backgroundColor": "#FFFFFF",
             "borderColor": "#E2E6EA",
-            "paddingBottom": 32,
+            "paddingBottom": 16,
           },
           {},
         ]