Initial commit

Author: arnautov-anton

examples/vite/src/App.tsx

@@ -20,6 +20,7 @@ import {
   useCreateChatClient,
   VirtualizedMessageList as MessageList,
   Window,
+  WithComponents,
 } from 'stream-chat-react';
 import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
 import { init, SearchIndex } from 'emoji-mart';
@@ -98,36 +99,38 @@ const App = () => {
     (error) => Promise.reject(error),
   );
   return (
-    <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
-      <ChatView>
-        <ChatView.Selector />
-        <ChatView.Channels>
-          <ChannelList
-            Avatar={ChannelAvatar}
-            filters={filters}
-            options={options}
-            sort={sort}
-            showChannelSearch
-            additionalChannelSearchProps={{ searchForChannels: true }}
-          />
-          <Channel emojiSearchIndex={SearchIndex} EmojiPicker={EmojiPicker}>
-            <Window>
-              <ChannelHeader Avatar={ChannelAvatar} />
-              <MessageList returnAllReadData />
-              <AIStateIndicator />
-              <MessageInput focus audioRecordingEnabled />
-            </Window>
-            <Thread virtualized />
-          </Channel>
-        </ChatView.Channels>
-        <ChatView.Threads>
-          <ThreadList />
-          <ChatView.ThreadAdapter>
-            <Thread virtualized />
-          </ChatView.ThreadAdapter>
-        </ChatView.Threads>
-      </ChatView>
-    </Chat>
+    <WithComponents overrides={{ emojiSearchIndex: SearchIndex, EmojiPicker }}>
+      <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
+        <ChatView>
+          <ChatView.Selector />
+          <ChatView.Channels>
+            <ChannelList
+              Avatar={ChannelAvatar}
+              filters={filters}
+              options={options}
+              sort={sort}
+              showChannelSearch
+              additionalChannelSearchProps={{ searchForChannels: true }}
+            />
+            <Channel>
+              <Window>
+                <ChannelHeader Avatar={ChannelAvatar} />
+                <MessageList returnAllReadData />
+                <AIStateIndicator />
+                <MessageInput focus audioRecordingEnabled />
+              </Window>
+              <Thread virtualized />
+            </Channel>
+          </ChatView.Channels>
+          <ChatView.Threads>
+            <ThreadList />
+            <ChatView.ThreadAdapter>
+              <Thread virtualized />
+            </ChatView.ThreadAdapter>
+          </ChatView.Threads>
+        </ChatView>
+      </Chat>
+    </WithComponents>
   );
 };
 

src/components/Channel/Channel.tsx

@@ -41,7 +41,6 @@ import { useIsMounted } from './hooks/useIsMounted';
 import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import { useMentionsHandlers } from './hooks/useMentionsHandlers';
 
-import type { LoadingErrorIndicatorProps } from '../Loading';
 import {
   LoadingErrorIndicator as DefaultLoadingErrorIndicator,
   LoadingChannel as DefaultLoadingIndicator,
@@ -50,16 +49,15 @@ import {
 import type {
   ChannelActionContextValue,
   ChannelNotifications,
-  ComponentContextValue,
   MarkReadWrapperOptions,
 } from '../../context';
 import {
   ChannelActionProvider,
   ChannelStateProvider,
   TypingProvider,
   useChatContext,
+  useComponentContext,
   useTranslationContext,
-  WithComponents,
 } from '../../context';
 
 import { CHANNEL_CONTAINER_ID } from './constants';
@@ -93,79 +91,7 @@ import {
 import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
 import { WithAudioPlayback } from '../AudioPlayback';
 
-type ChannelPropsForwardedToComponentContext = Pick<
-  ComponentContextValue,
-  | 'Attachment'
-  | 'AttachmentPreviewList'
-  | 'AttachmentSelector'
-  | 'AttachmentSelectorInitiationButtonContents'
-  | 'AudioRecorder'
-  | 'AutocompleteSuggestionItem'
-  | 'AutocompleteSuggestionList'
-  | 'Avatar'
-  | 'BaseImage'
-  | 'CooldownTimer'
-  | 'CustomMessageActionsList'
-  | 'DateSeparator'
-  | 'EditMessageInput'
-  | 'EditMessageModal'
-  | 'EmojiPicker'
-  | 'emojiSearchIndex'
-  | 'EmptyStateIndicator'
-  | 'FileUploadIcon'
-  | 'GiphyPreviewMessage'
-  | 'HeaderComponent'
-  | 'Input'
-  | 'LinkPreviewList'
-  | 'LoadingIndicator'
-  | 'ShareLocationDialog'
-  | 'Message'
-  | 'MessageActions'
-  | 'MessageBouncePrompt'
-  | 'MessageBlocked'
-  | 'MessageDeleted'
-  | 'MessageIsThreadReplyInChannelButtonIndicator'
-  | 'MessageListNotifications'
-  | 'MessageListMainPanel'
-  | 'MessageNotification'
-  | 'MessageOptions'
-  | 'MessageRepliesCountButton'
-  | 'MessageStatus'
-  | 'MessageSystem'
-  | 'MessageTimestamp'
-  | 'Modal'
-  | 'ModalGallery'
-  | 'PinIndicator'
-  | 'PollActions'
-  | 'PollContent'
-  | 'PollCreationDialog'
-  | 'PollHeader'
-  | 'PollOptionSelector'
-  | 'QuotedMessage'
-  | 'QuotedMessagePreview'
-  | 'QuotedPoll'
-  | 'reactionOptions'
-  | 'ReactionSelector'
-  | 'ReactionsList'
-  | 'ReactionsListModal'
-  | 'ReminderNotification'
-  | 'SendButton'
-  | 'SendToChannelCheckbox'
-  | 'StartRecordingAudioButton'
-  | 'TextareaComposer'
-  | 'ThreadHead'
-  | 'ThreadHeader'
-  | 'ThreadStart'
-  | 'Timestamp'
-  | 'TypingIndicator'
-  | 'UnreadMessagesNotification'
-  | 'UnreadMessagesSeparator'
-  | 'VirtualMessage'
-  | 'StopAIGenerationButton'
-  | 'StreamedMessageText'
->;
-
-export type ChannelProps = ChannelPropsForwardedToComponentContext & {
+export type ChannelProps = {
   /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
   activeUnreadHandler?: (unread: number, documentTitle: string) => void;
   /** Allows multiple audio players to play the audio at the same time. Disabled by default. */
@@ -213,8 +139,6 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
    * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
    */
   initializeOnMount?: boolean;
-  /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
-  LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
   /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
   markReadOnMount?: boolean;
   /** Custom action handler function to run on click of an @mention in a message */
@@ -247,12 +171,9 @@ const ChannelContainer = ({
 };
 
 const UnMemoizedChannel = (props: PropsWithChildren<ChannelProps>) => {
-  const {
-    channel: propsChannel,
-    EmptyPlaceholder = null,
-    LoadingErrorIndicator,
-    LoadingIndicator = DefaultLoadingIndicator,
-  } = props;
+  const { channel: propsChannel, EmptyPlaceholder = null } = props;
+  const { LoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator } =
+    useComponentContext();
 
   const { channel: contextChannel, channelsQueryState } = useChatContext('Channel');
 
@@ -300,13 +221,15 @@ const ChannelInner = (
     doSendMessageRequest,
     doUpdateMessageRequest,
     initializeOnMount = true,
-    LoadingErrorIndicator = DefaultLoadingErrorIndicator,
-    LoadingIndicator = DefaultLoadingIndicator,
     markReadOnMount = true,
     onMentionsClick,
     onMentionsHover,
     skipMessageDataMemoization,
   } = props;
+  const {
+    LoadingErrorIndicator = DefaultLoadingErrorIndicator,
+    LoadingIndicator = DefaultLoadingIndicator,
+  } = useComponentContext();
 
   const channelQueryOptions: ChannelQueryOptions & {
     messages: { limit: number };
@@ -1203,149 +1126,6 @@ const ChannelInner = (
     ],
   );
 
-  const componentContextValue: Partial<ComponentContextValue> = useMemo(
-    () => ({
-      Attachment: props.Attachment,
-      AttachmentPreviewList: props.AttachmentPreviewList,
-      AttachmentSelector: props.AttachmentSelector,
-      AttachmentSelectorInitiationButtonContents:
-        props.AttachmentSelectorInitiationButtonContents,
-      AudioRecorder: props.AudioRecorder,
-      AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
-      AutocompleteSuggestionList: props.AutocompleteSuggestionList,
-      Avatar: props.Avatar,
-      BaseImage: props.BaseImage,
-      CooldownTimer: props.CooldownTimer,
-      CustomMessageActionsList: props.CustomMessageActionsList,
-      DateSeparator: props.DateSeparator,
-      EditMessageInput: props.EditMessageInput,
-      EditMessageModal: props.EditMessageModal,
-      EmojiPicker: props.EmojiPicker,
-      emojiSearchIndex: props.emojiSearchIndex,
-      EmptyStateIndicator: props.EmptyStateIndicator,
-      FileUploadIcon: props.FileUploadIcon,
-      GiphyPreviewMessage: props.GiphyPreviewMessage,
-      HeaderComponent: props.HeaderComponent,
-      Input: props.Input,
-      LinkPreviewList: props.LinkPreviewList,
-      LoadingIndicator: props.LoadingIndicator,
-      Message: props.Message,
-      MessageActions: props.MessageActions,
-      MessageBlocked: props.MessageBlocked,
-      MessageBouncePrompt: props.MessageBouncePrompt,
-      MessageDeleted: props.MessageDeleted,
-      MessageIsThreadReplyInChannelButtonIndicator:
-        props.MessageIsThreadReplyInChannelButtonIndicator,
-      MessageListNotifications: props.MessageListNotifications,
-      MessageNotification: props.MessageNotification,
-      MessageOptions: props.MessageOptions,
-      MessageRepliesCountButton: props.MessageRepliesCountButton,
-      MessageStatus: props.MessageStatus,
-      MessageSystem: props.MessageSystem,
-      MessageTimestamp: props.MessageTimestamp,
-      Modal: props.Modal,
-      ModalGallery: props.ModalGallery,
-      PinIndicator: props.PinIndicator,
-      PollActions: props.PollActions,
-      PollContent: props.PollContent,
-      PollCreationDialog: props.PollCreationDialog,
-      PollHeader: props.PollHeader,
-      PollOptionSelector: props.PollOptionSelector,
-      QuotedMessage: props.QuotedMessage,
-      QuotedMessagePreview: props.QuotedMessagePreview,
-      QuotedPoll: props.QuotedPoll,
-      reactionOptions: props.reactionOptions,
-      ReactionSelector: props.ReactionSelector,
-      ReactionsList: props.ReactionsList,
-      ReactionsListModal: props.ReactionsListModal,
-      ReminderNotification: props.ReminderNotification,
-      SendButton: props.SendButton,
-      SendToChannelCheckbox: props.SendToChannelCheckbox,
-      ShareLocationDialog: props.ShareLocationDialog,
-      StartRecordingAudioButton: props.StartRecordingAudioButton,
-      StopAIGenerationButton: props.StopAIGenerationButton,
-      StreamedMessageText: props.StreamedMessageText,
-      TextareaComposer: props.TextareaComposer,
-      ThreadHead: props.ThreadHead,
-      ThreadHeader: props.ThreadHeader,
-      ThreadStart: props.ThreadStart,
-      Timestamp: props.Timestamp,
-      TypingIndicator: props.TypingIndicator,
-      UnreadMessagesNotification: props.UnreadMessagesNotification,
-      UnreadMessagesSeparator: props.UnreadMessagesSeparator,
-      VirtualMessage: props.VirtualMessage,
-    }),
-    [
-      props.Attachment,
-      props.AttachmentPreviewList,
-      props.AttachmentSelector,
-      props.AttachmentSelectorInitiationButtonContents,
-      props.AudioRecorder,
-      props.AutocompleteSuggestionItem,
-      props.AutocompleteSuggestionList,
-      props.Avatar,
-      props.BaseImage,
-      props.CooldownTimer,
-      props.CustomMessageActionsList,
-      props.DateSeparator,
-      props.EditMessageInput,
-      props.EditMessageModal,
-      props.EmojiPicker,
-      props.emojiSearchIndex,
-      props.EmptyStateIndicator,
-      props.FileUploadIcon,
-      props.GiphyPreviewMessage,
-      props.HeaderComponent,
-      props.Input,
-      props.LinkPreviewList,
-      props.LoadingIndicator,
-      props.Message,
-      props.MessageActions,
-      props.MessageBlocked,
-      props.MessageBouncePrompt,
-      props.MessageDeleted,
-      props.MessageIsThreadReplyInChannelButtonIndicator,
-      props.MessageListNotifications,
-      props.MessageNotification,
-      props.MessageOptions,
-      props.MessageRepliesCountButton,
-      props.MessageStatus,
-      props.MessageSystem,
-      props.MessageTimestamp,
-      props.Modal,
-      props.ModalGallery,
-      props.PinIndicator,
-      props.PollActions,
-      props.PollContent,
-      props.PollCreationDialog,
-      props.PollHeader,
-      props.PollOptionSelector,
-      props.QuotedMessage,
-      props.QuotedMessagePreview,
-      props.QuotedPoll,
-      props.reactionOptions,
-      props.ReactionSelector,
-      props.ReactionsList,
-      props.ReactionsListModal,
-      props.ReminderNotification,
-      props.SendButton,
-      props.SendToChannelCheckbox,
-      props.ShareLocationDialog,
-      props.StartRecordingAudioButton,
-      props.StopAIGenerationButton,
-      props.StreamedMessageText,
-      props.TextareaComposer,
-      props.ThreadHead,
-      props.ThreadHeader,
-      props.ThreadStart,
-      props.Timestamp,
-      props.TypingIndicator,
-      props.UnreadMessagesNotification,
-      props.UnreadMessagesSeparator,
-      props.VirtualMessage,
-    ],
-  );
-
   const typingContextValue = useCreateTypingContext({
     typing,
   });
@@ -1378,13 +1158,11 @@ const ChannelInner = (
     <ChannelContainer className={windowsEmojiClass}>
       <ChannelStateProvider value={channelStateContextValue}>
         <ChannelActionProvider value={channelActionContextValue}>
-          <WithComponents overrides={componentContextValue}>
-            <TypingProvider value={typingContextValue}>
-              <WithAudioPlayback allowConcurrentPlayback={allowConcurrentAudioPlayback}>
-                <div className={clsx(chatContainerClass)}>{children}</div>
-              </WithAudioPlayback>
-            </TypingProvider>
-          </WithComponents>
+          <TypingProvider value={typingContextValue}>
+            <WithAudioPlayback allowConcurrentPlayback={allowConcurrentAudioPlayback}>
+              <div className={clsx(chatContainerClass)}>{children}</div>
+            </WithAudioPlayback>
+          </TypingProvider>
         </ChannelActionProvider>
       </ChannelStateProvider>
     </ChannelContainer>