feat: support message draft management for main message list

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -13,7 +13,6 @@ import React, {
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
-import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
 import { initialState, makeChannelReducer } from './channelState';
@@ -60,12 +59,18 @@ import {
   useChannelContainerClasses,
   useImageFlagEmojisOnWindowsClass,
 } from './hooks/useChannelContainerClasses';
-import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
+import {
+  findInMsgSetByDate,
+  findInMsgSetById,
+  generateMessageId,
+  makeAddNotifications,
+} from './utils';
 import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 
 import type {
   APIErrorResponse,
+  Channel as StreamChannel,
   ChannelAPIResponse,
   ChannelMemberResponse,
   ChannelQueryOptions,
@@ -76,7 +81,6 @@ import type {
   Message,
   MessageResponse,
   SendMessageAPIResponse,
-  Channel as StreamChannel,
   StreamChat,
   UpdatedMessage,
   UserResponse,
@@ -239,6 +243,8 @@ export type ChannelProps<
   markReadOnMount?: boolean;
   /** Maximum number of attachments allowed per message */
   maxNumberOfFiles?: number;
+  /** Enables storing message drafts on the server. */
+  messageDraftsEnabled?: boolean;
   /** Whether to allow multiple attachment uploads */
   multipleUploads?: boolean;
   /** Custom action handler function to run on click of an @mention in a message */
@@ -343,6 +349,7 @@ const ChannelInner = <
     LoadingIndicator = DefaultLoadingIndicator,
     markReadOnMount = true,
     maxNumberOfFiles,
+    messageDraftsEnabled,
     multipleUploads = true,
     onMentionsClick,
     onMentionsHover,
@@ -368,13 +375,17 @@ const ChannelInner = <
   const thread = useThreadContext();
 
   const [channelConfig, setChannelConfig] = useState(channel.getConfig());
+  // FIXME: Create a proper notification service in the LLC.
   const [notifications, setNotifications] = useState<ChannelNotifications>([]);
-  const [quotedMessage, setQuotedMessage] = useState<StreamMessage<StreamChatGenerics>>();
+  const notificationTimeouts = useRef<Array<NodeJS.Timeout>>([]);
+
+  // FIXME: Move  to LLC message list controller.
+  const [quotedMessage, setQuotedMessage] = useState<
+    StreamMessage<StreamChatGenerics> | undefined
+  >(messageDraftsEnabled ? channel.state.messageDraft?.quoted_message : undefined);
   const [channelUnreadUiState, _setChannelUnreadUiState] =
     useState<ChannelUnreadUiState>();
 
-  const notificationTimeouts = useRef<Array<NodeJS.Timeout>>([]);
-
   const channelReducer = useMemo(() => makeChannelReducer<StreamChatGenerics>(), []);
 
   const [state, dispatch] = useReducer(
@@ -385,6 +396,7 @@ const ChannelInner = <
       ...initialState,
       hasMore: channel.state.messagePagination.hasPrev,
       loading: !channel.initialized,
+      messageDraft: channel.state.messageDraft,
     },
   );
   const jumpToMessageFromSearch = useSearchFocusedMessage();
@@ -1111,7 +1123,7 @@ const ChannelInner = <
       attachments,
       created_at: new Date(),
       html: text,
-      id: customMessageData?.id ?? `${client.userID}-${nanoid()}`,
+      id: customMessageData?.id ?? generateMessageId({ client }),
       mentioned_users,
       parent_id: parent?.id,
       reactions: [],
@@ -1255,6 +1267,7 @@ const ChannelInner = <
     imageAttachmentSizeHandler:
       props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
     maxNumberOfFiles,
+    messageDraftsEnabled,
     multipleUploads,
     mutes,
     notifications,

src/components/Channel/channelState.ts

@@ -125,6 +125,7 @@ export const makeChannelReducer =
         return {
           ...state,
           members: { ...channel.state.members },
+          messageDraft: channel.state.messageDraft,
           messages: [...channel.state.messages],
           pinnedMessages: [...channel.state.pinnedMessages],
           read: { ...channel.state.read },
@@ -140,6 +141,7 @@ export const makeChannelReducer =
           hasMore,
           loading: false,
           members: { ...channel.state.members },
+          messageDraft: channel.state.messageDraft,
           messages: [...channel.state.messages],
           pinnedMessages: [...channel.state.pinnedMessages],
           read: { ...channel.state.read },

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -34,6 +34,8 @@ export const useCreateChannelStateContext = <
     loadingMore,
     maxNumberOfFiles,
     members,
+    messageDraft,
+    messageDraftsEnabled,
     messages = [],
     multipleUploads,
     mutes,
@@ -129,6 +131,8 @@ export const useCreateChannelStateContext = <
       loadingMore,
       maxNumberOfFiles,
       members,
+      messageDraft,
+      messageDraftsEnabled,
       messages,
       multipleUploads,
       mutes,
@@ -166,6 +170,8 @@ export const useCreateChannelStateContext = <
       membersLength,
       memoizedMessageData,
       memoizedThreadMessageData,
+      messageDraft,
+      messageDraftsEnabled,
       notificationsLength,
       onLinkPreviewDismissed,
       quotedMessage,

src/components/Channel/utils.ts

@@ -1,6 +1,12 @@
 import { nanoid } from 'nanoid';
 import type { Dispatch, SetStateAction } from 'react';
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import type {
+  ChannelState,
+  DefaultGenerics,
+  ExtendableGenerics,
+  MessageResponse,
+  StreamChat,
+} from 'stream-chat';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types';
 
@@ -105,3 +111,11 @@ export const findInMsgSetByDate = <
   }
   return { index: -1 };
 };
+
+export const generateMessageId = <
+  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics,
+>({
+  client,
+}: {
+  client: StreamChat<StreamChatGenerics>;
+}) => `${client.userID}-${nanoid()}`;

src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx

@@ -33,6 +33,7 @@ export const FileAttachmentPreview = <
   removeAttachments,
 }: FileAttachmentPreviewProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext('FilePreview');
+  const uploadState = attachment.localMetadata?.uploadState;
   return (
     <div
       className='str-chat__attachment-preview-file'
@@ -46,7 +47,7 @@ export const FileAttachmentPreview = <
         aria-label={t('aria/Remove attachment')}
         className='str-chat__attachment-preview-delete'
         data-testid='file-preview-item-delete-button'
-        disabled={attachment.localMetadata?.uploadState === 'uploading'}
+        disabled={uploadState === 'uploading'}
         onClick={() =>
           attachment.localMetadata?.id &&
           removeAttachments([attachment.localMetadata?.id])
@@ -55,7 +56,7 @@ export const FileAttachmentPreview = <
         <CloseIcon />
       </button>
 
-      {attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (
+      {uploadState === 'failed' && !!handleRetry && (
         <button
           className='str-chat__attachment-preview-error str-chat__attachment-preview-error-file'
           data-testid='file-preview-item-retry-button'
@@ -69,7 +70,8 @@ export const FileAttachmentPreview = <
         <div className='str-chat__attachment-preview-file-name' title={attachment.title}>
           {attachment.title}
         </div>
-        {attachment.localMetadata?.uploadState === 'finished' &&
+        {/* undefined if loaded from a draft */}
+        {(typeof uploadState === 'undefined' || uploadState === 'finished') &&
           !!attachment.asset_url && (
             <a
               aria-label={t('aria/Download attachment')}
@@ -83,9 +85,7 @@ export const FileAttachmentPreview = <
               <DownloadIcon />
             </a>
           )}
-        {attachment.localMetadata?.uploadState === 'uploading' && (
-          <LoadingIndicatorIcon size={17} />
-        )}
+        {uploadState === 'uploading' && <LoadingIndicatorIcon size={17} />}
       </div>
     </div>
   );