stream-chat-react 12.13.1 → 13.0.0-rc.1

package/dist/components/Channel/Channel.d.ts

@@ -1,46 +1,33 @@
-import React, { PropsWithChildren } from 'react';
-import { OnMentionAction } from './hooks/useMentionsHandlers';
-import { LoadingErrorIndicatorProps } from '../Loading';
-import { ComponentContextValue, StreamMessage } from '../../context';
-import type { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, Channel as StreamChannel, StreamChat, UpdatedMessage } from 'stream-chat';
-import type { MessageInputProps } from '../MessageInput';
-import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
-import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
-export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
-    /** List of accepted file types */
-    acceptedFiles?: string[];
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { ChannelQueryOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
+import type { OnMentionAction } from './hooks/useMentionsHandlers';
+import type { LoadingErrorIndicatorProps } from '../Loading';
+import type { ComponentContextValue } from '../../context';
+import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** 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;
     /** The connected and active channel */
-    channel?: StreamChannel<StreamChatGenerics>;
+    channel?: StreamChannel;
     /**
      * Optional configuration parameters used for the initial channel query.
      * Applied only if the value of channel.initialized is false.
      * If the channel instance has already been initialized (channel has been queried),
      * then the channel query will be skipped and channelQueryOptions will not be applied.
      */
-    channelQueryOptions?: ChannelQueryOptions<StreamChatGenerics>;
+    channelQueryOptions?: ChannelQueryOptions;
     /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-    doDeleteMessageRequest?: (message: StreamMessage<StreamChatGenerics>) => Promise<MessageResponse<StreamChatGenerics>>;
+    doDeleteMessageRequest?: (message: LocalMessage) => Promise<MessageResponse>;
     /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
-    doMarkReadRequest?: (channel: StreamChannel<StreamChatGenerics>, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse<StreamChatGenerics>> | void;
+    doMarkReadRequest?: (channel: StreamChannel, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse> | void;
     /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */
-    doSendMessageRequest?: (channel: StreamChannel<StreamChatGenerics>, message: Message<StreamChatGenerics>, options?: SendMessageOptions) => ReturnType<StreamChannel<StreamChatGenerics>['sendMessage']> | void;
+    doSendMessageRequest?: (channel: StreamChannel, message: Message, options?: SendMessageOptions) => ReturnType<StreamChannel['sendMessage']> | void;
     /** Custom action handler to override the default `client.updateMessage` request function (advanced usage only) */
-    doUpdateMessageRequest?: (cid: string, updatedMessage: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => ReturnType<StreamChat<StreamChatGenerics>['updateMessage']>;
-    /** If true, chat users will be able to drag and drop file uploads to the entire channel window */
-    dragAndDropWindow?: boolean;
+    doUpdateMessageRequest?: (cid: string, updatedMessage: LocalMessage | MessageResponse, options?: UpdateMessageOptions) => ReturnType<StreamChat['updateMessage']>;
     /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
     EmptyPlaceholder?: React.ReactElement;
-    /**
-     * A global flag to toggle the URL enrichment and link previews in `MessageInput` components.
-     * By default, the feature is disabled. Can be overridden on Thread, MessageList level through additionalMessageInputProps
-     * or directly on MessageInput level through urlEnrichmentConfig.
-     */
-    enrichURLForPreview?: URLEnrichmentConfig['enrichURLForPreview'];
-    /** Global configuration for link preview generation in all the MessageInput components */
-    enrichURLForPreviewConfig?: Omit<URLEnrichmentConfig, 'enrichURLForPreview'>;
     /** The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default */
     giphyVersion?: GiphyVersions;
     /** A custom function to provide size configuration for image attachments */
@@ -55,16 +42,10 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     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;
-    /** Maximum number of attachments allowed per message */
-    maxNumberOfFiles?: number;
-    /** Whether to allow multiple attachment uploads */
-    multipleUploads?: boolean;
     /** Custom action handler function to run on click of an @mention in a message */
-    onMentionsClick?: OnMentionAction<StreamChatGenerics>;
+    onMentionsClick?: OnMentionAction;
     /** Custom action handler function to run on hover of an @mention in a message */
-    onMentionsHover?: OnMentionAction<StreamChatGenerics>;
-    /** If `dragAndDropWindow` prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput) */
-    optionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;
+    onMentionsHover?: OnMentionAction;
     /** You can turn on/off thumbnail generation for video attachments */
     shouldGenerateVideoThumbnail?: boolean;
     /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
@@ -80,5 +61,5 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
  * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
-export declare const Channel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: PropsWithChildren<ChannelProps<StreamChatGenerics, V>>) => React.JSX.Element;
+export declare const Channel: (props: PropsWithChildren<ChannelProps>) => React.JSX.Element;
 export {};

package/dist/components/Channel/Channel.js

@@ -1,18 +1,17 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import clsx from 'clsx';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
-import { nanoid } from 'nanoid';
-import clsx from 'clsx';
+import { localMessageToNewMessagePayload } from 'stream-chat';
 import { initialState, makeChannelReducer } from './channelState';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
 import { useIsMounted } from './hooks/useIsMounted';
 import { useMentionsHandlers } from './hooks/useMentionsHandlers';
-import { LoadingErrorIndicator as DefaultLoadingErrorIndicator, } from '../Loading';
+import { LoadingErrorIndicator as DefaultLoadingErrorIndicator } from '../Loading';
 import { LoadingChannel as DefaultLoadingIndicator } from './LoadingChannel';
-import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
 import { ChannelActionProvider, ChannelStateProvider, TypingProvider, useChatContext, useTranslationContext, WithComponents, } from '../../context';
 import { CHANNEL_CONTAINER_ID } from './constants';
 import { DEFAULT_HIGHLIGHT_DURATION, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_JUMP_TO_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
@@ -23,7 +22,6 @@ import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
 import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
-const isUserResponseArray = (output) => output[0]?.id != null;
 const ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
     const { customClasses, theme } = useChatContext('Channel');
     const { channelClass, chatClass } = useChannelContainerClasses({
@@ -50,7 +48,7 @@ const UnMemoizedChannel = (props) => {
     return React.createElement(ChannelInner, { ...props, channel: channel, key: channel.cid });
 };
 const ChannelInner = (props) => {
-    const { acceptedFiles, activeUnreadHandler, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, dragAndDropWindow = false, enrichURLForPreviewConfig, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, maxNumberOfFiles, multipleUploads = true, onMentionsClick, onMentionsHover, optionalMessageInputProps = {}, skipMessageDataMemoization, } = props;
+    const { activeUnreadHandler, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization, } = props;
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
@@ -61,9 +59,8 @@ const ChannelInner = (props) => {
     const thread = useThreadContext();
     const [channelConfig, setChannelConfig] = useState(channel.getConfig());
     const [notifications, setNotifications] = useState([]);
-    const [quotedMessage, setQuotedMessage] = useState();
-    const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
     const notificationTimeouts = useRef([]);
+    const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
     const channelReducer = useMemo(() => makeChannelReducer(), []);
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
@@ -519,33 +516,19 @@ const ChannelInner = (props) => {
             type: 'copyMessagesFromChannel',
         });
     };
-    const doSendMessage = async (message, customMessageData, options) => {
-        const { attachments, id, mentioned_users = [], parent_id, text } = message;
-        // channel.sendMessage expects an array of user id strings
-        const mentions = isUserResponseArray(mentioned_users)
-            ? mentioned_users.map(({ id }) => id)
-            : mentioned_users;
-        const messageData = {
-            attachments,
-            id,
-            mentioned_users: mentions,
-            parent_id,
-            quoted_message_id: parent_id === quotedMessage?.parent_id ? quotedMessage?.id : undefined,
-            text,
-            ...customMessageData,
-        };
+    const doSendMessage = async ({ localMessage, message, options, }) => {
         try {
             let messageResponse;
             if (doSendMessageRequest) {
-                messageResponse = await doSendMessageRequest(channel, messageData, options);
+                messageResponse = await doSendMessageRequest(channel, message, options);
             }
             else {
-                messageResponse = await channel.sendMessage(messageData, options);
+                messageResponse = await channel.sendMessage(message, options);
             }
-            let existingMessage;
+            let existingMessage = undefined;
             for (let i = channel.state.messages.length - 1; i >= 0; i--) {
                 const msg = channel.state.messages[i];
-                if (msg.id && msg.id === messageData.id) {
+                if (msg.id && msg.id === message.id) {
                     existingMessage = msg;
                     break;
                 }
@@ -563,8 +546,6 @@ const ChannelInner = (props) => {
                     status: 'received',
                 });
             }
-            if (quotedMessage && parent_id === quotedMessage?.parent_id)
-                setQuotedMessage(undefined);
         }
         catch (error) {
             // error response isn't usable so needs to be stringified then parsed
@@ -581,62 +562,44 @@ const ChannelInner = (props) => {
                 error instanceof Error &&
                 error.message.includes('already exists')) {
                 updateMessage({
-                    ...message,
+                    ...localMessage,
                     status: 'received',
                 });
             }
             else {
                 updateMessage({
-                    ...message,
+                    ...localMessage,
                     error: parsedError,
-                    errorStatusCode: parsedError.status || undefined,
                     status: 'failed',
                 });
                 thread?.upsertReplyLocally({
-                    // @ts-expect-error message type mismatch
                     message: {
-                        ...message,
+                        ...localMessage,
                         error: parsedError,
-                        errorStatusCode: parsedError.status || undefined,
                         status: 'failed',
                     },
                 });
             }
         }
     };
-    const sendMessage = async ({ attachments = [], mentioned_users = [], parent, text = '', }, customMessageData, options) => {
+    const sendMessage = async ({ localMessage, message, options, }) => {
         channel.state.filterErrorMessages();
-        const messagePreview = {
-            attachments,
-            created_at: new Date(),
-            html: text,
-            id: customMessageData?.id ?? `${client.userID}-${nanoid()}`,
-            mentioned_users,
-            parent_id: parent?.id,
-            reactions: [],
-            status: 'sending',
-            text,
-            type: 'regular',
-            user: client.user,
-        };
         thread?.upsertReplyLocally({
-            // @ts-expect-error message type mismatch
-            message: messagePreview,
+            message: localMessage,
         });
-        updateMessage(messagePreview);
-        await doSendMessage(messagePreview, customMessageData, options);
+        updateMessage(localMessage);
+        await doSendMessage({ localMessage, message, options });
     };
-    const retrySendMessage = async (message) => {
+    const retrySendMessage = async (localMessage) => {
         updateMessage({
-            ...message,
-            errorStatusCode: undefined,
+            ...localMessage,
+            error: undefined,
             status: 'sending',
         });
-        if (message.attachments) {
-            // remove scraped attachments added during the message composition in MessageInput to prevent sync issues
-            message.attachments = message.attachments.filter((attachment) => !attachment.og_scrape_url);
-        }
-        await doSendMessage(message);
+        await doSendMessage({
+            localMessage,
+            message: localMessageToNewMessagePayload(localMessage),
+        });
     };
     const removeMessage = (message) => {
         channel.state.removeMessage(message);
@@ -649,14 +612,6 @@ const ChannelInner = (props) => {
     /** THREAD */
     const openThread = (message, event) => {
         event?.preventDefault();
-        setQuotedMessage((current) => {
-            if (current?.parent_id !== message?.parent_id) {
-                return undefined;
-            }
-            else {
-                return current;
-            }
-        });
         dispatch({ channel, message, type: 'openThread' });
     };
     const closeThread = (event) => {
@@ -701,23 +656,14 @@ const ChannelInner = (props) => {
     const { typing, ...restState } = state;
     const channelStateContextValue = useCreateChannelStateContext({
         ...restState,
-        acceptedFiles,
         channel,
         channelCapabilitiesArray,
         channelConfig,
         channelUnreadUiState,
-        debounceURLEnrichmentMs: enrichURLForPreviewConfig?.debounceURLEnrichmentMs,
-        dragAndDropWindow,
-        enrichURLForPreview: props.enrichURLForPreview,
-        findURLFn: enrichURLForPreviewConfig?.findURLFn,
         giphyVersion: props.giphyVersion || 'fixed_height',
         imageAttachmentSizeHandler: props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
-        maxNumberOfFiles,
-        multipleUploads,
         mutes,
         notifications,
-        onLinkPreviewDismissed: enrichURLForPreviewConfig?.onLinkPreviewDismissed,
-        quotedMessage,
         shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail || true,
         videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
         watcher_count: state.watcherCount,
@@ -742,7 +688,6 @@ const ChannelInner = (props) => {
         retrySendMessage,
         sendMessage,
         setChannelUnreadUiState,
-        setQuotedMessage,
         skipMessageDataMemoization,
         updateMessage,
     }), 
@@ -750,18 +695,14 @@ const ChannelInner = (props) => {
     [
         channel.cid,
         deleteMessage,
-        enrichURLForPreviewConfig?.findURLFn,
-        enrichURLForPreviewConfig?.onLinkPreviewDismissed,
         loadMore,
         loadMoreNewer,
         markRead,
-        quotedMessage,
         jumpToFirstUnreadMessage,
         jumpToMessage,
         jumpToLatestMessage,
         setChannelUnreadUiState,
     ]);
-    // @ts-expect-error message type mismatch
     const componentContextValue = useMemo(() => ({
         Attachment: props.Attachment,
         AttachmentPreviewList: props.AttachmentPreviewList,
@@ -787,6 +728,7 @@ const ChannelInner = (props) => {
         LoadingIndicator: props.LoadingIndicator,
         Message: props.Message,
         MessageActions: props.MessageActions,
+        MessageBlocked: props.MessageBlocked,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
         MessageListNotifications: props.MessageListNotifications,
@@ -818,7 +760,6 @@ const ChannelInner = (props) => {
         ThreadHeader: props.ThreadHeader,
         ThreadStart: props.ThreadStart,
         Timestamp: props.Timestamp,
-        TriggerProvider: props.TriggerProvider,
         TypingIndicator: props.TypingIndicator,
         UnreadMessagesNotification: props.UnreadMessagesNotification,
         UnreadMessagesSeparator: props.UnreadMessagesSeparator,
@@ -838,6 +779,7 @@ const ChannelInner = (props) => {
         props.DateSeparator,
         props.EditMessageInput,
         props.EmojiPicker,
+        props.emojiSearchIndex,
         props.EmptyStateIndicator,
         props.FileUploadIcon,
         props.GiphyPreviewMessage,
@@ -847,6 +789,7 @@ const ChannelInner = (props) => {
         props.LoadingIndicator,
         props.Message,
         props.MessageActions,
+        props.MessageBlocked,
         props.MessageBouncePrompt,
         props.MessageDeleted,
         props.MessageListNotifications,
@@ -866,24 +809,22 @@ const ChannelInner = (props) => {
         props.QuotedMessage,
         props.QuotedMessagePreview,
         props.QuotedPoll,
+        props.reactionOptions,
         props.ReactionSelector,
         props.ReactionsList,
         props.ReactionsListModal,
         props.SendButton,
         props.StartRecordingAudioButton,
+        props.StopAIGenerationButton,
+        props.StreamedMessageText,
         props.ThreadHead,
         props.ThreadHeader,
         props.ThreadStart,
         props.Timestamp,
-        props.TriggerProvider,
         props.TypingIndicator,
         props.UnreadMessagesNotification,
         props.UnreadMessagesSeparator,
         props.VirtualMessage,
-        props.StopAIGenerationButton,
-        props.StreamedMessageText,
-        props.emojiSearchIndex,
-        props.reactionOptions,
     ]);
     const typingContextValue = useCreateTypingContext({
         typing,
@@ -905,9 +846,7 @@ const ChannelInner = (props) => {
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React.createElement(WithComponents, { overrides: componentContextValue },
                     React.createElement(TypingProvider, { value: typingContextValue },
-                        React.createElement("div", { className: `${chatContainerClass}` },
-                            dragAndDropWindow && (React.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children)),
-                            !dragAndDropWindow && React.createElement(React.Fragment, null, children))))))));
+                        React.createElement("div", { className: clsx(chatContainerClass) }, children)))))));
 };
 /**
  * A wrapper component that provides channel data and renders children.

package/dist/components/Channel/channelState.d.ts

@@ -1,40 +1,39 @@
-import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
-import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { Channel, LocalMessage, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
+import type { ChannelState } from '../../context/ChannelStateContext';
+export type ChannelStateReducerAction = {
     type: 'closeThread';
 } | {
     type: 'clearHighlightedMessage';
 } | {
-    channel: Channel<StreamChatGenerics>;
+    channel: Channel;
     type: 'copyMessagesFromChannel';
     parentId?: string | null;
 } | {
-    channel: Channel<StreamChatGenerics>;
+    channel: Channel;
     type: 'copyStateFromChannelOnEvent';
 } | {
-    channel: Channel<StreamChatGenerics>;
+    channel: Channel;
     highlightedMessageId: string;
     type: 'jumpToMessageFinished';
 } | {
-    channel: Channel<StreamChatGenerics>;
+    channel: Channel;
     hasMore: boolean;
     type: 'initStateFromChannel';
 } | {
     hasMore: boolean;
-    messages: StreamMessage<StreamChatGenerics>[];
+    messages: LocalMessage[];
     type: 'loadMoreFinished';
 } | {
     hasMoreNewer: boolean;
-    messages: StreamMessage<StreamChatGenerics>[];
+    messages: LocalMessage[];
     type: 'loadMoreNewerFinished';
 } | {
     threadHasMore: boolean;
-    threadMessages: Array<ReturnType<StreamChannelState<StreamChatGenerics>['formatMessage']>>;
+    threadMessages: Array<ReturnType<StreamChannelState['formatMessage']>>;
     type: 'loadMoreThreadFinished';
 } | {
-    channel: Channel<StreamChatGenerics>;
-    message: StreamMessage<StreamChatGenerics>;
+    channel: Channel;
+    message: LocalMessage;
     type: 'openThread';
 } | {
     error: Error;
@@ -46,21 +45,21 @@ export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamCh
     loadingMoreNewer: boolean;
     type: 'setLoadingMoreNewer';
 } | {
-    message: StreamMessage<StreamChatGenerics>;
+    message: LocalMessage;
     type: 'setThread';
 } | {
-    channel: Channel<StreamChatGenerics>;
+    channel: Channel;
     type: 'setTyping';
 } | {
     type: 'startLoadingThread';
 } | {
-    channel: Channel<StreamChatGenerics>;
-    message: MessageResponse<StreamChatGenerics>;
+    channel: Channel;
+    message: MessageResponse;
     type: 'updateThreadOnEvent';
 } | {
     type: 'jumpToLatestMessage';
 };
-export declare const makeChannelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => (state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
+export declare const makeChannelReducer: () => (state: ChannelState, action: ChannelStateReducerAction) => ChannelState;
 export declare const initialState: {
     error: null;
     hasMore: boolean;

package/dist/components/Channel/hooks/useChannelContainerClasses.d.ts

@@ -1,8 +1,7 @@
 import type { ChatContextValue } from '../../../context/ChatContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useImageFlagEmojisOnWindowsClass: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => "" | "str-chat--windows-flags";
+export declare const useImageFlagEmojisOnWindowsClass: () => "" | "str-chat--windows-flags";
 export declare const getChatContainerClass: (customClass?: string) => string;
-export declare const useChannelContainerClasses: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customClasses, }: Pick<ChatContextValue, 'customClasses'>) => {
+export declare const useChannelContainerClasses: ({ customClasses, }: Pick<ChatContextValue, 'customClasses'>) => {
     channelClass: string;
     chatClass: string;
     chatContainerClass: string;

package/dist/components/Channel/hooks/useCreateChannelStateContext.d.ts

@@ -1,6 +1,5 @@
 import type { ChannelStateContextValue } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateChannelStateContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(value: Omit<ChannelStateContextValue<StreamChatGenerics>, 'channelCapabilities'> & {
+export declare const useCreateChannelStateContext: (value: Omit<ChannelStateContextValue, 'channelCapabilities'> & {
     channelCapabilitiesArray: string[];
     skipMessageDataMemoization?: boolean;
-}) => ChannelStateContextValue<StreamChatGenerics>;
+}) => ChannelStateContextValue;

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { isDate, isDayOrMoment } from '../../../i18n';
 export const useCreateChannelStateContext = (value) => {
-    const { acceptedFiles, channel, channelCapabilitiesArray = [], channelConfig, channelUnreadUiState, debounceURLEnrichmentMs, dragAndDropWindow, enrichURLForPreview, error, findURLFn, giphyVersion, hasMore, hasMoreNewer, highlightedMessageId, imageAttachmentSizeHandler, loading, loadingMore, maxNumberOfFiles, members, messages = [], multipleUploads, mutes, notifications, onLinkPreviewDismissed, pinnedMessages, quotedMessage, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, suppressAutoscroll, thread, threadHasMore, threadLoadingMore, threadMessages = [], videoAttachmentSizeHandler, watcher_count, watcherCount, watchers, } = value;
+    const { channel, channelCapabilitiesArray = [], channelConfig, channelUnreadUiState, error, giphyVersion, hasMore, hasMoreNewer, highlightedMessageId, imageAttachmentSizeHandler, loading, loadingMore, members, messages = [], mutes, notifications, pinnedMessages, read = {}, shouldGenerateVideoThumbnail, skipMessageDataMemoization, suppressAutoscroll, thread, threadHasMore, threadLoadingMore, threadMessages = [], videoAttachmentSizeHandler, watcher_count, watcherCount, watchers, } = value;
     const channelId = channel.cid;
     const lastRead = channel.initialized && channel.lastRead()?.getTime();
     const membersLength = Object.keys(members || []).length;
@@ -29,16 +29,11 @@ export const useCreateChannelStateContext = (value) => {
         : updated_at || ''}${user?.updated_at}`)
         .join();
     const channelStateContext = useMemo(() => ({
-        acceptedFiles,
         channel,
         channelCapabilities,
         channelConfig,
         channelUnreadUiState,
-        debounceURLEnrichmentMs,
-        dragAndDropWindow,
-        enrichURLForPreview,
         error,
-        findURLFn,
         giphyVersion,
         hasMore,
         hasMoreNewer,
@@ -46,15 +41,11 @@ export const useCreateChannelStateContext = (value) => {
         imageAttachmentSizeHandler,
         loading,
         loadingMore,
-        maxNumberOfFiles,
         members,
         messages,
-        multipleUploads,
         mutes,
         notifications,
-        onLinkPreviewDismissed,
         pinnedMessages,
-        quotedMessage,
         read,
         shouldGenerateVideoThumbnail,
         suppressAutoscroll,
@@ -72,10 +63,7 @@ export const useCreateChannelStateContext = (value) => {
         channel.data?.name, // otherwise ChannelHeader will not be updated
         channelId,
         channelUnreadUiState,
-        debounceURLEnrichmentMs,
-        enrichURLForPreview,
         error,
-        findURLFn,
         hasMore,
         hasMoreNewer,
         highlightedMessageId,
@@ -86,8 +74,6 @@ export const useCreateChannelStateContext = (value) => {
         memoizedMessageData,
         memoizedThreadMessageData,
         notificationsLength,
-        onLinkPreviewDismissed,
-        quotedMessage,
         readUsersLength,
         readUsersLastReads,
         shouldGenerateVideoThumbnail,

package/dist/components/Channel/hooks/useCreateTypingContext.d.ts

@@ -1,3 +1,2 @@
 import type { TypingContextValue } from '../../../context/TypingContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateTypingContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(value: TypingContextValue<StreamChatGenerics>) => TypingContextValue<StreamChatGenerics>;
+export declare const useCreateTypingContext: (value: TypingContextValue) => TypingContextValue;

package/dist/components/Channel/hooks/useEditMessageHandler.d.ts

@@ -1,5 +1,4 @@
-import type { StreamChat, UpdatedMessage } from 'stream-chat';
-import type { DefaultStreamChatGenerics, UpdateMessageOptions } from '../../../types/types';
-type UpdateHandler<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (cid: string, updatedMessage: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => ReturnType<StreamChat<StreamChatGenerics>['updateMessage']>;
-export declare const useEditMessageHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(doUpdateMessageRequest?: UpdateHandler<StreamChatGenerics>) => (updatedMessage: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => Promise<import("stream-chat").UpdateMessageAPIResponse<StreamChatGenerics>>;
+import type { LocalMessage, MessageResponse, StreamChat, UpdateMessageOptions } from 'stream-chat';
+type UpdateHandler = (cid: string, updatedMessage: LocalMessage | MessageResponse, options?: UpdateMessageOptions) => ReturnType<StreamChat['updateMessage']>;
+export declare const useEditMessageHandler: (doUpdateMessageRequest?: UpdateHandler) => (updatedMessage: LocalMessage | MessageResponse, options?: UpdateMessageOptions) => Promise<import("stream-chat").UpdateMessageAPIResponse>;
 export {};

package/dist/components/Channel/hooks/useMentionsHandlers.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-export type OnMentionAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (event: React.BaseSyntheticEvent, user?: UserResponse<StreamChatGenerics>) => void;
-export declare const useMentionsHandlers: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(onMentionsHover?: OnMentionAction<StreamChatGenerics>, onMentionsClick?: OnMentionAction<StreamChatGenerics>) => (event: React.BaseSyntheticEvent, mentioned_users: UserResponse<StreamChatGenerics>[]) => void;
+export type OnMentionAction = (event: React.BaseSyntheticEvent, user?: UserResponse) => void;
+export declare const useMentionsHandlers: (onMentionsHover?: OnMentionAction, onMentionsClick?: OnMentionAction) => (event: React.BaseSyntheticEvent, mentioned_users: UserResponse[]) => void;

package/dist/components/Channel/utils.d.ts

@@ -4,18 +4,17 @@
 /// <reference types="node" />
 /// <reference types="node" />
 import type { Dispatch, SetStateAction } from 'react';
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import type { ChannelState, MessageResponse, StreamChat } from 'stream-chat';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types';
 export declare const makeAddNotifications: (setNotifications: Dispatch<SetStateAction<ChannelNotifications>>, notificationTimeouts: NodeJS.Timeout[]) => (text: string, type: 'success' | 'error') => void;
 /**
  * Utility function for jumpToFirstUnreadMessage
  * @param targetId
  * @param msgSet
  */
-export declare const findInMsgSetById: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(targetId: string, msgSet: ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>[]) => {
+export declare const findInMsgSetById: (targetId: string, msgSet: ReturnType<ChannelState['formatMessage']>[]) => {
     index: number;
-    target: import("stream-chat").FormatMessageResponse<StreamChatGenerics>;
+    target: import("stream-chat").LocalMessage;
 } | {
     index: number;
     target?: undefined;
@@ -26,10 +25,13 @@ export declare const findInMsgSetById: <StreamChatGenerics extends DefaultStream
  * @param msgSet
  * @param exact
  */
-export declare const findInMsgSetByDate: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(targetDate: Date, msgSet: MessageResponse<StreamChatGenerics>[] | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>[], exact?: boolean) => {
+export declare const findInMsgSetByDate: (targetDate: Date, msgSet: MessageResponse[] | ReturnType<ChannelState['formatMessage']>[], exact?: boolean) => {
     index: number;
-    target: MessageResponse<StreamChatGenerics> | import("stream-chat").FormatMessageResponse<StreamChatGenerics>;
+    target: import("stream-chat").LocalMessage | MessageResponse;
 } | {
     index: number;
     target?: undefined;
 };
+export declare const generateMessageId: ({ client }: {
+    client: StreamChat;
+}) => string;

package/dist/components/Channel/utils.js

@@ -63,3 +63,4 @@ export const findInMsgSetByDate = (targetDate, msgSet, exact = false) => {
     }
     return { index: -1 };
 };
+export const generateMessageId = ({ client }) => `${client.userID}-${nanoid()}`;