fix: add drafts to thread list item

Author: isekovanic

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -12,8 +12,6 @@ import { resampleWaveformData } from '../utils/audioSampling';
 
 /**
  * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
- *
- * FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
  */
 export const useAudioRecorder = ({
   audioRecorderManager,

package/src/components/ThreadList/ThreadListItem.tsx

@@ -1,7 +1,14 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { LocalMessage, Thread, ThreadState } from 'stream-chat';
+import {
+  AttachmentManagerState,
+  DraftMessage,
+  LocalMessage,
+  TextComposerState,
+  Thread,
+  ThreadState,
+} from 'stream-chat';
 
 import { ThreadListItemMessagePreview as ThreadListItemMessagePreviewDefault } from './ThreadListItemMessagePreview';
 
@@ -34,11 +41,20 @@ export const attachmentTypeIconMap = {
   voiceRecording: '🎙️',
 } as const;
 
+const textComposerStateSelector = (state: TextComposerState) => ({
+  text: state.text,
+});
+
+const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
+  attachments: state.attachments,
+});
+
 export const ThreadListItemComponent = () => {
   const {
     channel,
     dateString,
     deletedAtDateString,
+    draftMessage,
     lastReply,
     ownUnreadMessageCount,
     parentMessage,
@@ -57,10 +73,7 @@ export const ThreadListItemComponent = () => {
   const styles = useStyles();
   const { t } = useTranslationContext();
 
-  useEffect(() => {
-    const unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
-    return () => unsubscribe();
-  }, [thread.messageComposer]);
+  const shouldRenderPreview = !!draftMessage || !!lastReply;
 
   return (
     <View style={styles.wrapper}>
@@ -87,12 +100,14 @@ export const ThreadListItemComponent = () => {
           <Text numberOfLines={1} style={styles.channelName}>
             {displayName || 'N/A'}
           </Text>
-          {lastReply ? (
+          {shouldRenderPreview ? (
             <View style={styles.previewMessageContainer}>
-              <ThreadMessagePreviewDeliveryStatus
-                channel={channel}
-                message={parentMessage as LocalMessage}
-              />
+              {!draftMessage ? (
+                <ThreadMessagePreviewDeliveryStatus
+                  channel={channel}
+                  message={parentMessage as LocalMessage}
+                />
+              ) : null}
               <ThreadListItemMessagePreview message={parentMessage as LocalMessage} />
             </View>
           ) : null}
@@ -129,6 +144,14 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
   const { t, tDateTimeParser } = useTranslationContext();
   const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
   const { ThreadListItem = ThreadListItemComponent } = useThreadsContext();
+  const { text: draftText } = useStateStore(
+    thread.messageComposer.textComposer.state,
+    textComposerStateSelector,
+  );
+  const { attachments } = useStateStore(
+    thread.messageComposer.attachmentManager.state,
+    attachmentManagerStateSelector,
+  );
 
   const selector = useCallback(
     (nextValue: ThreadState) =>
@@ -150,6 +173,27 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
 
   const timestamp = lastReply?.created_at;
 
+  useEffect(() => {
+    const unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
+    return () => unsubscribe();
+  }, [thread.messageComposer]);
+
+  const draftMessage = useMemo<DraftMessage | undefined>(() => {
+    if (thread.messageComposer.compositionIsEmpty) {
+      return undefined;
+    }
+
+    if (!draftText && !attachments?.length) {
+      return undefined;
+    }
+
+    return {
+      attachments,
+      id: thread.messageComposer.id,
+      text: draftText ?? '',
+    };
+  }, [attachments, draftText, thread.messageComposer]);
+
   // TODO: Please rethink this, we have the same line of code in about 5 places in the SDK.
   const dateString = useMemo(
     () =>
@@ -178,6 +222,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         channel,
         dateString,
         deletedAtDateString,
+        draftMessage,
         lastReply,
         ownUnreadMessageCount,
         parentMessage,
@@ -224,6 +269,7 @@ const useStyles = () => {
         },
         previewMessageContainer: {
           flexDirection: 'row',
+          alignItems: 'center',
           gap: primitives.spacingXxs,
           ...threadListItem.previewMessageContainer,
         },

package/src/components/ThreadList/ThreadListItemMessagePreview.tsx

@@ -4,6 +4,8 @@ import { View, Text, StyleSheet } from 'react-native';
 import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useThreadListItemContext } from '../../contexts/threadsContext/ThreadListItemContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
 import { primitives } from '../../theme';
 
@@ -12,15 +14,20 @@ export type ThreadListItemMessagePreviewProps = {
 };
 
 export const ThreadListItemMessagePreview = ({ message }: ThreadListItemMessagePreviewProps) => {
+  const { draftMessage } = useThreadListItemContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
-  const MessagePreviewIcon = useMessagePreviewIcon({ message });
-  const messagePreviewTitle = useMessagePreviewText({ message });
+  const { t } = useTranslationContext();
+  const previewMessage = draftMessage ?? message;
+  const MessagePreviewIcon = useMessagePreviewIcon({ message: previewMessage });
+  const messagePreviewTitle = useMessagePreviewText({ message: previewMessage });
+  const isDraft = !!draftMessage;
 
   return (
     <View style={[styles.container]}>
+      {isDraft ? <Text style={styles.draftText}>{t('Draft')}:</Text> : null}
       {MessagePreviewIcon ? (
         <MessagePreviewIcon height={20} stroke={semantics.textPrimary} width={20} />
       ) : null}
@@ -56,6 +63,14 @@ const useStyles = () => {
         flexShrink: 1,
         ...messagePreview.subtitle,
       },
+      draftText: {
+        color: semantics.accentPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        includeFontPadding: false,
+        lineHeight: primitives.typographyLineHeightNormal,
+        ...messagePreview.draftText,
+      },
     });
-  }, [messagePreview.container, messagePreview.subtitle, semantics.textPrimary]);
+  }, [messagePreview.container, messagePreview.draftText, messagePreview.subtitle, semantics]);
 };

package/src/contexts/themeContext/utils/theme.ts

@@ -238,6 +238,7 @@ export type Theme = {
     };
     messagePreview: {
       container: ViewStyle;
+      draftText: TextStyle;
       subtitle: TextStyle;
     };
   };
@@ -989,6 +990,7 @@ export type Theme = {
     unreadBubbleWrapper: ViewStyle;
     messagePreview: {
       container: ViewStyle;
+      draftText: TextStyle;
       subtitle: TextStyle;
     };
     messagePreviewDeliveryStatus: {
@@ -1167,6 +1169,7 @@ export const defaultTheme: Theme = {
     wrapper: {},
     messagePreview: {
       container: {},
+      draftText: {},
       subtitle: {},
     },
   },
@@ -1893,6 +1896,7 @@ export const defaultTheme: Theme = {
     messageRepliesText: {},
     messagePreview: {
       container: {},
+      draftText: {},
       subtitle: {},
     },
     messagePreviewDeliveryStatus: {

package/src/contexts/threadsContext/ThreadListItemContext.tsx

@@ -1,13 +1,14 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { Channel, LocalMessage, Thread } from 'stream-chat';
+import { Channel, DraftMessage, LocalMessage, Thread } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 export type ThreadListItemContextValue = {
   channel: Channel;
   dateString: string | number | undefined;
   deletedAtDateString: string | number | undefined;
+  draftMessage?: DraftMessage;
   lastReply: LocalMessage | undefined;
   ownUnreadMessageCount: number;
   parentMessage: LocalMessage | undefined;