stream-chat-react 12.15.0 → 13.0.0-rc.2

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

@@ -1,9 +1,8 @@
 import type { TFunction } from 'i18next';
-import type { MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
+import type { LocalMessage, MessageResponse, Mute, StreamChat, UserResponse } from 'stream-chat';
 import type { PinPermissions } from './hooks';
 import type { MessageProps } from './types';
-import type { ComponentContextValue, CustomMessageActions, MessageContextValue, StreamMessage } from '../../context';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ComponentContextValue, CustomMessageActions, MessageContextValue } from '../../context';
 /**
  * Following function validates a function which returns notification message.
  * It validates if the first parameter is function and also if return value of function is string or no.
@@ -12,7 +11,7 @@ export declare const validateAndGetMessage: <T extends unknown[]>(func: (...args
 /**
  * Tell if the owner of the current message is muted
  */
-export declare const isUserMuted: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, mutes?: Mute<StreamChatGenerics>[]) => boolean;
+export declare const isUserMuted: (message: LocalMessage, mutes?: Mute[]) => boolean;
 export declare const MESSAGE_ACTIONS: {
     delete: string;
     edit: string;
@@ -43,30 +42,30 @@ export declare const ACTIONS_NOT_WORKING_IN_THREAD: string[];
  * @deprecated use `shouldRenderMessageActions` instead
  */
 export declare const showMessageActionsBox: (actions: MessageActionsArray<string>, inThread?: boolean | undefined) => boolean;
-export declare const shouldRenderMessageActions: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }: {
+export declare const shouldRenderMessageActions: ({ customMessageActions, CustomMessageActionsList, inThread, messageActions, }: {
     messageActions: MessageActionsArray;
-    customMessageActions?: CustomMessageActions<SCG>;
-    CustomMessageActionsList?: ComponentContextValue<SCG>['CustomMessageActionsList'];
+    customMessageActions?: CustomMessageActions;
+    CustomMessageActionsList?: ComponentContextValue['CustomMessageActionsList'];
     inThread?: boolean;
 }) => boolean;
-export declare const areMessagePropsEqual: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(prevProps: MessageProps<StreamChatGenerics> & {
-    mutes?: Mute<StreamChatGenerics>[];
+export declare const areMessagePropsEqual: (prevProps: MessageProps & {
+    mutes?: Mute[];
     showDetailedReactions?: boolean;
-}, nextProps: MessageProps<StreamChatGenerics> & {
-    mutes?: Mute<StreamChatGenerics>[];
+}, nextProps: MessageProps & {
+    mutes?: Mute[];
     showDetailedReactions?: boolean;
 }) => boolean;
-export declare const areMessageUIPropsEqual: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(prevProps: MessageContextValue<StreamChatGenerics> & {
+export declare const areMessageUIPropsEqual: (prevProps: MessageContextValue & {
     showDetailedReactions?: boolean;
-}, nextProps: MessageContextValue<StreamChatGenerics> & {
+}, nextProps: MessageContextValue & {
     showDetailedReactions?: boolean;
 }) => boolean;
-export declare const messageHasReactions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>) => boolean;
-export declare const messageHasAttachments: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>) => boolean;
-export declare const getImages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: MessageResponse<StreamChatGenerics>) => import("stream-chat").Attachment<StreamChatGenerics>[];
-export declare const getNonImageAttachments: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: MessageResponse<StreamChatGenerics>) => import("stream-chat").Attachment<StreamChatGenerics>[];
+export declare const messageHasReactions: (message?: LocalMessage) => boolean;
+export declare const messageHasAttachments: (message?: LocalMessage) => boolean;
+export declare const getImages: (message?: MessageResponse) => import("stream-chat").Attachment[];
+export declare const getNonImageAttachments: (message?: MessageResponse) => import("stream-chat").Attachment[];
 export interface TooltipUsernameMapper {
-    <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(user: UserResponse<StreamChatGenerics>): string;
+    (user: UserResponse): string;
 }
 /**
  * Default Tooltip Username mapper implementation.
@@ -74,8 +73,8 @@ export interface TooltipUsernameMapper {
  * @param user the user.
  */
 export declare const mapToUserNameOrId: TooltipUsernameMapper;
-export declare const getReadByTooltipText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(users: UserResponse<StreamChatGenerics>[], t: TFunction, client: StreamChat<StreamChatGenerics>, tooltipUserNameMapper: TooltipUsernameMapper) => string;
+export declare const getReadByTooltipText: (users: UserResponse[], t: TFunction, client: StreamChat, tooltipUserNameMapper: TooltipUsernameMapper) => string;
 export declare const isOnlyEmojis: (text?: string) => boolean;
-export declare const isMessageBounced: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'type' | 'moderation' | 'moderation_details'>) => boolean;
-export declare const isMessageBlocked: (message: Pick<StreamMessage, 'type' | 'moderation' | 'moderation_details'>) => boolean;
-export declare const isMessageEdited: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'>) => boolean;
+export declare const isMessageBounced: (message: Pick<LocalMessage, 'type' | 'moderation' | 'moderation_details'>) => boolean;
+export declare const isMessageBlocked: (message: Pick<LocalMessage, 'type' | 'moderation' | 'moderation_details'>) => boolean;
+export declare const isMessageEdited: (message: Pick<LocalMessage, 'message_text_updated_at'>) => boolean;

package/dist/components/Message/utils.js

@@ -170,7 +170,7 @@ export const shouldRenderMessageActions = ({ customMessageActions, CustomMessage
     return true;
 };
 function areMessagesEqual(prevMessage, nextMessage) {
-    return (prevMessage.deleted_at === nextMessage.deleted_at &&
+    const areBaseMessagesEqual = (prevMessage, nextMessage) => prevMessage.deleted_at === nextMessage.deleted_at &&
         prevMessage.latest_reactions?.length === nextMessage.latest_reactions?.length &&
         prevMessage.own_reactions?.length === nextMessage.own_reactions?.length &&
         prevMessage.pinned === nextMessage.pinned &&
@@ -179,10 +179,11 @@ function areMessagesEqual(prevMessage, nextMessage) {
         prevMessage.text === nextMessage.text &&
         prevMessage.type === nextMessage.type &&
         prevMessage.updated_at === nextMessage.updated_at &&
-        prevMessage.user?.updated_at === nextMessage.user?.updated_at &&
+        prevMessage.user?.updated_at === nextMessage.user?.updated_at;
+    return (areBaseMessagesEqual(prevMessage, nextMessage) &&
         Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) &&
-        (!prevMessage.quoted_message ||
-            areMessagesEqual(prevMessage.quoted_message, nextMessage.quoted_message)));
+        ((!prevMessage.quoted_message && !nextMessage.quoted_message) ||
+            areBaseMessagesEqual(prevMessage.quoted_message, nextMessage.quoted_message)));
 }
 export const areMessagePropsEqual = (prevProps, nextProps) => {
     const { message: prevMessage, Message: prevMessageUI } = prevProps;

package/dist/components/MessageActions/CustomMessageActionsList.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { CustomMessageActions } from '../../context/MessageContext';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type CustomMessageActionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    message: StreamMessage<StreamChatGenerics>;
-    customMessageActions?: CustomMessageActions<StreamChatGenerics>;
+import type { LocalMessage } from 'stream-chat';
+import type { CustomMessageActions } from '../../context/MessageContext';
+export type CustomMessageActionsListProps = {
+    message: LocalMessage;
+    customMessageActions?: CustomMessageActions;
 };
-export declare const CustomMessageActionsList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: CustomMessageActionsListProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const CustomMessageActionsList: (props: CustomMessageActionsListProps) => React.JSX.Element | null;

package/dist/components/MessageActions/MessageActions.d.ts

@@ -1,14 +1,15 @@
-import React, { PropsWithChildren } from 'react';
-import { MessageContextValue } from '../../context/MessageContext';
-import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { MessageContextValue } from '../../context/MessageContext';
+import type { IconProps } from '../../types/types';
 type MessageContextPropsToPick = 'getMessageActions' | 'handleDelete' | 'handleFlag' | 'handleMarkUnread' | 'handleMute' | 'handlePin' | 'message';
-export type MessageActionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, MessageContextPropsToPick>> & {
+export type MessageActionsProps = Partial<Pick<MessageContextValue, MessageContextPropsToPick>> & {
     ActionsIcon?: React.ComponentType<IconProps>;
     customWrapperClass?: string;
     inline?: boolean;
     mine?: () => boolean;
 };
-export declare const MessageActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageActionsProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const MessageActions: (props: MessageActionsProps) => React.JSX.Element | null;
 export type MessageActionsWrapperProps = {
     customWrapperClass?: string;
     inline?: boolean;

package/dist/components/MessageActions/MessageActions.js

@@ -36,7 +36,7 @@ export const MessageActions = (props) => {
     if (!renderMessageActions)
         return null;
     return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, toggleOpen: dialog?.toggle },
-        React.createElement(DialogAnchor, { id: dialogId, placement: isMine ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonRef.current, trapFocus: true },
+        React.createElement(DialogAnchor, { id: dialogId, placement: isMine ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonRef.current, tabIndex: -1, trapFocus: true },
             React.createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: dialogIsOpen })),
         React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: actionsBoxButtonRef },
             React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));

package/dist/components/MessageActions/MessageActionsBox.d.ts

@@ -1,8 +1,8 @@
-import React, { ComponentProps } from 'react';
-import { MessageContextValue } from '../../context';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ComponentProps } from 'react';
+import React from 'react';
+import type { MessageContextValue } from '../../context';
 type PropsDrilledToMessageActionsBox = 'getMessageActions' | 'handleDelete' | 'handleEdit' | 'handleMarkUnread' | 'handleFlag' | 'handleMute' | 'handlePin';
-export type MessageActionsBoxProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, PropsDrilledToMessageActionsBox> & {
+export type MessageActionsBoxProps = Pick<MessageContextValue, PropsDrilledToMessageActionsBox> & {
     isUserMuted: () => boolean;
     mine: boolean;
     open: boolean;
@@ -10,5 +10,5 @@ export type MessageActionsBoxProps<StreamChatGenerics extends DefaultStreamChatG
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
  */
-export declare const MessageActionsBox: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageActionsBoxProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const MessageActionsBox: (props: MessageActionsBoxProps) => React.JSX.Element;
 export {};

package/dist/components/MessageActions/MessageActionsBox.js

@@ -1,19 +1,20 @@
 import clsx from 'clsx';
 import React from 'react';
 import { MESSAGE_ACTIONS } from '../Message/utils';
-import { useChannelActionContext, useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
+import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
+import { useMessageComposer } from '../MessageInput';
 const UnMemoizedMessageActionsBox = (props) => {
     const { className, getMessageActions, handleDelete, handleEdit, handleFlag, handleMarkUnread, handleMute, handlePin, isUserMuted, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mine, open, ...restDivProps } = props;
     const { CustomMessageActionsList = DefaultCustomMessageActionsList } = useComponentContext('MessageActionsBox');
-    const { setQuotedMessage } = useChannelActionContext('MessageActionsBox');
     const { customMessageActions, message, threadList } = useMessageContext('MessageActionsBox');
     const { t } = useTranslationContext('MessageActionsBox');
+    const messageComposer = useMessageComposer();
     const messageActions = getMessageActions();
     const handleQuote = () => {
-        setQuotedMessage(message);
+        messageComposer.setQuotedMessage(message);
         const elements = message.parent_id
             ? document.querySelectorAll('.str-chat__thread .str-chat__textarea__textarea')
             : document.getElementsByClassName('str-chat__textarea__textarea');

package/dist/components/MessageActions/hooks/useMessageActionsBoxPopper.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Placement } from '@popperjs/core';
+import type { Placement } from '@popperjs/core';
 export interface MessageActionsBoxPopperOptions {
     open: boolean;
     placement: Placement;

package/dist/components/MessageBounce/MessageBounceModal.d.ts

@@ -1,6 +1,7 @@
-import React, { ComponentType, PropsWithChildren } from 'react';
-import { ModalProps } from '../Modal';
-import { MessageBouncePromptProps } from './MessageBouncePrompt';
+import type { ComponentType, PropsWithChildren } from 'react';
+import React from 'react';
+import type { ModalProps } from '../Modal';
+import type { MessageBouncePromptProps } from './MessageBouncePrompt';
 export type MessageBounceModalProps = PropsWithChildren<ModalProps & {
     MessageBouncePrompt: ComponentType<MessageBouncePromptProps>;
 }>;

package/dist/components/MessageBounce/MessageBouncePrompt.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ModalProps } from '../Modal';
 export type MessageBouncePromptProps = PropsWithChildren<Pick<ModalProps, 'onClose'>>;
-export declare function MessageBouncePrompt<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, onClose }: MessageBouncePromptProps): React.JSX.Element;
+export declare function MessageBouncePrompt({ children, onClose }: MessageBouncePromptProps): React.JSX.Element;

package/dist/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.d.ts

@@ -1,15 +1,15 @@
-import React, { ComponentType } from 'react';
-import { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
-import { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
-import { FileAttachmentPreviewProps } from './FileAttachmentPreview';
-import { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type AttachmentPreviewListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
+import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
+import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
+import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
+export type AttachmentPreviewListProps = {
     AudioAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
     FileAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
-    ImageAttachmentPreview?: ComponentType<ImageAttachmentPreviewProps<StreamChatGenerics>>;
-    UnsupportedAttachmentPreview?: ComponentType<UnsupportedAttachmentPreviewProps<StreamChatGenerics>>;
+    ImageAttachmentPreview?: ComponentType<ImageAttachmentPreviewProps>;
+    UnsupportedAttachmentPreview?: ComponentType<UnsupportedAttachmentPreviewProps>;
     VideoAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
-    VoiceRecordingPreview?: ComponentType<VoiceRecordingPreviewProps<StreamChatGenerics>>;
+    VoiceRecordingPreview?: ComponentType<VoiceRecordingPreviewProps>;
 };
-export declare const AttachmentPreviewList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ AudioAttachmentPreview, FileAttachmentPreview, ImageAttachmentPreview, UnsupportedAttachmentPreview, VideoAttachmentPreview, VoiceRecordingPreview, }: AttachmentPreviewListProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const AttachmentPreviewList: ({ AudioAttachmentPreview, FileAttachmentPreview, ImageAttachmentPreview, UnsupportedAttachmentPreview, VideoAttachmentPreview, VoiceRecordingPreview, }: AttachmentPreviewListProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.js

@@ -1,33 +1,36 @@
 import React from 'react';
-import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview, } from './UnsupportedAttachmentPreview';
-import { VoiceRecordingPreview as DefaultVoiceRecordingPreview, } from './VoiceRecordingPreview';
-import { FileAttachmentPreview as DefaultFilePreview, } from './FileAttachmentPreview';
-import { ImageAttachmentPreview as DefaultImagePreview, } from './ImageAttachmentPreview';
-import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalMediaAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from '../../Attachment';
-import { useMessageInputContext } from '../../../context';
+import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalVideoAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from 'stream-chat';
+import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
+import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
+import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
+import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
+import { useAttachmentManagerState, useMessageComposer } from '../hooks';
 export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
-    const { attachments, removeAttachments, uploadAttachment } = useMessageInputContext('AttachmentPreviewList');
+    const messageComposer = useMessageComposer();
+    const { attachments } = useAttachmentManagerState();
+    if (!attachments.length)
+        return null;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-list' },
         React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' }, attachments.map((attachment) => {
             if (isScrapedContent(attachment))
                 return null;
             if (isLocalVoiceRecordingAttachment(attachment)) {
-                return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+                return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
             else if (isLocalAudioAttachment(attachment)) {
-                return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+                return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
-            else if (isLocalMediaAttachment(attachment)) {
-                return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            else if (isLocalVideoAttachment(attachment)) {
+                return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
             else if (isLocalImageAttachment(attachment)) {
-                return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: removeAttachments }));
+                return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
             else if (isLocalFileAttachment(attachment)) {
-                return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+                return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
             else if (isLocalAttachment(attachment)) {
-                return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id, removeAttachments: removeAttachments }));
+                return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: messageComposer.attachmentManager.uploadAttachment, key: attachment.localMetadata.id, removeAttachments: messageComposer.attachmentManager.removeAttachments }));
             }
             return null;
         }))));

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.d.ts

@@ -1,13 +1,5 @@
 import React from 'react';
-import type { AttachmentPreviewProps } from './types';
-import { LocalAttachmentCast, LocalAttachmentUploadMetadata } from '../types';
-import type { DefaultStreamChatGenerics } from '../../../types';
-type FileLikeAttachment = {
-    asset_url?: string;
-    file_size?: number;
-    mime_type?: string;
-    title?: string;
-};
-export type FileAttachmentPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = AttachmentPreviewProps<LocalAttachmentCast<FileLikeAttachment, LocalAttachmentUploadMetadata & CustomLocalMetadata>, StreamChatGenerics>;
-export declare const FileAttachmentPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, handleRetry, removeAttachments, }: FileAttachmentPreviewProps<StreamChatGenerics>) => React.JSX.Element;
-export {};
+import type { LocalAudioAttachment, LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
+export type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> = UploadAttachmentPreviewProps<LocalFileAttachment<CustomLocalMetadata> | LocalAudioAttachment<CustomLocalMetadata> | LocalVideoAttachment<CustomLocalMetadata>>;
+export declare const FileAttachmentPreview: ({ attachment, handleRetry, removeAttachments, }: FileAttachmentPreviewProps) => React.JSX.Element;

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.js

@@ -1,21 +1,24 @@
 import React from 'react';
+import { useTranslationContext } from '../../../context';
 import { FileIcon } from '../../ReactFileUtilities';
 import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
-import { useTranslationContext } from '../../../context';
 export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments, }) => {
     const { t } = useTranslationContext('FilePreview');
+    const uploadState = attachment.localMetadata?.uploadState;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
                 removeAttachments([attachment.localMetadata?.id]) },
             React.createElement(CloseIcon, null)),
-        attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+        ['blocked', 'failed'].includes(uploadState) && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => {
+                handleRetry(attachment);
+            } },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-file-end' },
             React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
-            attachment.localMetadata?.uploadState === 'finished' &&
+            (typeof uploadState === 'undefined' || uploadState === 'finished') &&
                 !!attachment.asset_url && (React.createElement("a", { "aria-label": t('aria/Download attachment'), className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank', title: t('Download attachment {{ name }}', { name: attachment.title }) },
                 React.createElement(DownloadIcon, null))),
-            attachment.localMetadata?.uploadState === 'uploading' && (React.createElement(LoadingIndicatorIcon, { size: 17 })))));
+            uploadState === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 }))));
 };

package/dist/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { AttachmentPreviewProps } from './types';
-import type { LocalImageAttachment } from '../types';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type ImageAttachmentPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = AttachmentPreviewProps<LocalImageAttachment<StreamChatGenerics, CustomLocalMetadata>, StreamChatGenerics>;
-export declare const ImageAttachmentPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, handleRetry, removeAttachments, }: ImageAttachmentPreviewProps<StreamChatGenerics>) => React.JSX.Element;
+import type { LocalImageAttachment } from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
+export type ImageAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> = UploadAttachmentPreviewProps<LocalImageAttachment<CustomLocalMetadata>>;
+export declare const ImageAttachmentPreview: ({ attachment, handleRetry, removeAttachments, }: ImageAttachmentPreviewProps) => React.JSX.Element;

package/dist/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import React, { useCallback, useState } from 'react';
+import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { BaseImage as DefaultBaseImage } from '../../Gallery';
 import { useComponentContext, useTranslationContext } from '../../../context';
 export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachments, }) => {
@@ -15,7 +15,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
         }), "data-testid": 'attachment-preview-image' },
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]) },
             React.createElement(CloseIcon, null)),
-        uploadState === 'failed' && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+        ['blocked', 'failed'].includes(uploadState) && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         uploadState === 'uploading' && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
             React.createElement(LoadingIndicatorIcon, { size: 17 }))),

package/dist/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import type { AttachmentPreviewProps } from './types';
-import type { AnyLocalAttachment } from '../types';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type UnsupportedAttachmentPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = AttachmentPreviewProps<AnyLocalAttachment<StreamChatGenerics, CustomLocalMetadata>, StreamChatGenerics>;
-export declare const UnsupportedAttachmentPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, handleRetry, removeAttachments, }: UnsupportedAttachmentPreviewProps<StreamChatGenerics>) => React.JSX.Element;
+import type { AnyLocalAttachment, LocalUploadAttachment } from 'stream-chat';
+export type UnsupportedAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> = {
+    attachment: AnyLocalAttachment<CustomLocalMetadata>;
+    handleRetry: (attachment: LocalUploadAttachment) => void | Promise<LocalUploadAttachment | undefined>;
+    removeAttachments: (ids: string[]) => void;
+};
+export declare const UnsupportedAttachmentPreview: ({ attachment, handleRetry, removeAttachments, }: UnsupportedAttachmentPreviewProps) => React.JSX.Element;

package/dist/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isLocalUploadAttachment } from 'stream-chat';
 import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
 import { useTranslationContext } from '../../../context';
@@ -8,10 +9,12 @@ export const UnsupportedAttachmentPreview = ({ attachment, handleRetry, removeAt
     return (React.createElement("div", { className: 'str-chat__attachment-preview-unsupported', "data-testid": 'attachment-preview-unknown' },
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
                 removeAttachments([attachment.localMetadata?.id]) },
             React.createElement(CloseIcon, null)),
-        attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+        isLocalUploadAttachment(attachment) &&
+            ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
+            !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
             React.createElement("div", { className: 'str-chat__attachment-preview-title', title: title }, title),

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { AttachmentPreviewProps } from './types';
-import type { LocalVoiceRecordingAttachment } from '../types';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type VoiceRecordingPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = AttachmentPreviewProps<LocalVoiceRecordingAttachment<StreamChatGenerics, CustomLocalMetadata>, StreamChatGenerics>;
-export declare const VoiceRecordingPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps<StreamChatGenerics>) => React.JSX.Element;
+import type { LocalVoiceRecordingAttachment } from 'stream-chat';
+import type { UploadAttachmentPreviewProps } from './types';
+export type VoiceRecordingPreviewProps<CustomLocalMetadata = Record<string, unknown>> = UploadAttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;
+export declare const VoiceRecordingPreview: ({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps) => React.JSX.Element;

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.js

@@ -4,7 +4,9 @@ import { RecordingTimer } from '../../MediaRecorder';
 import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
 import { useAudioController } from '../../Attachment/hooks/useAudioController';
+import { useTranslationContext } from '../../../context';
 export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachments, }) => {
+    const { t } = useTranslationContext();
     const { audioRef, isPlaying, secondsElapsed, togglePlay } = useAudioController({
         mimeType: attachment.mime_type,
     });
@@ -12,9 +14,10 @@ export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachmen
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { "data-testid": 'audio-source', src: attachment.asset_url, type: attachment.mime_type })),
         React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]) },
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]) },
             React.createElement(CloseIcon, null)),
-        attachment.localMetadata?.uploadState === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
+        ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
+            !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
             React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),

package/dist/components/MessageInput/AttachmentPreviewList/index.d.ts

@@ -1,6 +1,6 @@
 export * from './AttachmentPreviewList';
 export type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
 export type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
-export type { AttachmentPreviewProps } from './types';
+export type { UploadAttachmentPreviewProps as AttachmentPreviewProps } from './types';
 export type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
 export type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';

package/dist/components/MessageInput/AttachmentPreviewList/types.d.ts

@@ -1,7 +1,6 @@
-import { LocalAttachment } from '../types';
-import type { DefaultStreamChatGenerics } from '../../../types';
-export type AttachmentPreviewProps<A extends LocalAttachment, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { LocalUploadAttachment } from 'stream-chat';
+export type UploadAttachmentPreviewProps<A extends LocalUploadAttachment> = {
     attachment: A;
-    handleRetry: (attachment: LocalAttachment<StreamChatGenerics>) => void | Promise<LocalAttachment<StreamChatGenerics> | undefined>;
+    handleRetry: (attachment: LocalUploadAttachment) => void | Promise<LocalUploadAttachment | undefined>;
     removeAttachments: (ids: string[]) => void;
 };

package/dist/components/MessageInput/AttachmentSelector.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
 export declare const SimpleAttachmentSelector: () => React.JSX.Element;
 export type AttachmentSelectorModalContentProps = {
     close: () => void;
@@ -22,4 +21,4 @@ export type AttachmentSelectorProps = {
     attachmentSelectorActionSet?: AttachmentSelectorAction[];
     getModalPortalDestination?: () => HTMLElement | null;
 };
-export declare const AttachmentSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachmentSelectorActionSet, getModalPortalDestination, }: AttachmentSelectorProps) => React.JSX.Element | null;
+export declare const AttachmentSelector: ({ attachmentSelectorActionSet, getModalPortalDestination, }: AttachmentSelectorProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentSelector.js

@@ -1,6 +1,7 @@
 import { nanoid } from 'nanoid';
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
+import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
@@ -47,7 +48,8 @@ export const DefaultAttachmentSelectorComponents = {
     File({ closeMenu }) {
         const { t } = useTranslationContext();
         const { fileInput } = useAttachmentSelectorContext();
-        return (React.createElement(DialogMenuButton, { className: 'str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button', onClick: () => {
+        const { isUploadEnabled } = useAttachmentManagerState();
+        return (React.createElement(DialogMenuButton, { className: 'str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button', disabled: !isUploadEnabled, onClick: () => {
                 if (fileInput)
                     fileInput.click();
                 closeMenu();
@@ -118,7 +120,7 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
             channelCapabilities['upload-file'] && React.createElement(UploadFileInput, { ref: setFileInput }),
             React.createElement("button", { "aria-expanded": menuDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Attachment Selector'), className: 'str-chat__attachment-selector__menu-button', "data-testid": 'invoke-attachment-selector-button', onClick: () => menuDialog?.toggle(), ref: menuButtonRef },
                 React.createElement(AttachmentSelectorMenuInitButtonIcon, null)),
-            React.createElement(DialogAnchor, { id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, trapFocus: true },
+            React.createElement(DialogAnchor, { id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
                 React.createElement("div", { className: 'str-chat__attachment-selector-actions-menu str-chat__dialog-menu', "data-testid": 'attachment-selector-actions-menu' }, actions.map(({ ActionButton, type }) => (React.createElement(ActionButton, { closeMenu: menuDialog.close, key: `attachment-selector-item-${type}`, openModalForAction: openModal }))))),
             React.createElement(Portal, { getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination, isOpen: modalIsOpen },
                 React.createElement(Modal, { className: 'str-chat__create-poll-modal', onClose: closeModal, open: modalIsOpen }, ModalContent && React.createElement(ModalContent, { close: closeModal }))))));

package/dist/components/MessageInput/EditMessageForm.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
-export declare const EditMessageForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>() => React.JSX.Element;
+import type { MessageUIComponentProps } from '../Message';
+export declare const EditMessageForm: () => React.JSX.Element;
+export declare const EditMessageModal: ({ additionalMessageInputProps, }: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => React.JSX.Element;