fix: set draft config from app

Author: khushal87

examples/SampleApp/App.tsx

@@ -172,6 +172,14 @@ const DrawerNavigatorWrapper: React.FC<{
   const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
+  chatClient.setMessageComposerSetupFunction(({ composer }) => {
+    composer.updateConfig({
+      drafts: {
+        enabled: true,
+      },
+    });
+  });
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <OverlayProvider bottomInset={bottom} value={{ style: streamChatTheme }}>

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -71,9 +71,7 @@ const CustomChannelPreviewStatus = (
   );
 };
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (
-  props,
-) => {
+export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (props) => {
   const { channel } = props;
 
   const { setOverlay } = useAppOverlayContext();

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -135,7 +135,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         if (!newChannel?.initialized) {
           await newChannel?.watch();
         }
-      } catch(error) {
+      } catch (error) {
         console.log('An error has occurred while watching the channel: ', error);
       }
       setChannel(newChannel);

package/src/components/MessageInput/MessageInput.tsx

@@ -19,7 +19,6 @@ import Animated, {
 import {
   FileReference,
   isLocalImageAttachment,
-  MessageComposerConfig,
   type MessageComposerState,
   type TextComposerState,
   type UserResponse,
@@ -165,10 +164,6 @@ const messageComposerStateStoreSelector = (state: MessageComposerState) => ({
   quotedMessage: state.quotedMessage,
 });
 
-const configStateSelector = (state: MessageComposerConfig) => ({
-  draftsEnabled: state.drafts.enabled,
-});
-
 const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     additionalTextInputProps,
@@ -224,7 +219,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
   const { attachments } = useAttachmentManagerState();
   const hasSendableData = useMessageComposerHasSendableData();
-  const { draftsEnabled } = useStateStore(messageComposer.configState, configStateSelector);
 
   const imageUploads = attachments.filter((attachment) => isLocalImageAttachment(attachment));
   const fileUploads = attachments.filter((attachment) => !isLocalImageAttachment(attachment));
@@ -265,7 +259,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
 
   useEffect(() => {
-    messageComposer.updateConfig({ drafts: { enabled: true } });
     attachmentManager.maxNumberOfFilesPerMessage = maxNumberOfFiles;
     if (doFileUploadRequest) {
       attachmentManager.setCustomUploadFn(doFileUploadRequest);
@@ -316,13 +309,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   }, [messageComposer, inputBoxRef]);
 
   // Effect to create draft whenever we un-mount the component.
-  useEffect(() => {
-    return () => {
-      if (draftsEnabled) {
-        messageComposer.createDraft();
-      }
-    };
-  }, [draftsEnabled, messageComposer]);
+  useEffect(
+    () => () => {
+      messageComposer.createDraft();
+    },
+    [messageComposer],
+  );
 
   const uploadImagesHandler = async () => {
     const imageToUpload = selectedImages.find((selectedImage) => {