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

package/dist/components/Dialog/PromptDialog.d.ts

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 export type ConfirmationDialogProps = {
     actions: ComponentProps<'button'>[];
     prompt: string;

package/dist/components/DragAndDrop/DragAndDropContainer.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type DragAndDropContainerProps = PropsWithChildren<{
     className?: string;
     draggable?: boolean;

package/dist/components/EventComponent/EventComponent.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Event, LocalMessage } from 'stream-chat';
+import type { AvatarProps } from '../Avatar';
 import type { TimestampFormatterOptions } from '../../i18n/types';
-export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
+export type EventComponentProps = TimestampFormatterOptions & {
     /** Message object */
-    message: StreamMessage<StreamChatGenerics>;
+    message: LocalMessage & {
+        event?: Event;
+    };
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps>;
 };
-export declare const EventComponent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: EventComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const EventComponent: (props: EventComponentProps) => React.JSX.Element | null;

package/dist/components/Form/FieldError.d.ts

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 type FieldErrorProps = ComponentProps<'div'> & {
     text?: string;
 };

package/dist/components/Form/SwitchField.d.ts

@@ -1,4 +1,5 @@
-import React, { ComponentProps, PropsWithChildren } from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
+import React from 'react';
 export type SwitchFieldProps = PropsWithChildren<ComponentProps<'input'>>;
 export declare const SwitchField: ({ children, ...props }: SwitchFieldProps) => React.JSX.Element;
 export type SimpleSwitchFieldProps = ComponentProps<'input'> & {

package/dist/components/Form/SwitchField.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef, } from 'react';
+import React, { useRef } from 'react';
 export const SwitchField = ({ children, ...props }) => {
     const inputRef = useRef(null);
     const handleKeyUp = (event) => {

package/dist/components/Gallery/Gallery.d.ts

@@ -1,11 +1,11 @@
-import React, { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
+import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type GalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type GalleryProps = {
     images: (({
         image_url?: string | undefined;
         thumb_url?: string | undefined;
-    } | Attachment<StreamChatGenerics>) & {
+    } | Attachment) & {
         previewUrl?: string;
         style?: CSSProperties;
     })[];
@@ -14,4 +14,4 @@ export type GalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics =
 /**
  * Displays images in a simple responsive grid with a light box to view the images.
  */
-export declare const Gallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: GalleryProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Gallery: (props: GalleryProps) => React.JSX.Element;

package/dist/components/Gallery/Image.d.ts

@@ -1,7 +1,8 @@
-import React, { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
+import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics, Dimensions } from '../../types/types';
-export type ImageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { Dimensions } from '../../types/types';
+export type ImageProps = {
     dimensions?: Dimensions;
     innerRef?: MutableRefObject<HTMLImageElement | null>;
     previewUrl?: string;
@@ -13,8 +14,8 @@ export type ImageProps<StreamChatGenerics extends DefaultStreamChatGenerics = De
     image_url?: string;
     /** The thumb url */
     thumb_url?: string;
-} | Attachment<StreamChatGenerics>);
+} | Attachment);
 /**
  * A simple component that displays an image.
  */
-export declare const ImageComponent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ImageProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const ImageComponent: (props: ImageProps) => React.JSX.Element;

package/dist/components/Gallery/ModalGallery.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type ModalGalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type ModalGalleryProps = {
     /** The images for the Carousel component */
-    images: Attachment<StreamChatGenerics>[];
+    images: Attachment[];
     /** The index for the component */
     index?: number;
 };
-export declare const ModalGallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ModalGalleryProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const ModalGallery: (props: ModalGalleryProps) => React.JSX.Element;

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 import type { PaginatorProps } from '../../types/types';
 export type InfiniteScrollProps = PaginatorProps & {
     className?: string;

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
     listenToScroll?: (distanceFromBottom: number, distanceFromTop: number, threshold: number) => void;
     loadNextDebounceMs?: number;

package/dist/components/LoadMore/LoadMoreButton.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type LoadMoreButtonProps = {
     /** onClick handler load more button. Pagination logic should be executed in this handler. */
     onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/components/LoadMore/LoadMorePaginator.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from 'react';
-import { LoadMoreButtonProps } from './LoadMoreButton';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { LoadMoreButtonProps } from './LoadMoreButton';
 import type { PaginatorProps } from '../../types/types';
 export type LoadMorePaginatorProps = PaginatorProps & {
     /** A UI button component that handles pagination logic */

package/dist/components/LoadMore/LoadMorePaginator.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { LoadMoreButton as DefaultLoadMoreButton, } from './LoadMoreButton';
+import { LoadMoreButton as DefaultLoadMoreButton } from './LoadMoreButton';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 export const UnMemoizedLoadMorePaginator = (props) => {
     const { children, hasNextPage, isLoading, LoadMoreButton = DefaultLoadMoreButton, loadNextPage, refreshing, reverse, } = props;

package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.js

@@ -3,9 +3,10 @@ import { AudioRecordingPreview } from './AudioRecordingPreview';
 import { AudioRecordingInProgress } from './AudioRecordingInProgress';
 import { MediaRecordingState } from '../classes';
 import { BinIcon, CheckSignIcon, LoadingIndicatorIcon, MicIcon, PauseIcon, SendIcon, } from '../../MessageInput';
-import { useMessageInputContext } from '../../../context';
+import { useMessageInputContext } from '../../../context/MessageInputContext';
 export const AudioRecorder = () => {
-    const { recordingController: { completeRecording, recorder, recording, recordingState }, } = useMessageInputContext();
+    const messageInputContext = useMessageInputContext();
+    const { recordingController: { completeRecording, recorder, recording, recordingState }, } = messageInputContext;
     const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';
     const state = useMemo(() => ({
         paused: recordingState === MediaRecordingState.PAUSED,

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useTimeElapsed } from '../../MessageInput/hooks/useTimeElapsed';
+import { useTimeElapsed } from './hooks/useTimeElapsed';
 import { useMessageInputContext } from '../../../context';
 import { RecordingTimer } from './RecordingTimer';
 const AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {

package/dist/components/MediaRecorder/RecordingPermissionDeniedNotification.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RecordingPermission } from './classes/BrowserPermission';
+import type { RecordingPermission } from './classes/BrowserPermission';
 export type RecordingPermissionDeniedNotificationProps = {
     onClose: () => void;
     permissionName: RecordingPermission;

package/dist/components/MediaRecorder/classes/MediaRecorderController.d.ts

@@ -1,11 +1,11 @@
-import { AmplitudeRecorder, AmplitudeRecorderConfig } from './AmplitudeRecorder';
+import { AmplitudeRecorder } from './AmplitudeRecorder';
 import { BrowserPermission } from './BrowserPermission';
 import { BehaviorSubject, Subject } from '../observable';
-import { TranscoderConfig } from '../transcode';
-import { RecordedMediaType } from '../../ReactFileUtilities';
-import { TranslationContextValue } from '../../../context';
-import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
-import type { DefaultStreamChatGenerics } from '../../../types';
+import type { TranscoderConfig } from '../transcode';
+import type { RecordedMediaType } from '../../ReactFileUtilities';
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { AmplitudeRecorderConfig } from './AmplitudeRecorder';
+import type { TranslationContextValue } from '../../../context';
 export declare const RECORDED_MIME_TYPE_BY_BROWSER: {
     readonly audio: {
         readonly others: "audio/webm";
@@ -36,7 +36,7 @@ export declare enum MediaRecordingState {
 export declare enum RecordingAttachmentType {
     VOICE_RECORDING = "voiceRecording"
 }
-export declare class MediaRecorderController<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
+export declare class MediaRecorderController {
     permission: BrowserPermission;
     mediaRecorder: MediaRecorder | undefined;
     amplitudeRecorder: AmplitudeRecorder | undefined;
@@ -48,9 +48,9 @@ export declare class MediaRecorderController<StreamChatGenerics extends DefaultS
     recordedData: Blob[];
     recordingUri: string | undefined;
     mediaType: RecordedMediaType;
-    signalRecordingReady: ((r: LocalVoiceRecordingAttachment<StreamChatGenerics>) => void) | undefined;
+    signalRecordingReady: ((r: LocalVoiceRecordingAttachment) => void) | undefined;
     recordingState: BehaviorSubject<MediaRecordingState | undefined>;
-    recording: BehaviorSubject<LocalVoiceRecordingAttachment<StreamChatGenerics> | undefined>;
+    recording: BehaviorSubject<LocalVoiceRecordingAttachment | undefined>;
     error: Subject<Error | undefined>;
     notification: Subject<{
         text: string;
@@ -61,19 +61,7 @@ export declare class MediaRecorderController<StreamChatGenerics extends DefaultS
     constructor({ config, generateRecordingTitle, t }?: AudioRecorderOptions);
     get durationMs(): number;
     generateRecordingTitle: (mimeType: string) => string;
-    makeVoiceRecording: () => Promise<{
-        asset_url: string;
-        duration: number;
-        file_size: number;
-        localMetadata: {
-            file: File;
-            id: string;
-        };
-        mime_type: string;
-        title: string;
-        type: RecordingAttachmentType;
-        waveform_data: number[];
-    } | undefined>;
+    makeVoiceRecording: () => Promise<LocalVoiceRecordingAttachment | undefined>;
     handleErrorEvent: (e: Event) => void;
     handleDataavailableEvent: (e: BlobEvent) => Promise<void>;
     resetRecordingState: () => void;
@@ -81,7 +69,7 @@ export declare class MediaRecorderController<StreamChatGenerics extends DefaultS
     start: () => Promise<void>;
     pause: () => void;
     resume: () => void;
-    stop: () => Promise<undefined> | Promise<LocalVoiceRecordingAttachment<StreamChatGenerics>>;
+    stop: () => Promise<LocalVoiceRecordingAttachment> | Promise<undefined>;
     cancel: () => void;
 }
 export {};

package/dist/components/MediaRecorder/hooks/useMediaRecorder.d.ts

@@ -1,18 +1,18 @@
-import { MessageInputContextValue } from '../../../context';
-import { CustomAudioRecordingConfig, MediaRecorderController, MediaRecordingState } from '../classes';
-import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type RecordingController<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import { MediaRecorderController } from '../classes';
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { CustomAudioRecordingConfig, MediaRecordingState } from '../classes';
+import type { MessageInputContextValue } from '../../../context';
+export type RecordingController = {
     completeRecording: () => void;
     permissionState?: PermissionState;
     recorder?: MediaRecorderController;
-    recording?: LocalVoiceRecordingAttachment<StreamChatGenerics>;
+    recording?: LocalVoiceRecordingAttachment;
     recordingState?: MediaRecordingState;
 };
-type UseMediaRecorderParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMultiSendEnabled' | 'handleSubmit' | 'uploadAttachment'> & {
+type UseMediaRecorderParams = Pick<MessageInputContextValue, 'asyncMessagesMultiSendEnabled' | 'handleSubmit'> & {
     enabled: boolean;
     generateRecordingTitle?: (mimeType: string) => string;
     recordingConfig?: CustomAudioRecordingConfig;
 };
-export declare const useMediaRecorder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }: UseMediaRecorderParams<StreamChatGenerics>) => RecordingController<StreamChatGenerics>;
+export declare const useMediaRecorder: ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, }: UseMediaRecorderParams) => RecordingController;
 export {};

package/dist/components/MediaRecorder/hooks/useMediaRecorder.js

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { MediaRecorderController } from '../classes';
 import { useTranslationContext } from '../../../context';
-import { MediaRecorderController, } from '../classes';
-export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, uploadAttachment, }) => {
+import { useMessageComposer } from '../../MessageInput';
+export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, generateRecordingTitle, handleSubmit, recordingConfig, }) => {
     const { t } = useTranslationContext('useMediaRecorder');
+    const messageComposer = useMessageComposer();
     const [recording, setRecording] = useState();
     const [recordingState, setRecordingState] = useState();
     const [permissionState, setPermissionState] = useState();
@@ -20,13 +22,13 @@ export const useMediaRecorder = ({ asyncMessagesMultiSendEnabled, enabled, gener
         const recording = await recorder.stop();
         if (!recording)
             return;
-        await uploadAttachment(recording);
+        await messageComposer.attachmentManager.uploadAttachment(recording);
         if (!asyncMessagesMultiSendEnabled) {
             // FIXME: cannot call handleSubmit() directly as the function has stale reference to attachments
             scheduleForSubmit(true);
         }
         recorder.cleanUp();
-    }, [asyncMessagesMultiSendEnabled, recorder, uploadAttachment]);
+    }, [asyncMessagesMultiSendEnabled, messageComposer, recorder]);
     useEffect(() => {
         if (!isScheduledForSubmit)
             return;

package/dist/components/MediaRecorder/observable/BehaviorSubject.d.ts

@@ -1,6 +1,6 @@
 import { Subject } from './Subject';
-import { ObserverOrNext } from './Observer';
-import { Subscription } from './Subscription';
+import type { ObserverOrNext } from './Observer';
+import type { Subscription } from './Subscription';
 export declare class BehaviorSubject<T> extends Subject<T> {
     private _value;
     constructor(_value: T);

package/dist/components/MediaRecorder/observable/Observable.d.ts

@@ -1,4 +1,4 @@
-import { ObserverOrNext } from './Observer';
+import type { ObserverOrNext } from './Observer';
 import { Subscription } from './Subscription';
 export interface Unsubscribable {
     unsubscribe(): void;

package/dist/components/MediaRecorder/observable/Subject.d.ts

@@ -1,6 +1,7 @@
 import { Observable } from './Observable';
-import { Subscription, SubscriptionLike } from './Subscription';
-import { Observer, ObserverOrNext } from './Observer';
+import type { SubscriptionLike } from './Subscription';
+import { Subscription } from './Subscription';
+import type { Observer, ObserverOrNext } from './Observer';
 export declare class Subject<T> extends Observable<T> implements SubscriptionLike {
     private _observers;
     private _observerCounter;

package/dist/components/Message/FixedHeightMessage.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type FixedHeightMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { LocalMessage } from 'stream-chat';
+export type FixedHeightMessageProps = {
     groupedByUser?: boolean;
-    message?: StreamMessage<StreamChatGenerics>;
+    message?: LocalMessage;
 };
 /**
  * @deprecated - This UI component will be removed in the next major release.
@@ -11,4 +10,4 @@ export type FixedHeightMessageProps<StreamChatGenerics extends DefaultStreamChat
  * FixedHeightMessage - This component renders a single message.
  * It uses fixed height elements to make sure it works well in VirtualizedMessageList
  */
-export declare const FixedHeightMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: FixedHeightMessageProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const FixedHeightMessage: (props: FixedHeightMessageProps) => React.JSX.Element;

package/dist/components/Message/Message.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { MessageProps } from './types';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * The Message component is a context provider which implements all the logic required for rendering
  * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
  */
-export declare const Message: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Message: (props: MessageProps) => React.JSX.Element;

package/dist/components/Message/MessageBlocked.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MessageBlocked: () => React.JSX.Element;

package/dist/components/Message/MessageBlocked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useUserRole } from './hooks/useUserRole';
+import { useTranslationContext } from '../../context/TranslationContext';
+import { useMessageContext } from '../../context';
+export const MessageBlocked = () => {
+    const { message } = useMessageContext();
+    const { t } = useTranslationContext('MessageBlocked');
+    const { isMyMessage } = useUserRole(message);
+    const messageClasses = clsx('str-chat__message str-chat__message-simple str-chat__message--blocked', message.type, {
+        'str-chat__message--me str-chat__message-simple--me': isMyMessage,
+        'str-chat__message--other': !isMyMessage,
+    });
+    return (React.createElement("div", { className: messageClasses, "data-testid": 'message-blocked-component', key: message.id },
+        React.createElement("div", { className: 'str-chat__message--blocked-inner' }, t('Message was blocked by moderation policies'))));
+};

package/dist/components/Message/MessageDeleted.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type MessageDeletedProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    message: StreamMessage<StreamChatGenerics>;
+import type { LocalMessage } from 'stream-chat';
+export type MessageDeletedProps = {
+    message: LocalMessage;
 };
-export declare const MessageDeleted: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageDeletedProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const MessageDeleted: (props: MessageDeletedProps) => React.JSX.Element;

package/dist/components/Message/MessageEditedTimestamp.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
 import type { MessageTimestampProps } from './MessageTimestamp';
-export type MessageEditedTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = MessageTimestampProps<StreamChatGenerics> & {
+export type MessageEditedTimestampProps = MessageTimestampProps & {
     open: boolean;
 };
-export declare function MessageEditedTimestamp<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ message: propMessage, open, ...timestampProps }: MessageEditedTimestampProps<StreamChatGenerics>): React.JSX.Element | null;
+export declare function MessageEditedTimestamp({ message: propMessage, open, ...timestampProps }: MessageEditedTimestampProps): React.JSX.Element | null;

package/dist/components/Message/MessageErrorText.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { StreamMessage } from '../../context';
-import { DefaultStreamChatGenerics } from '../../types/types';
-export interface MessageErrorTextProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
-    message: StreamMessage<StreamChatGenerics>;
+import type { LocalMessage } from 'stream-chat';
+export interface MessageErrorTextProps {
+    message: LocalMessage;
     theme: string;
 }
-export declare function MessageErrorText<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ message, theme }: MessageErrorTextProps<StreamChatGenerics>): React.JSX.Element | null;
+export declare function MessageErrorText({ message, theme }: MessageErrorTextProps): React.JSX.Element | null;

package/dist/components/Message/MessageErrorText.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { useTranslationContext } from '../../context';
 import { isMessageBounced } from './utils';
+import { useTranslationContext } from '../../context';
 export function MessageErrorText({ message, theme }) {
     const { t } = useTranslationContext('MessageText');
     if (message.type === 'error' && !isMessageBounced(message)) {
         return (React.createElement("div", { className: `str-chat__${theme}-message--error-message str-chat__message--error-message` }, t('Error · Unsent')));
     }
     if (message.status === 'failed') {
-        return (React.createElement("div", { className: `str-chat__${theme}-message--error-message str-chat__message--error-message` }, message.errorStatusCode !== 403
+        return (React.createElement("div", { className: `str-chat__${theme}-message--error-message str-chat__message--error-message` }, message.error?.status !== 403
             ? t('Message Failed · Click to try again')
             : t('Message Failed · Unauthorized')));
     }

package/dist/components/Message/MessageOptions.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
+import type { IconProps } from '../../types/types';
 import type { MessageContextValue } from '../../context/MessageContext';
-export type MessageOptionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleOpenThread'>> & {
+export type MessageOptionsProps = Partial<Pick<MessageContextValue, 'handleOpenThread'>> & {
     ActionsIcon?: React.ComponentType<IconProps>;
     displayReplies?: boolean;
     ReactionIcon?: React.ComponentType<IconProps>;
     theme?: string;
     ThreadIcon?: React.ComponentType<IconProps>;
 };
-export declare const MessageOptions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageOptionsProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const MessageOptions: (props: MessageOptionsProps) => React.JSX.Element | null;

package/dist/components/Message/MessageRepliesCountButton.d.ts

@@ -1,4 +1,5 @@
-import React, { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
+import React from 'react';
 export type MessageRepliesCountButtonProps = {
     labelPlural?: string;
     labelSingle?: string;

package/dist/components/Message/MessageSimple.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { MessageUIComponentProps } from './types';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 /**
  * The default UI component that renders a message and receives functionality and logic from the MessageContext.
  */
-export declare const MessageSimple: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageUIComponentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const MessageSimple: (props: MessageUIComponentProps) => React.JSX.Element;

package/dist/components/Message/MessageSimple.js

@@ -3,18 +3,17 @@ import clsx from 'clsx';
 import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
+import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
 import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
 import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
 import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
-import { areMessageUIPropsEqual, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
+import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
+import { EditMessageModal } from '../MessageInput';
 import { MML } from '../MML';
-import { Modal } from '../Modal';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -23,28 +22,32 @@ import { useMessageContext } from '../../context/MessageContext';
 import { useChatContext, useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
+import { isDateSeparatorMessage } from '../MessageList';
 const MessageSimpleWithContext = (props) => {
-    const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
+    const { additionalMessageInputProps, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
     const { client } = useChatContext('MessageSimple');
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageOptions = DefaultMessageOptions, 
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, MessageOptions = DefaultMessageOptions, 
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
-    MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
+    MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
-    if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
+    if (isDateSeparatorMessage(message)) {
         return null;
     }
     if (message.deleted_at || message.type === 'deleted') {
         return React.createElement(MessageDeleted, { message: message });
     }
+    if (isMessageBlocked(message)) {
+        return React.createElement(MessageBlocked, null);
+    }
     const showMetadata = !groupedByUser || endOfGroup;
     const showReplyCountButton = !threadList && !!message.reply_count;
-    const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
+    const allowRetry = message.status === 'failed' && message.error?.status !== 403;
     const isBounced = isMessageBounced(message);
     const isEdited = isMessageEdited(message) && !isAIGenerated;
     let handleClick = undefined;
@@ -64,7 +67,7 @@ const MessageSimpleWithContext = (props) => {
         'str-chat__message--highlighted': highlighted,
         'str-chat__message--pinned pinned-message': message.pinned,
         'str-chat__message--with-reactions': hasReactions,
-        'str-chat__message-send-can-be-retried': message?.status === 'failed' && message?.errorStatusCode !== 403,
+        'str-chat__message-send-can-be-retried': message?.status === 'failed' && message?.error?.status !== 403,
         'str-chat__message-with-thread-link': showReplyCountButton,
         'str-chat__virtual-message__wrapper--end': endOfGroup,
         'str-chat__virtual-message__wrapper--first': firstOfGroup,
@@ -72,8 +75,7 @@ const MessageSimpleWithContext = (props) => {
     });
     const poll = message.poll_id && client.polls.fromState(message.poll_id);
     return (React.createElement(React.Fragment, null,
-        editing && (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: clearEditingState, open: editing },
-            React.createElement(MessageInput, { clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message, ...additionalMessageInputProps }))),
+        editing && (React.createElement(EditMessageModal, { additionalMessageInputProps: additionalMessageInputProps })),
         isBounceDialogOpen && (React.createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt, onClose: () => setIsBounceDialogOpen(false), open: isBounceDialogOpen })),
         React.createElement("div", { className: rootClassName, key: message.id },
             PinIndicator && React.createElement(PinIndicator, null),

package/dist/components/Message/MessageStatus.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { TooltipUsernameMapper } from './utils';
-import { AvatarProps } from '../Avatar';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { TooltipUsernameMapper } from './utils';
+import type { AvatarProps } from '../Avatar';
 export type MessageStatusProps = {
     Avatar?: React.ComponentType<AvatarProps>;
     MessageDeliveredStatus?: React.ComponentType;
@@ -10,4 +9,4 @@ export type MessageStatusProps = {
     messageType?: string;
     tooltipUserNameMapper?: TooltipUsernameMapper;
 };
-export declare const MessageStatus: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageStatusProps) => React.JSX.Element | null;
+export declare const MessageStatus: (props: MessageStatusProps) => React.JSX.Element | null;