feat: add support for draft message

Author: khushal87

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -26,7 +26,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   const {
     theme: {
       channelPreview: { message },
-      colors: { grey },
+      colors: { accent_blue, grey },
     },
   } = useTheme();
 
@@ -37,7 +37,11 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
           preview.text && (
             <Text
               key={`${preview.text}_${index}`}
-              style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}
+              style={[
+                { color: preview?.draft ? accent_blue : grey },
+                preview.bold ? styles.bold : {},
+                message,
+              ]}
             >
               {preview.text}
             </Text>

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -23,6 +23,13 @@ export const useChannelPreviewData = (
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
+  useEffect(() => {
+    const unsubscribe = channel.messageComposer.registerSubscriptions();
+    return () => {
+      unsubscribe();
+    };
+  }, [channel.messageComposer]);
+
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -2,12 +2,14 @@ import { useMemo } from 'react';
 
 import { TFunction } from 'i18next';
 import type {
+  AttachmentManagerState,
   Channel,
   ChannelState,
   MessageResponse,
   PollState,
   PollVote,
   StreamChat,
+  TextComposerState,
   UserResponse,
 } from 'stream-chat';
 
@@ -26,6 +28,7 @@ export type LatestMessagePreview = {
   previews: {
     bold: boolean;
     text: string;
+    draft?: boolean;
   }[];
   status: number;
   created_at?: string | Date;
@@ -82,6 +85,8 @@ const getMentionUsers = (mentionedUser: UserResponse[] | undefined) => {
 const getLatestMessageDisplayText = (
   channel: Channel,
   client: StreamChat,
+  draftText: string | undefined,
+  draftAttachments: boolean | undefined,
   message: LatestMessage | undefined,
   t: (key: string) => string,
   pollState: LatestMessagePreviewSelectorReturnType | undefined,
@@ -101,6 +106,18 @@ const getLatestMessageDisplayText = (
     ? `${messageSender === t('You') ? '' : '@'}${messageSender}: `
     : '';
   const boldOwner = messageSenderText.includes('@');
+  if (draftText) {
+    return [
+      { bold: true, draft: true, text: 'Draft:' },
+      { bold: false, text: draftText },
+    ];
+  }
+  if (draftAttachments) {
+    return [
+      { bold: true, draft: true, text: 'Draft:' },
+      { bold: false, text: t('🏙 Attachment...') },
+    ];
+  }
   if (message.text) {
     // rough guess optimization to limit string preview to max 100 characters
     const shortenedText = message.text.substring(0, 100).replace(/\n/g, ' ');
@@ -201,12 +218,15 @@ const getLatestMessageReadStatus = (
 const getLatestMessagePreview = (params: {
   channel: Channel;
   client: StreamChat;
+  draftText?: string;
+  draftAttachments?: boolean;
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
   lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse;
 }) => {
-  const { channel, client, lastMessage, pollState, readEvents, t } = params;
+  const { channel, client, draftText, draftAttachments, lastMessage, pollState, readEvents, t } =
+    params;
 
   const messages = channel.state.messages;
 
@@ -231,11 +251,27 @@ const getLatestMessagePreview = (params: {
   return {
     created_at: message?.created_at,
     messageObject: message,
-    previews: getLatestMessageDisplayText(channel, client, message, t, pollState),
+    previews: getLatestMessageDisplayText(
+      channel,
+      client,
+      draftText,
+      draftAttachments,
+      message,
+      t,
+      pollState,
+    ),
     status: getLatestMessageReadStatus(channel, client, message, readEvents),
   };
 };
 
+const textComposerStateSelector = (state: TextComposerState) => ({
+  text: state.text,
+});
+
+const stateSelector = (state: AttachmentManagerState) => ({
+  attachments: state.attachments,
+});
+
 /**
  * Hook to set the display preview for latest message on channel.
  *
@@ -251,6 +287,18 @@ export const useLatestMessagePreview = (
   const { client } = useChatContext();
   const { t } = useTranslationContext();
 
+  const { text: draftText } = useStateStore(
+    channel.messageComposer.textComposer.state,
+    textComposerStateSelector,
+  );
+
+  const { attachments } = useStateStore(
+    channel.messageComposer.attachmentManager.state,
+    stateSelector,
+  );
+
+  const draftAttachments = attachments.length > 0;
+
   const channelConfigExists = typeof channel?.getConfig === 'function';
 
   const translatedLastMessage = useTranslatedMessage(lastMessage);
@@ -282,6 +330,8 @@ export const useLatestMessagePreview = (
     return getLatestMessagePreview({
       channel,
       client,
+      draftAttachments,
+      draftText,
       lastMessage: translatedLastMessage,
       pollState,
       readEvents,
@@ -290,6 +340,8 @@ export const useLatestMessagePreview = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     channelLastMessageString,
+    draftText,
+    draftAttachments,
     forceUpdate,
     readEvents,
     readStatus,

package/src/components/MessageInput/MessageInput.tsx

@@ -19,6 +19,7 @@ import Animated, {
 import {
   FileReference,
   isLocalImageAttachment,
+  MessageComposerConfig,
   type MessageComposerState,
   type TextComposerState,
   type UserResponse,
@@ -164,6 +165,10 @@ const messageComposerStateStoreSelector = (state: MessageComposerState) => ({
   quotedMessage: state.quotedMessage,
 });
 
+const configStateSelector = (state: MessageComposerConfig) => ({
+  draftsEnabled: state.drafts.enabled,
+});
+
 const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     additionalTextInputProps,
@@ -215,13 +220,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 
   const messageComposer = useMessageComposer();
   const { attachmentManager, textComposer } = messageComposer;
-  const { command, mentionedUsers, text } = useStateStore(
-    textComposer.state,
-    textComposerStateSelector,
-  );
+  const { command, text } = useStateStore(textComposer.state, textComposerStateSelector);
+
   const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
-  const { attachments, availableUploadSlots } = useAttachmentManagerState();
+  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));
@@ -303,31 +307,36 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const editingExists = !!editing;
-
+  // Effect to ensure we focus the input box when editing a message.
   useEffect(() => {
-    if (editing && inputBoxRef.current) {
+    const { editedMessage } = messageComposer;
+    if (editedMessage && inputBoxRef.current) {
       inputBoxRef.current.focus();
     }
+  }, [messageComposer, inputBoxRef]);
 
-    /**
-     * Make sure to test `initialValue` functionality, if you are modifying following condition.
-     *
-     * We have the following condition, to make sure - when user comes out of "editing message" state,
-     * we wipe out all the state around message input such as text, mentioned users, image uploads etc.
-     * But it also means, this condition will be fired up on first render, which may result in clearing
-     * the initial value set on input box, through the prop - `initialValue`.
-     * This prop generally gets used for the case of draft message functionality.
-     */
-    if (
-      !editing &&
-      (command || attachments.length > 0 || mentionedUsers.length > 0 || availableUploadSlots) &&
-      resetInput
-    ) {
-      resetInput();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editingExists]);
+  // Effect to create draft whenever we un-mount the component.
+  useEffect(() => {
+    return () => {
+      if (draftsEnabled) {
+        messageComposer.createDraft();
+      }
+    };
+  }, [draftsEnabled, messageComposer, resetInput]);
+
+  /**
+   * Effect to get the draft data for legacy thread composer and set it to message composer.
+   * TODO: This can be removed once we remove legacy thread composer.
+   */
+  useEffect(() => {
+    const threadId = messageComposer.threadId;
+    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty) return;
+    messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
+      if (draft) {
+        messageComposer.initState({ composition: draft });
+      }
+    });
+  }, [messageComposer]);
 
   const uploadImagesHandler = async () => {
     const imageToUpload = selectedImages.find((selectedImage) => {

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Image, StyleSheet, View } from 'react-native';
 
@@ -23,11 +23,11 @@ export const ImageAttachmentUploadPreview = ({
   handleRetry,
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
+  const [loading, setLoading] = useState(false);
   const { enableOfflineSupport } = useChatContext();
-  const indicatorType = getIndicatorTypeForFileState(
-    attachment.localMetadata.uploadState,
-    enableOfflineSupport,
-  );
+  const indicatorType = loading
+    ? ProgressIndicatorTypes.IN_PROGRESS
+    : getIndicatorTypeForFileState(attachment.localMetadata.uploadState, enableOfflineSupport);
 
   const {
     theme: {
@@ -45,6 +45,14 @@ export const ImageAttachmentUploadPreview = ({
     removeAttachments([attachment.localMetadata.id]);
   }, [attachment, removeAttachments]);
 
+  const onLoadEndHandler = useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  const onLoadStartHandler = useCallback(() => {
+    setLoading(true);
+  }, []);
+
   return (
     <View style={[styles.itemContainer, itemContainer]}>
       <AttachmentUploadProgressIndicator
@@ -53,6 +61,8 @@ export const ImageAttachmentUploadPreview = ({
         type={indicatorType}
       >
         <Image
+          onLoadEnd={onLoadEndHandler}
+          onLoadStart={onLoadStartHandler}
           resizeMode='cover'
           source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
           style={[styles.upload, upload]}

package/src/contexts/messageInputContext/hooks/useMessageComposer.ts

@@ -65,8 +65,7 @@ export const useMessageComposer = () => {
     } else {
       return channel.messageComposer;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cachedEditedMessage, cachedParentMessage, channel, threadInstance]);
+  }, [cachedEditedMessage, cachedParentMessage, channel, client, editedMessage, threadInstance]);
 
   if (
     (['legacy_thread', 'message'] as MessageComposer['contextType'][]).includes(