stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.10

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { TimestampFormatterOptions } from '../../i18n/utils';
-export declare const defaultTimestampFormat = "h:mmA";
 export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     customClass?: string;
     message?: StreamMessage<StreamChatGenerics>;

package/dist/components/Message/MessageTimestamp.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useMessageContext } from '../../context/MessageContext';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { useComponentContext } from '../../context';
-export const defaultTimestampFormat = 'h:mmA';
 const UnMemoizedMessageTimestamp = (props) => {
     const { message: propMessage, ...timestampProps } = props;
     const { message: contextMessage } = useMessageContext('MessageTimestamp');

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export interface TimestampProps extends TimestampFormatterOptions {
     customClass?: string;
     timestamp?: Date | string;
 }
-export declare const defaultTimestampFormat = "h:mmA";
 export declare function Timestamp(props: TimestampProps): React.JSX.Element | null;

package/dist/components/Message/Timestamp.js

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import { useMessageContext } from '../../context/MessageContext';
-import { isDate, useTranslationContext } from '../../context/TranslationContext';
-import { getDateString } from '../../i18n/utils';
-export const defaultTimestampFormat = 'h:mmA';
+import { useTranslationContext } from '../../context/TranslationContext';
+import { getDateString, isDate } from '../../i18n/utils';
 export function Timestamp(props) {
-    const { calendar, calendarFormats, customClass, format = defaultTimestampFormat, timestamp, } = props;
+    const { calendar, calendarFormats, customClass, format, timestamp } = props;
     const { formatDate } = useMessageContext('MessageTimestamp');
     const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');
     const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
@@ -16,7 +15,7 @@ export function Timestamp(props) {
         messageCreatedAt: normalizedTimestamp,
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/Timestamp',
+        timestampTranslationKey: 'timestamp/MessageTimestamp',
     }), [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
     if (!when) {
         return null;

package/dist/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.d.ts

@@ -1,4 +1,4 @@
 import type { Nodes } from 'hast-util-find-and-replace/lib';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types';
 export declare const mentionsMarkdownPlugin: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(mentioned_users: UserResponse<StreamChatGenerics>[]) => () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/htmlToTextPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const htmlToTextPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.d.ts

@@ -1,2 +1,2 @@
-import type { Nodes } from 'react-markdown/lib';
+import type { Nodes } from 'hast-util-find-and-replace/lib';
 export declare const keepLineBreaksPlugin: () => (tree: Nodes) => void;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js

@@ -1,17 +1,13 @@
 import { visit } from 'unist-util-visit';
 import { u } from 'unist-builder';
 const visitor = (node, index, parent) => {
-    if (typeof index === 'undefined' || index === 0)
-        return;
-    if (typeof parent === 'undefined')
-        return;
-    if (!node.position)
+    if (!(index && parent && node.position))
         return;
     const prevSibling = parent.children.at(index - 1);
     if (!prevSibling?.position)
         return;
     if (node.position.start.line === prevSibling.position.start.line)
-        return false;
+        return;
     const ownStartLine = node.position.start.line;
     const prevEndLine = prevSibling.position.end.line;
     // the -1 is adjustment for the single line break into which multiple line breaks are converted

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

@@ -1,8 +1,8 @@
 import React, { ComponentType } from 'react';
 import { Options } from 'react-markdown';
-import { MentionProps } from './componentRenderers';
-import type { PluggableList } from 'react-markdown/lib';
+import type { PluggableList } from 'react-markdown/lib/react-markdown';
 import type { UserResponse } from 'stream-chat';
+import { MentionProps } from './componentRenderers';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export type RenderTextPluginConfigurator = (defaultPlugins: PluggableList) => PluggableList;
 export declare const defaultAllowedTagNames: Array<keyof JSX.IntrinsicElements | 'emoji' | 'mention'>;

package/dist/components/Message/renderText/renderText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
+import ReactMarkdown, { uriTransformer } from 'react-markdown';
 import { find } from 'linkifyjs';
 import uniqBy from 'lodash.uniqby';
 import remarkGfm from 'remark-gfm';
@@ -7,6 +7,7 @@ import { Anchor, Emoji, Mention } from './componentRenderers';
 import { detectHttp, escapeRegExp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
 import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
+import { ErrorBoundary } from '../../UtilityComponents';
 export const defaultAllowedTagNames = [
     'html',
     'text',
@@ -42,7 +43,7 @@ function encodeDecode(url) {
         return url;
     }
 }
-const urlTransform = (uri) => (uri.startsWith('app://') ? uri : defaultUrlTransform(uri));
+const urlTransform = (uri) => (uri.startsWith('app://') ? uri : uriTransformer(uri));
 const getPluginsForward = (plugins) => plugins;
 export const markDownRenderers = {
     a: Anchor,
@@ -106,8 +107,9 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
     if (mentionedUsers?.length) {
         rehypePlugins.push(mentionsMarkdownPlugin(mentionedUsers));
     }
-    return (React.createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: {
-            ...markDownRenderers,
-            ...customMarkDownRenderers,
-        }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, unwrapDisallowed: true, urlTransform: urlTransform }, newText));
+    return (React.createElement(ErrorBoundary, { fallback: React.createElement(React.Fragment, null, text) },
+        React.createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: {
+                ...markDownRenderers,
+                ...customMarkDownRenderers,
+            }, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, transformLinkUri: urlTransform, unwrapDisallowed: true }, newText)));
 };

package/dist/components/Message/utils.js

@@ -212,6 +212,8 @@ export const areMessageUIPropsEqual = (prevProps, nextProps) => {
         return false;
     if (prevProps.readBy?.length !== nextProps.readBy?.length)
         return false;
+    if (prevProps.groupStyles !== nextProps.groupStyles)
+        return false;
     if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {
         return false;
     }

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

@@ -2,37 +2,33 @@ import React from 'react';
 import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview, } from './UnsupportedAttachmentPreview';
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview, } from './VoiceRecordingPreview';
 import { FileAttachmentPreview as DefaultFilePreview, } from './FileAttachmentPreview';
-import { FileUploadPreviewAdapter, ImageUploadPreviewAdapter } from './UploadPreviewItem';
 import { ImageAttachmentPreview as DefaultImagePreview, } from './ImageAttachmentPreview';
 import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalMediaAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, } from '../../Attachment';
 import { useMessageInputContext } from '../../../context';
 export const AttachmentPreviewList = ({ AudioAttachmentPreview = DefaultFilePreview, FileAttachmentPreview = DefaultFilePreview, ImageAttachmentPreview = DefaultImagePreview, UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview, VideoAttachmentPreview = DefaultFilePreview, VoiceRecordingPreview = DefaultVoiceRecordingPreview, }) => {
-    const { attachments, fileOrder, imageOrder, removeAttachments, uploadAttachment, } = useMessageInputContext('AttachmentPreviewList');
+    const { attachments, removeAttachments, uploadAttachment, } = useMessageInputContext('AttachmentPreviewList');
     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 }));
-                }
-                else if (isLocalAudioAttachment(attachment)) {
-                    return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalMediaAttachment(attachment)) {
-                    return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalImageAttachment(attachment)) {
-                    return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalFileAttachment(attachment)) {
-                    return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
-                }
-                else if (isLocalAttachment(attachment)) {
-                    return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id, removeAttachments: removeAttachments }));
-                }
+        React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' }, attachments.map((attachment) => {
+            if (isScrapedContent(attachment))
                 return null;
-            }),
-            imageOrder.map((id) => (React.createElement(ImageUploadPreviewAdapter, { id: id, key: id, Preview: ImageAttachmentPreview }))),
-            fileOrder.map((id) => (React.createElement(FileUploadPreviewAdapter, { id: id, key: id, Preview: FileAttachmentPreview }))))));
+            if (isLocalVoiceRecordingAttachment(attachment)) {
+                return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalAudioAttachment(attachment)) {
+                return (React.createElement(AudioAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalMediaAttachment(attachment)) {
+                return (React.createElement(VideoAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalImageAttachment(attachment)) {
+                return (React.createElement(ImageAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.image_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalFileAttachment(attachment)) {
+                return (React.createElement(FileAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id || attachment.asset_url, removeAttachments: removeAttachments }));
+            }
+            else if (isLocalAttachment(attachment)) {
+                return (React.createElement(UnsupportedAttachmentPreview, { attachment: attachment, handleRetry: uploadAttachment, key: attachment.localMetadata.id, removeAttachments: removeAttachments }));
+            }
+            return null;
+        }))));
 };

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

@@ -4,6 +4,7 @@ import { LocalAttachmentCast, LocalAttachmentUploadMetadata } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types';
 type FileLikeAttachment = {
     asset_url?: string;
+    file_size?: number;
     mime_type?: string;
     title?: string;
 };

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

@@ -13,7 +13,7 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
             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' && !!attachment.asset_url && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
+            attachment.localMetadata?.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 })))));
 };

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

@@ -9,6 +9,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
     const [previewError, setPreviewError] = useState(false);
     const { id, uploadState } = attachment.localMetadata ?? {};
     const handleLoadError = useCallback(() => setPreviewError(true), []);
+    const assetUrl = attachment.image_url || attachment.localMetadata.previewUri;
     return (React.createElement("div", { className: clsx('str-chat__attachment-preview-image', {
             'str-chat__attachment-preview-image--error': previewError,
         }), "data-testid": 'attachment-preview-image' },
@@ -18,5 +19,5 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
             React.createElement(RetryIcon, null))),
         uploadState === 'uploading' && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
             React.createElement(LoadingIndicatorIcon, { size: 17 }))),
-        attachment.image_url && (React.createElement(BaseImage, { alt: attachment.title, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: attachment.image_url, title: attachment.title }))));
+        assetUrl && (React.createElement(BaseImage, { alt: attachment.fallback, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: assetUrl, title: attachment.fallback }))));
 };

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { StreamMessage } from '../../context/ChannelStateContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { Channel, Message, SendFileAPIResponse } from 'stream-chat';
+import type { BaseLocalAttachmentMetadata, LocalAttachmentUploadMetadata } from './types';
 import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { MessageToSend } from '../../context/ChannelActionContext';
 import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions, UnknownType } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
-import type { FileUpload, ImageUpload } from './types';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
 export type EmojiSearchIndexResult = {
     id: string;
@@ -39,15 +39,13 @@ export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGeneri
     /** If true, the suggestion list will not display and autocomplete @mentions. Default: false. */
     disableMentions?: boolean;
     /** Function to override the default file upload request */
-    doFileUploadRequest?: (file: FileUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
+    doFileUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Function to override the default image upload request */
-    doImageUploadRequest?: (file: ImageUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
+    doImageUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
     emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
     /** Custom error handler function to be called with a file/image upload fails */
-    errorHandler?: (error: Error, type: string, file: (FileUpload | ImageUpload)['file'] & {
-        id?: string;
-    }) => void;
+    errorHandler?: (error: Error, type: string, file: LocalAttachmentUploadMetadata['file'] & BaseLocalAttachmentMetadata) => void;
     /** If true, focuses the text input on component mount */
     focus?: boolean;
     /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */

package/dist/components/MessageInput/MessageInputFlat.js

@@ -20,7 +20,7 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, fileUploads, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, imageUploads, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
+    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
     const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, CooldownTimer = DefaultCooldownTimer, FileUploadIcon = DefaultUploadIcon, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
@@ -30,9 +30,7 @@ export const MessageInputFlat = () => {
         setShowRecordingPermissionDeniedNotification(false);
     }, []);
     const id = useMemo(() => nanoid(), []);
-    const failedAttachmentsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
-    const failedUploadsCount = useMemo(() => Object.values(fileUploads).filter((upload) => upload.state === 'failed').length +
-        Object.values(imageUploads).filter((upload) => upload.state === 'failed').length, [fileUploads, imageUploads]);
+    const failedUploadsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
     const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
         return mediaTypeMap;
@@ -89,15 +87,14 @@ export const MessageInputFlat = () => {
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
                     displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
                     isUploadEnabled &&
-                        !!(numberOfUploads + failedUploadsCount ||
-                            (attachments.length && attachments.length !== linkPreviews.size)) && React.createElement(AttachmentPreviewList, null),
+                        !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
                     React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
                         React.createElement(ChatAutoComplete, null),
                         EmojiPicker && React.createElement(EmojiPicker, null))),
                 !hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
                     React.createElement(SendButton, { disabled: !numberOfUploads &&
                             !text.length &&
-                            attachments.length - failedAttachmentsCount === 0, sendMessage: handleSubmit }),
+                            attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
                     recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
                             (!asyncMessagesMultiSendEnabled &&
                                 attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {

package/dist/components/MessageInput/hooks/useAttachments.d.ts

@@ -1,18 +1,14 @@
+import type { FileLike } from '../../ReactFileUtilities';
 import type { Attachment } from 'stream-chat';
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 import type { LocalAttachment } from '../types';
-import type { FileLike } from '../../ReactFileUtilities';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useAttachments: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>, state: MessageInputState<StreamChatGenerics>, dispatch: React.Dispatch<MessageInputReducerAction<StreamChatGenerics>>, textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>) => {
     maxFilesLeft: number;
     numberOfUploads: number;
     removeAttachments: (ids: string[]) => void;
-    removeFile: (id: string) => void;
-    removeImage: (id: string) => void;
     uploadAttachment: (att: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> | undefined>;
-    uploadFile: (id: string) => void;
-    uploadImage: (id: string) => Promise<void>;
     uploadNewFiles: (files: FileList | File[] | FileLike[]) => void;
     upsertAttachments: (attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => void;
 };

package/dist/components/MessageInput/hooks/useAttachments.js

@@ -1,11 +1,22 @@
 import { useCallback } from 'react';
 import { nanoid } from 'nanoid';
-import { useImageUploads } from './useImageUploads';
-import { useFileUploads } from './useFileUploads';
 import { checkUploadPermissions } from './utils';
-import { isLocalAttachment, isLocalImageAttachment, isUploadedImage } from '../../Attachment';
+import { isLocalAttachment, isLocalImageAttachment } from '../../Attachment';
+import { createFileFromBlobs, generateFileName, isBlobButNotFile } from '../../ReactFileUtilities';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useTranslationContext, } from '../../../context';
 const apiMaxNumberOfFiles = 10;
+// const isAudioFile = (file: FileLike) => file.type.includes('audio/');
+const isImageFile = (file) => file.type.startsWith('image/') && !file.type.endsWith('.photoshop'); // photoshop files begin with 'image/'
+// const isVideoFile = (file: FileLike) => file.type.includes('video/');
+const getAttachmentTypeFromMime = (mimeType) => {
+    if (mimeType.startsWith('image/') && !mimeType.endsWith('.photoshop'))
+        return 'image';
+    if (mimeType.includes('video/'))
+        return 'video';
+    if (mimeType.includes('audio/'))
+        return 'audio';
+    return 'file';
+};
 const ensureIsLocalAttachment = (attachment) => {
     if (isLocalAttachment(attachment)) {
         return attachment;
@@ -21,45 +32,15 @@ const ensureIsLocalAttachment = (attachment) => {
 };
 export const useAttachments = (props, state, dispatch, textareaRef) => {
     const { doFileUploadRequest, doImageUploadRequest, errorHandler, noFiles } = props;
-    const { fileUploads, imageUploads } = state;
     const { getAppSettings } = useChatContext('useAttachments');
     const { t } = useTranslationContext('useAttachments');
     const { addNotification } = useChannelActionContext('useAttachments');
     const { channel, maxNumberOfFiles, multipleUploads } = useChannelStateContext('useAttachments');
-    const { removeFile, uploadFile } = useFileUploads(props, state, dispatch);
-    const { removeImage, uploadImage } = useImageUploads(props, state, dispatch);
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
     // If multipleUploads is false, we only want to allow a single upload.
     const maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
-    // OG attachments should not be counted towards "numberOfImages"
-    const numberOfImages = Object.values(imageUploads).filter(({ og_scrape_url, state }) => state !== 'failed' && !og_scrape_url).length;
-    const numberOfFiles = Object.values(fileUploads).filter(({ state }) => state !== 'failed').length;
-    const numberOfUploads = numberOfImages + numberOfFiles;
+    const numberOfUploads = Object.values(state.attachments).filter(({ localMetadata }) => localMetadata.uploadState && localMetadata.uploadState !== 'failed').length;
     const maxFilesLeft = maxFilesAllowed - numberOfUploads;
-    const uploadNewFiles = useCallback((files) => {
-        Array.from(files)
-            .slice(0, maxFilesLeft)
-            .forEach((file) => {
-            const id = nanoid();
-            if (file.type.startsWith('image/') &&
-                !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
-            ) {
-                dispatch({
-                    file,
-                    id,
-                    previewUri: URL.createObjectURL?.(file),
-                    state: 'uploading',
-                    type: 'setImageUpload',
-                });
-            }
-            else if (file instanceof File && !noFiles) {
-                dispatch({ file, id, state: 'uploading', type: 'setFileUpload' });
-            }
-        });
-        textareaRef?.current?.focus();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxFilesLeft, noFiles]);
     const removeAttachments = useCallback((ids) => {
         if (!ids.length)
             return;
@@ -74,12 +55,13 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         });
     }, [dispatch]);
     const uploadAttachment = useCallback(async (att) => {
-        const { localMetadata, ...attachment } = att;
+        const { localMetadata, ...providedAttachmentData } = att;
         if (!localMetadata?.file)
             return att;
-        const isImage = isUploadedImage(attachment);
-        const id = localMetadata?.id ?? nanoid();
         const { file } = localMetadata;
+        const isImage = isImageFile(file);
+        if (noFiles && !isImage)
+            return att;
         const canUpload = await checkUploadPermissions({
             addNotification,
             file,
@@ -87,18 +69,31 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             t,
             uploadType: isImage ? 'image' : 'file',
         });
-        if (!canUpload) {
-            const notificationText = t('Missing permissions to upload the attachment');
-            console.error(new Error(notificationText));
-            addNotification(notificationText, 'error');
+        if (!canUpload)
             return att;
+        localMetadata.id = localMetadata?.id ?? nanoid();
+        const finalAttachment = {
+            type: getAttachmentTypeFromMime(file.type),
+        };
+        if (isImage) {
+            localMetadata.previewUri = URL.createObjectURL?.(file);
+            if (file instanceof File) {
+                finalAttachment.fallback = file.name;
+            }
         }
+        else {
+            finalAttachment.file_size = file.size;
+            finalAttachment.mime_type = file.type;
+            if (file instanceof File) {
+                finalAttachment.title = file.name;
+            }
+        }
+        Object.assign(finalAttachment, providedAttachmentData);
         upsertAttachments([
             {
-                ...attachment,
+                ...finalAttachment,
                 localMetadata: {
                     ...localMetadata,
-                    id,
                     uploadState: 'uploading',
                 },
             },
@@ -124,7 +119,7 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             console.error(finalError);
             addNotification(finalError.message, 'error');
             const failedAttachment = {
-                ...attachment,
+                ...finalAttachment,
                 localMetadata: {
                     ...localMetadata,
                     uploadState: 'failed',
@@ -132,19 +127,19 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             };
             upsertAttachments([failedAttachment]);
             if (errorHandler) {
-                errorHandler(finalError, 'upload-attachment', file);
+                errorHandler(finalError, 'upload-attachment', { ...file, id: localMetadata.id });
             }
             return failedAttachment;
         }
         if (!response) {
-            // Copied this from useImageUpload / useFileUpload. Not sure how failure could be handled on app level.
+            // Copied this from useImageUpload / useFileUpload.
             // If doUploadRequest returns any falsy value, then don't create the upload preview.
             // This is for the case if someone wants to handle failure on app level.
-            removeAttachments([id]);
+            removeAttachments([localMetadata.id]);
             return;
         }
         const uploadedAttachment = {
-            ...attachment,
+            ...finalAttachment,
             localMetadata: {
                 ...localMetadata,
                 uploadState: 'finished',
@@ -160,6 +155,9 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         else {
             uploadedAttachment.asset_url = response.file;
         }
+        if (response.thumb_url) {
+            uploadedAttachment.thumb_url = response.thumb_url;
+        }
         upsertAttachments([uploadedAttachment]);
         return uploadedAttachment;
     }, [
@@ -169,19 +167,34 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         doImageUploadRequest,
         errorHandler,
         getAppSettings,
+        noFiles,
         removeAttachments,
         t,
         upsertAttachments,
     ]);
+    const uploadNewFiles = useCallback((files) => {
+        const filesToBeUploaded = noFiles ? Array.from(files).filter(isImageFile) : Array.from(files);
+        filesToBeUploaded.slice(0, maxFilesLeft).forEach((fileLike) => {
+            uploadAttachment({
+                localMetadata: {
+                    file: isBlobButNotFile(fileLike)
+                        ? createFileFromBlobs({
+                            blobsArray: [fileLike],
+                            fileName: generateFileName(fileLike.type),
+                            mimeType: fileLike.type,
+                        })
+                        : fileLike,
+                    id: nanoid(),
+                },
+            });
+        });
+        textareaRef.current?.focus();
+    }, [maxFilesLeft, noFiles, textareaRef, uploadAttachment]);
     return {
         maxFilesLeft,
         numberOfUploads,
         removeAttachments,
-        removeFile,
-        removeImage,
         uploadAttachment,
-        uploadFile,
-        uploadImage,
         uploadNewFiles,
         upsertAttachments,
     };

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js

@@ -1,15 +1,7 @@
 import { useMemo } from 'react';
 export const useCreateMessageInputContext = (value) => {
-    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, attachments, audioRecordingEnabled, autocompleteTriggers, cancelURLEnrichment, clearEditingState, closeCommandsList, closeMentionsList, cooldownInterval, cooldownRemaining, disabled, disableMentions, dismissLinkPreview, doFileUploadRequest, doImageUploadRequest, emojiSearchIndex, errorHandler, fileOrder, fileUploads, findAndEnqueueURLsToEnrich, focus, grow, handleChange, handleSubmit, hideSendButton, imageOrder, imageUploads, insertText, isUploadEnabled, linkPreviews, maxFilesLeft, maxRows, mentionAllAppUsers, mentioned_users, mentionQueryParams, message, minRows, noFiles, numberOfUploads, onPaste, onSelectUser, openCommandsList, openMentionsList, overrideSubmitHandler, parent, publishTypingEvent, recordingController, removeAttachments, removeFile, removeImage, setCooldownRemaining, setText, shouldSubmit, showCommandsList, showMentionsList, text, textareaRef, uploadAttachment, uploadFile, uploadImage, uploadNewFiles, upsertAttachments, useMentionsTransliteration, } = value;
+    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, attachments, audioRecordingEnabled, autocompleteTriggers, cancelURLEnrichment, clearEditingState, closeCommandsList, closeMentionsList, cooldownInterval, cooldownRemaining, disabled, disableMentions, dismissLinkPreview, doFileUploadRequest, doImageUploadRequest, emojiSearchIndex, errorHandler, findAndEnqueueURLsToEnrich, focus, grow, handleChange, handleSubmit, hideSendButton, insertText, isUploadEnabled, linkPreviews, maxFilesLeft, maxRows, mentionAllAppUsers, mentioned_users, mentionQueryParams, message, minRows, noFiles, numberOfUploads, onPaste, onSelectUser, openCommandsList, openMentionsList, overrideSubmitHandler, parent, publishTypingEvent, recordingController, removeAttachments, setCooldownRemaining, setText, shouldSubmit, showCommandsList, showMentionsList, text, textareaRef, uploadAttachment, uploadNewFiles, upsertAttachments, useMentionsTransliteration, } = value;
     const editing = message?.editing;
-    const fileUploadsValue = Object.entries(fileUploads)
-        // eslint-disable-next-line
-        .map(([_, value]) => value.state)
-        .join();
-    const imageUploadsValue = Object.entries(imageUploads)
-        // eslint-disable-next-line
-        .map(([_, value]) => value.state)
-        .join();
     const linkPreviewsValue = Array.from(linkPreviews.values()).join();
     const mentionedUsersLength = mentioned_users.length;
     const parentId = parent?.id;
@@ -32,16 +24,12 @@ export const useCreateMessageInputContext = (value) => {
         doImageUploadRequest,
         emojiSearchIndex,
         errorHandler,
-        fileOrder,
-        fileUploads,
         findAndEnqueueURLsToEnrich,
         focus,
         grow,
         handleChange,
         handleSubmit,
         hideSendButton,
-        imageOrder,
-        imageUploads,
         insertText,
         isUploadEnabled,
         linkPreviews,
@@ -63,8 +51,6 @@ export const useCreateMessageInputContext = (value) => {
         publishTypingEvent,
         recordingController,
         removeAttachments,
-        removeFile,
-        removeImage,
         setCooldownRemaining,
         setText,
         shouldSubmit,
@@ -73,8 +59,6 @@ export const useCreateMessageInputContext = (value) => {
         text,
         textareaRef,
         uploadAttachment,
-        uploadFile,
-        uploadImage,
         uploadNewFiles,
         upsertAttachments,
         useMentionsTransliteration,
@@ -82,6 +66,7 @@ export const useCreateMessageInputContext = (value) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         asyncMessagesMultiSendEnabled,
+        attachments,
         audioRecordingEnabled,
         cancelURLEnrichment,
         cooldownInterval,
@@ -89,11 +74,9 @@ export const useCreateMessageInputContext = (value) => {
         dismissLinkPreview,
         editing,
         emojiSearchIndex,
-        fileUploadsValue,
         findAndEnqueueURLsToEnrich,
         handleSubmit,
         hideSendButton,
-        imageUploadsValue,
         isUploadEnabled,
         linkPreviewsValue,
         mentionedUsersLength,