stream-chat-react 13.14.3 → 14.0.0-beta.2

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import type { ComponentContextValue } from '../../context/ComponentContext';
-import type { LocalMessage, Message, SendMessageOptions } from 'stream-chat';
-import type { CustomAudioRecordingConfig } from '../MediaRecorder';
-export type EmojiSearchIndexResult = {
-    id: string;
-    name: string;
-    skins: Array<{
-        native: string;
-    }>;
-    emoticons?: Array<string>;
-    native?: string;
-};
-export interface EmojiSearchIndex {
-    search: (query: string) => PromiseLike<Array<EmojiSearchIndexResult>> | Array<EmojiSearchIndexResult> | null;
-}
-export type MessageInputProps = {
-    /**
-     * Additional props to be passed to the underlying `AutoCompleteTextarea` component.
-     * Default value is handled via MessageComposer.
-     * [Available props](https://www.npmjs.com/package/react-textarea-autosize)
-     */
-    additionalTextareaProps?: Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'style' | 'disabled' | 'value'>;
-    /**
-     * When enabled, recorded messages won’t be sent immediately.
-     * Instead, they will “stack up” with other attachments in the message composer allowing the user to send multiple attachments as part of the same message.
-     */
-    asyncMessagesMultiSendEnabled?: boolean;
-    /** Allows to configure the audio recording parameters for voice messages. */
-    audioRecordingConfig?: CustomAudioRecordingConfig;
-    /** Controls whether the users will be provided with the UI to record voice messages. */
-    audioRecordingEnabled?: boolean;
-    /** Function to clear the editing state while editing a message */
-    clearEditingState?: () => void;
-    /** 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'];
-    /** If true, focuses the text input on component mount */
-    focus?: boolean;
-    /** Allows to hide MessageInput's send button. */
-    hideSendButton?: boolean;
-    /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
-    Input?: React.ComponentType<MessageInputProps>;
-    /** @deprecated use messageComposer.threadId to indicate, whether the message is composed within a thread context
-     * Signals that the MessageInput is rendered in a message thread (Thread component)
-     */
-    isThreadInput?: boolean;
-    /** Max number of rows the underlying `textarea` component is allowed to grow */
-    maxRows?: number;
-    /** Min number of rows the underlying `textarea` will start with. The `grow` on MessageInput prop has to be enabled for `minRows` to take effect. */
-    minRows?: number;
-    /** Function to override the default message sending process. Not message updating process. */
-    overrideSubmitHandler?: (params: {
-        cid: string;
-        localMessage: LocalMessage;
-        message: Message;
-        sendOptions: SendMessageOptions;
-    }) => Promise<void> | void;
-    /** When replying in a thread, the parent message object */
-    parent?: LocalMessage;
-    /** If true, will use an optional dependency to support transliteration in the input for mentions, default is false. See: https://github.com/getstream/transliterate */
-    /**
-     * Currently, `Enter` is the default submission key and  `Shift`+`Enter` is the default combination for the new line.
-     * If specified, this function overrides the default behavior specified previously.
-     *
-     * Example of default behavior:
-     * ```tsx
-     * const defaultShouldSubmit = (event) => event.key === "Enter" && !event.shiftKey;
-     * ```
-     */
-    shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
-};
-/**
- * A high level component that has provides all functionality to the Input it renders.
- */
-export declare const MessageInput: (props: MessageInputProps) => React.JSX.Element;

package/dist/components/MessageInput/MessageInput.js

@@ -1,62 +0,0 @@
-import React, { useEffect } from 'react';
-import { MessageInputFlat } from './MessageInputFlat';
-import { useMessageComposer } from './hooks';
-import { useCooldownTimer } from './hooks/useCooldownTimer';
-import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
-import { useMessageInputControls } from './hooks/useMessageInputControls';
-import { useComponentContext } from '../../context/ComponentContext';
-import { MessageInputContextProvider } from '../../context/MessageInputContext';
-import { DialogManagerProvider } from '../../context';
-import { useStableId } from '../UtilityComponents/useStableId';
-import { useRegisterDropHandlers } from './WithDragAndDropUpload';
-const MessageInputProvider = (props) => {
-    const cooldownTimerState = useCooldownTimer();
-    const messageInputUiApi = useMessageInputControls(props);
-    const { emojiSearchIndex } = useComponentContext('MessageInput');
-    const messageInputContextValue = useCreateMessageInputContext({
-        ...cooldownTimerState,
-        ...messageInputUiApi,
-        ...props,
-        emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
-    });
-    const messageComposer = useMessageComposer();
-    useEffect(() => () => {
-        messageComposer.createDraft();
-    }, [messageComposer]);
-    useEffect(() => {
-        const threadId = messageComposer.threadId;
-        if (!threadId ||
-            !messageComposer.channel ||
-            !messageComposer.compositionIsEmpty ||
-            !messageComposer.config.drafts.enabled)
-            return;
-        // get draft data for legacy thead composer
-        messageComposer.channel
-            .getDraft({ parent_id: threadId })
-            .then(({ draft }) => {
-            if (draft) {
-                messageComposer.initState({ composition: draft });
-            }
-        })
-            .catch(console.error);
-    }, [messageComposer]);
-    useRegisterDropHandlers();
-    return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
-};
-const UnMemoizedMessageInput = (props) => {
-    const { Input: PropInput } = props;
-    const { Input: ContextInput } = useComponentContext('MessageInput');
-    const messageComposer = useMessageComposer();
-    const id = useStableId();
-    const Input = PropInput || ContextInput || MessageInputFlat;
-    const dialogManagerId = messageComposer.threadId
-        ? `message-input-dialog-manager-thread-${id}`
-        : `message-input-dialog-manager-${id}`;
-    return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
-        React.createElement(MessageInputProvider, { ...props },
-            React.createElement(Input, null))));
-};
-/**
- * A high level component that has provides all functionality to the Input it renders.
- */
-export const MessageInput = React.memo(UnMemoizedMessageInput);

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

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

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,70 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { AttachmentSelector as DefaultAttachmentSelector, SimpleAttachmentSelector, } from './AttachmentSelector';
-import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
-import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
-import { SendButton as DefaultSendButton } from './SendButton';
-import { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopAIGenerationButton';
-import { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
-import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
-import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { SendToChannelCheckbox as DefaultSendToChannelCheckbox } from './SendToChannelCheckbox';
-import { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';
-import { AIStates, useAIState } from '../AIStateIndicator';
-import { RecordingAttachmentType } from '../MediaRecorder/classes';
-import { useChatContext } from '../../context/ChatContext';
-import { useMessageInputContext } from '../../context/MessageInputContext';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
-import { useMessageContext } from '../../context';
-import { WithDragAndDropUpload } from './WithDragAndDropUpload';
-export const MessageInputFlat = () => {
-    const { message } = useMessageContext();
-    const { asyncMessagesMultiSendEnabled, cooldownRemaining, handleSubmit, hideSendButton, recordingController, setCooldownRemaining, } = useMessageInputContext('MessageInputFlat');
-    const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, SendToChannelCheckbox = DefaultSendToChannelCheckbox, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, TextareaComposer = DefaultTextareaComposer, } = useComponentContext();
-    const { channel } = useChatContext('MessageInputFlat');
-    const { aiState } = useAIState(channel);
-    const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
-    const [showRecordingPermissionDeniedNotification, setShowRecordingPermissionDeniedNotification,] = useState(false);
-    const closePermissionDeniedNotification = useCallback(() => {
-        setShowRecordingPermissionDeniedNotification(false);
-    }, []);
-    const { attachments } = useAttachmentManagerState();
-    if (recordingController.recordingState)
-        return React.createElement(AudioRecorder, null);
-    const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
-    const isRecording = !!recordingController.recordingState;
-    /**
-     * This bit here is needed to make sure that we can get rid of the default behaviour
-     * if need be. Essentially, this allows us to pass StopAIGenerationButton={null} and
-     * completely circumvent the default logic if it's not what we want. We need it as a
-     * prop because there is no other trivial way to override the SendMessage button otherwise.
-     */
-    const StopAIGenerationButton = StopAIGenerationButtonOverride === undefined
-        ? DefaultStopAIGenerationButton
-        : StopAIGenerationButtonOverride;
-    const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) &&
-        !!StopAIGenerationButton;
-    return (React.createElement(WithDragAndDropUpload, { className: 'str-chat__message-input', component: 'div' },
-        recordingEnabled &&
-            recordingController.permissionState === 'denied' &&
-            showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
-        React.createElement(LinkPreviewList, null),
-        React.createElement(QuotedMessagePreviewHeader, null),
-        React.createElement("div", { className: 'str-chat__message-input-inner' },
-            React.createElement(AttachmentSelector, null),
-            React.createElement("div", { className: 'str-chat__message-textarea-container' },
-                React.createElement(QuotedMessagePreview, null),
-                React.createElement(AttachmentPreviewList, null),
-                React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
-                    React.createElement(TextareaComposer, null),
-                    EmojiPicker && React.createElement(EmojiPicker, null))),
-            shouldDisplayStopAIGeneration ? (React.createElement(StopAIGenerationButton, { onClick: stopGenerating })) : (!hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
-                React.createElement(SendButton, { sendMessage: handleSubmit }),
-                recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
-                        (!asyncMessagesMultiSendEnabled &&
-                            attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
-                        recordingController.recorder?.start();
-                        setShowRecordingPermissionDeniedNotification(true);
-                    } })))))))),
-        React.createElement(SendToChannelCheckbox, null)));
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { MessageContextValue } from '../../context';
-export declare const QuotedMessagePreviewHeader: () => React.JSX.Element | null;
-export type QuotedMessagePreviewProps = {
-    renderText?: MessageContextValue['renderText'];
-};
-export declare const QuotedMessagePreview: ({ renderText, }: QuotedMessagePreviewProps) => React.JSX.Element | null;

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react';
-import { CloseIcon } from './icons';
-import { Attachment as DefaultAttachment } from '../Attachment';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { Poll } from '../Poll';
-import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useStateStore } from '../../store';
-import { useMessageComposer } from './hooks';
-import { renderText as defaultRenderText } from '../Message/renderText';
-const messageComposerStateStoreSelector = (state) => ({
-    quotedMessage: state.quotedMessage,
-});
-export const QuotedMessagePreviewHeader = () => {
-    const { t } = useTranslationContext('QuotedMessagePreview');
-    const messageComposer = useMessageComposer();
-    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
-    if (!quotedMessage)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__quoted-message-preview-header' },
-        React.createElement("div", { className: 'str-chat__quoted-message-reply-to-message' }, t('Reply to Message')),
-        React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__quoted-message-remove', onClick: () => messageComposer.setQuotedMessage(null) },
-            React.createElement(CloseIcon, null))));
-};
-export const QuotedMessagePreview = ({ renderText = defaultRenderText, }) => {
-    const { client } = useChatContext();
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
-    const { userLanguage } = useTranslationContext('QuotedMessagePreview');
-    const messageComposer = useMessageComposer();
-    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
-    const quotedMessageText = useMemo(() => quotedMessage?.i18n?.[`${userLanguage}_text`] ||
-        quotedMessage?.text, [quotedMessage?.i18n, quotedMessage?.text, userLanguage]);
-    const renderedText = useMemo(() => renderText(quotedMessageText, quotedMessage?.mentioned_users), [quotedMessage, quotedMessageText, renderText]);
-    const quotedMessageAttachments = useMemo(() => quotedMessage?.attachments?.length ? quotedMessage.attachments.slice(0, 1) : [], [quotedMessage]);
-    const poll = quotedMessage?.poll_id && client.polls.fromState(quotedMessage.poll_id);
-    if (!quotedMessageText && !quotedMessageAttachments.length && !poll)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__quoted-message-preview', "data-testid": 'quoted-message-preview' },
-        quotedMessage?.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, user: quotedMessage.user })),
-        React.createElement("div", { className: 'str-chat__quoted-message-bubble' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
-            !!quotedMessageAttachments.length && (React.createElement(Attachment, { attachments: quotedMessageAttachments, isQuoted: true })),
-            React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' }, renderedText))))));
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export type SendButtonProps = {
-    sendMessage: (event: React.BaseSyntheticEvent) => void;
-} & React.ComponentProps<'button'>;
-export declare const SendButton: ({ sendMessage, ...rest }: SendButtonProps) => React.JSX.Element;

package/dist/components/MessageInput/SendButton.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { SendIcon } from './icons';
-import { useMessageComposerHasSendableData } from './hooks';
-import { useTranslationContext } from '../../context';
-export const SendButton = ({ sendMessage, ...rest }) => {
-    const { t } = useTranslationContext();
-    const hasSendableData = useMessageComposerHasSendableData();
-    return (React.createElement("button", { "aria-label": t('aria/Send'), className: 'str-chat__send-button', "data-testid": 'send-button', disabled: !hasSendableData, onClick: sendMessage, type: 'button', ...rest },
-        React.createElement(SendIcon, null)));
-};

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

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

package/dist/components/MessageInput/SendToChannelCheckbox.js

@@ -1,20 +0,0 @@
-import { useMessageComposer } from './hooks';
-import React from 'react';
-import { useStateStore } from '../../store';
-import { useTranslationContext } from '../../context';
-const stateSelector = (state) => ({
-    showReplyInChannel: state.showReplyInChannel,
-});
-export const SendToChannelCheckbox = () => {
-    const { t } = useTranslationContext();
-    const messageComposer = useMessageComposer();
-    const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
-    if (messageComposer.editedMessage || !messageComposer.threadId)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__send-to-channel-checkbox__container' },
-        React.createElement("div", { className: 'str-chat__send-to-channel-checkbox__field' },
-            React.createElement("input", { id: 'send-to-channel-checkbox', onClick: messageComposer.toggleShowReplyInChannel, type: 'checkbox', value: showReplyInChannel.toString() }),
-            React.createElement("label", { htmlFor: 'send-to-channel-checkbox' }, Object.keys(messageComposer.channel.state.members).length === 2
-                ? t('Also send as a direct message')
-                : t('Also send in channel')))));
-};

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

@@ -1,3 +0,0 @@
-import React from 'react';
-export type StopAIGenerationButtonProps = React.ComponentProps<'button'>;
-export declare const StopAIGenerationButton: ({ onClick, ...restProps }: StopAIGenerationButtonProps) => React.JSX.Element;

package/dist/components/MessageInput/StopAIGenerationButton.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context';
-export const StopAIGenerationButton = ({ onClick, ...restProps }) => {
-    const { t } = useTranslationContext();
-    return (React.createElement("button", { "aria-label": t('aria/Stop AI Generation'), className: 'str-chat__stop-ai-generation-button', "data-testid": 'stop-ai-generation-button', onClick: onClick, ...restProps }));
-};

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

@@ -1,38 +0,0 @@
-import type { CSSProperties, ElementType, PropsWithChildren } from 'react';
-import React from 'react';
-export declare const useDragAndDropUploadContext: () => {
-    subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
-};
-/**
- * @private This hook should be used only once directly in the `MessageInputProvider` to
- * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
- * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
- * component.
- */
-export declare const useRegisterDropHandlers: () => void;
-/**
- * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
- *
- * @example
- * ```tsx
- * <Channel>
- *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
- *    <Window>
- *      <MessageList />
- *      <MessageInput />
- *    </Window>
- *  </WithDragAndDropUpload>
- *  <Thread />
- * <Channel>
- * ```
- */
-export declare const WithDragAndDropUpload: ({ children, className, component: Component, style, }: PropsWithChildren<{
-    acceptedFiles?: string[];
-    /**
-     * @description An element to render as a wrapper onto which drag & drop functionality will be applied.
-     * @default 'div'
-     */
-    component?: ElementType;
-    className?: string;
-    style?: CSSProperties;
-}>) => React.JSX.Element;

package/dist/components/MessageInput/WithDragAndDropUpload.js

@@ -1,96 +0,0 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { useDropzone } from 'react-dropzone';
-import clsx from 'clsx';
-import { useMessageInputContext, useTranslationContext } from '../../context';
-import { useAttachmentManagerState, useMessageComposer } from './hooks';
-import { useStateStore } from '../../store';
-const DragAndDropUploadContext = React.createContext({
-    subscribeToDrop: null,
-});
-export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
-/**
- * @private This hook should be used only once directly in the `MessageInputProvider` to
- * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
- * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
- * component.
- */
-export const useRegisterDropHandlers = () => {
-    const { subscribeToDrop } = useDragAndDropUploadContext();
-    const messageComposer = useMessageComposer();
-    useEffect(() => {
-        const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
-        return unsubscribe;
-    }, [subscribeToDrop, messageComposer]);
-};
-const attachmentManagerConfigStateSelector = (state) => ({
-    acceptedFiles: state.attachments.acceptedFiles,
-    multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,
-});
-/**
- * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
- *
- * @example
- * ```tsx
- * <Channel>
- *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
- *    <Window>
- *      <MessageList />
- *      <MessageInput />
- *    </Window>
- *  </WithDragAndDropUpload>
- *  <Thread />
- * <Channel>
- * ```
- */
-export const WithDragAndDropUpload = ({ children, className, component: Component = 'div', style, }) => {
-    const dropHandlersRef = useRef(new Set());
-    const { t } = useTranslationContext();
-    const messageInputContext = useMessageInputContext();
-    const dragAndDropUploadContext = useDragAndDropUploadContext();
-    const messageComposer = useMessageComposer();
-    const { isUploadEnabled } = useAttachmentManagerState();
-    const { acceptedFiles, multipleUploads } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
-    // if message input context is available, there's no need to use the queue
-    const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
-    const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
-        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
-        return mediaTypeMap;
-    }, {}), [acceptedFiles]);
-    const subscribeToDrop = useCallback((fn) => {
-        dropHandlersRef.current.add(fn);
-        return () => {
-            dropHandlersRef.current.delete(fn);
-        };
-    }, []);
-    const handleDrop = useCallback((files) => {
-        dropHandlersRef.current.forEach((fn) => fn(files));
-    }, []);
-    const { getRootProps, isDragActive, isDragReject } = useDropzone({
-        accept,
-        // apply `disabled` rules if available, otherwise allow anything and
-        // let the `uploadNewFiles` handle the limitations internally
-        disabled: isWithinMessageInputContext
-            ? !isUploadEnabled || (messageInputContext.cooldownRemaining ?? 0) > 0
-            : false,
-        multiple: multipleUploads,
-        noClick: true,
-        onDrop: isWithinMessageInputContext
-            ? messageComposer.attachmentManager.uploadFiles
-            : handleDrop,
-    });
-    // nested WithDragAndDropUpload components render wrappers without functionality
-    // (MessageInputFlat has a default WithDragAndDropUpload)
-    if (dragAndDropUploadContext.subscribeToDrop !== null) {
-        return React.createElement(Component, { className: className }, children);
-    }
-    return (React.createElement(DragAndDropUploadContext.Provider, { value: {
-            subscribeToDrop,
-        } },
-        React.createElement(Component, { ...getRootProps({ className, style }) },
-            isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
-                    'str-chat__dropzone-container--not-accepted': isDragReject,
-                }) },
-                !isDragReject && React.createElement("p", null, t('Drag your files here')),
-                isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
-            children)));
-};

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

@@ -1,7 +0,0 @@
-export * from './useAttachmentManagerState';
-export * from './useAttachmentsForPreview';
-export * from './useCanCreatePoll';
-export * from './useCooldownTimer';
-export * from './useMessageInputControls';
-export * from './useMessageComposer';
-export * from './useMessageComposerHasSendableData';

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

@@ -1,7 +0,0 @@
-export * from './useAttachmentManagerState';
-export * from './useAttachmentsForPreview';
-export * from './useCanCreatePoll';
-export * from './useCooldownTimer';
-export * from './useMessageInputControls';
-export * from './useMessageComposer';
-export * from './useMessageComposerHasSendableData';

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

@@ -1,10 +0,0 @@
-export declare const useAttachmentManagerState: () => {
-    attachments: import("stream-chat").LocalAttachment[];
-    availableUploadSlots: number;
-    blockedUploadsCount: number;
-    failedUploadsCount: number;
-    isUploadEnabled: boolean;
-    pendingUploadsCount: number;
-    successfulUploadsCount: number;
-    uploadsInProgressCount: number;
-};

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

@@ -1,19 +0,0 @@
-import { useMessageComposer } from './useMessageComposer';
-import { useStateStore } from '../../../store';
-const stateSelector = (state) => ({
-    attachments: state.attachments,
-});
-export const useAttachmentManagerState = () => {
-    const { attachmentManager } = useMessageComposer();
-    const { attachments } = useStateStore(attachmentManager.state, stateSelector);
-    return {
-        attachments,
-        availableUploadSlots: attachmentManager.availableUploadSlots,
-        blockedUploadsCount: attachmentManager.blockedUploadsCount,
-        failedUploadsCount: attachmentManager.failedUploadsCount,
-        isUploadEnabled: attachmentManager.isUploadEnabled,
-        pendingUploadsCount: attachmentManager.pendingUploadsCount,
-        successfulUploadsCount: attachmentManager.successfulUploadsCount,
-        uploadsInProgressCount: attachmentManager.uploadsInProgressCount,
-    };
-};

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

@@ -1,17 +0,0 @@
-export declare const useAttachmentsForPreview: () => {
-    attachments: import("stream-chat").LocalAttachment[];
-    location: import("stream-chat").StaticLocationPayload | import("stream-chat").LiveLocationPreview | null;
-    poll: {
-        id: string;
-        max_votes_allowed: string;
-        name: string;
-        options: import("stream-chat").PollComposerOption[];
-        allow_answers?: boolean | undefined;
-        allow_user_suggested_options?: boolean | undefined;
-        description?: string | undefined;
-        enforce_unique_vote?: boolean | undefined;
-        is_closed?: boolean | undefined;
-        user_id?: string | undefined;
-        voting_visibility?: import("stream-chat").VotingVisibility | undefined;
-    };
-};

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

@@ -1,22 +0,0 @@
-import { useMessageComposer } from './useMessageComposer';
-import { useStateStore } from '../../../store';
-const attachmentManagerStateSelector = (state) => ({
-    attachments: state.attachments,
-});
-const pollComposerStateSelector = (state) => ({
-    poll: state.data,
-});
-const locationComposerStateSelector = (state) => ({
-    location: state.location,
-});
-export const useAttachmentsForPreview = () => {
-    const { attachmentManager, locationComposer, pollComposer } = useMessageComposer();
-    const { attachments } = useStateStore(attachmentManager.state, attachmentManagerStateSelector);
-    const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);
-    const { location } = useStateStore(locationComposer.state, locationComposerStateSelector);
-    return {
-        attachments,
-        location,
-        poll,
-    };
-};

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

@@ -1 +0,0 @@
-export declare const useCanCreatePoll: () => boolean;

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

@@ -1,10 +0,0 @@
-import { useMessageComposer } from './useMessageComposer';
-import { useEffect, useState } from 'react';
-export const useCanCreatePoll = () => {
-    const { pollComposer } = useMessageComposer();
-    const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);
-    useEffect(() => pollComposer.state.subscribe(() => {
-        setCanCreatePoll(pollComposer.canCreatePoll);
-    }), [pollComposer]);
-    return canCreatePoll;
-};

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

@@ -1,7 +0,0 @@
-import type React from 'react';
-export type CooldownTimerState = {
-    cooldownInterval: number;
-    setCooldownRemaining: React.Dispatch<React.SetStateAction<number | undefined>>;
-    cooldownRemaining?: number;
-};
-export declare const useCooldownTimer: () => CooldownTimerState;

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

@@ -1,39 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useChannelStateContext, useChatContext } from '../../../context';
-export const useCooldownTimer = () => {
-    const { client, latestMessageDatesByChannels } = useChatContext('useCooldownTimer');
-    const { channel, messages = [] } = useChannelStateContext('useCooldownTimer');
-    const [cooldownRemaining, setCooldownRemaining] = useState();
-    const { cooldown: cooldownInterval = 0, own_capabilities } = (channel.data ||
-        {});
-    const skipCooldown = own_capabilities?.includes('skip-slow-mode');
-    const ownLatestMessageDate = useMemo(() => latestMessageDatesByChannels[channel.cid] ??
-        [...messages]
-            .sort((a, b) => b.created_at?.getTime() - a.created_at?.getTime())
-            .find((v) => v.user?.id === client.user?.id)?.created_at, [messages, client.user?.id, latestMessageDatesByChannels, channel.cid]);
-    useEffect(() => {
-        const timeSinceOwnLastMessage = ownLatestMessageDate
-            ? // prevent negative values
-                Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
-            : undefined;
-        const remaining = !skipCooldown &&
-            typeof timeSinceOwnLastMessage !== 'undefined' &&
-            cooldownInterval > timeSinceOwnLastMessage
-            ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
-            : 0;
-        setCooldownRemaining(remaining);
-        if (!remaining)
-            return;
-        const timeout = setTimeout(() => {
-            setCooldownRemaining(0);
-        }, remaining * 1000);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
-    return {
-        cooldownInterval,
-        cooldownRemaining,
-        setCooldownRemaining,
-    };
-};

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

@@ -1,2 +0,0 @@
-import type { MessageInputContextValue } from '../../../context/MessageInputContext';
-export declare const useCreateMessageInputContext: (value: MessageInputContextValue) => MessageInputContextValue;