fix: styles for message input auto complete input

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -142,6 +142,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          paddingHorizontal: command ? 4 : 16,
           textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
@@ -205,8 +206,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     includeFontPadding: false, // for android vertical text centering
-    padding: 0, // removal of default text input padding on android
-    paddingTop: 0, // removal of iOS top padding for weird centering
+    paddingVertical: 12,
     textAlignVertical: 'center', // for android vertical text centering
   },
 });

package/src/components/MessageInput/AttachmentUploadPreviewList.tsx

@@ -185,7 +185,7 @@ const UnMemoizedAttachmentUploadListPreview = (
   }
 
   return (
-    <View style={[wrapper]}>
+    <View style={[styles.wrapper, wrapper]}>
       {imageUploads.length ? (
         <FlatList
           data={imageUploads}
@@ -264,10 +264,13 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
 const styles = StyleSheet.create({
   attachmentSeparator: {
     borderBottomWidth: 1,
-    marginBottom: 10,
+    marginVertical: 8,
+  },
+  filesFlatList: { maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
+  imagesFlatList: {},
+  wrapper: {
+    paddingTop: 12,
   },
-  filesFlatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
-  imagesFlatList: { paddingBottom: 12 },
 });
 
 AttachmentUploadPreviewList.displayName =

package/src/components/MessageInput/MessageInput.tsx

@@ -1,13 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Modal,
-  Pressable,
-  SafeAreaView,
-  StyleSheet,
-  TextInput,
-  TextInputProps,
-  View,
-} from 'react-native';
+import { Modal, SafeAreaView, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
 
 import {
   Gesture,
@@ -60,7 +52,6 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { useStableCallback } from '../../hooks/useStableCallback';
 import { useStateStore } from '../../hooks/useStateStore';
 import {
   isAudioRecorderAvailable,
@@ -79,8 +70,6 @@ const styles = StyleSheet.create({
   autoCompleteInputContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 16,
-    paddingRight: 16,
   },
   composerContainer: {
     alignItems: 'center',
@@ -101,7 +90,7 @@ const styles = StyleSheet.create({
   optionsContainer: {
     flexDirection: 'row',
   },
-  replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
+  replyContainer: { paddingBottom: 0, paddingHorizontal: 8, paddingTop: 8 },
   sendButtonContainer: {},
   suggestionsListContainer: {
     position: 'absolute',
@@ -441,10 +430,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const shouldDisplayStopAIGeneration =
     [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
 
-  const onFocusHandler = useStableCallback(() => {
-    inputBoxRef.current?.focus();
-  });
-
   return (
     <>
       <View
@@ -502,13 +487,11 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                   <View style={[styles.optionsContainer, optionsContainer]}>
                     {InputButtons && <InputButtons />}
                   </View>
-                  <Pressable
-                    onPress={onFocusHandler}
+                  <View
                     style={[
                       styles.inputBoxContainer,
                       {
                         borderColor: grey_whisper,
-                        paddingVertical: command ? 8 : 12,
                       },
                       inputBoxContainer,
                       isFocused ? focusedInputBoxContainer : null,
@@ -519,6 +502,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         <Reply />
                       </View>
                     )}
+
                     <AttachmentUploadPreviewList />
                     {command ? (
                       <CommandInput disabled={!isOnline} />
@@ -531,7 +515,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         />
                       </View>
                     )}
-                  </Pressable>
+                  </View>
                 </>
               )}
 

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

@@ -2135,7 +2135,6 @@ exports[`Thread should match thread snapshot 1`] = `
               },
               {
                 "borderColor": "#ECEBEB",
-                "paddingVertical": 12,
               },
               {},
               null,
@@ -2148,8 +2147,6 @@ exports[`Thread should match thread snapshot 1`] = `
                 {
                   "alignItems": "center",
                   "flexDirection": "row",
-                  "paddingLeft": 16,
-                  "paddingRight": 16,
                 },
                 {},
               ]
@@ -2171,13 +2168,13 @@ exports[`Thread should match thread snapshot 1`] = `
                     "flex": 1,
                     "fontSize": 16,
                     "includeFontPadding": false,
-                    "padding": 0,
-                    "paddingTop": 0,
+                    "paddingVertical": 12,
                     "textAlignVertical": "center",
                   },
                   {
                     "color": "#000000",
                     "maxHeight": 85,
+                    "paddingHorizontal": 16,
                     "textAlign": "left",
                   },
                   {},