stream-chat-react 12.4.1 → 12.5.1

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -10,6 +10,16 @@ const mousewheelListener = (event) => {
         event.preventDefault();
     }
 };
+/**
+ * This component serves a single purpose - load more items on scroll inside the MessageList component
+ * It is not a general purpose infinite scroll controller, because:
+ * 1. It is re-rendered whenever isLoading, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
+ * 2. It pretends to invoke scrollListener on resize event even though this event is emitted only on window resize. It should
+ * rather use ResizeObserver. But then again, it ResizeObserver would invoke a stale version of scrollListener.
+ *
+ * In general, the infinite scroll controller should not aim for checking the loading state and whether there is more data to load.
+ * That should be controlled by the loading function.
+ */
 export const InfiniteScroll = (props) => {
     const { children, element = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
     const loadNextPageFn = loadNextPage || loadMoreNewer;

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

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
+    listenToScroll?: (distanceFromBottom: number, distanceFromTop: number, threshold: number) => void;
+    loadNextOnScrollToBottom?: () => void;
+    loadNextOnScrollToTop?: () => void;
+    /** Offset from when to start the loadNextPage call */
+    threshold?: number;
+    useCapture?: boolean;
+};
+export declare const InfiniteScrollPaginator: (props: PropsWithChildren<InfiniteScrollPaginatorProps>) => React.JSX.Element;

package/dist/components/InfiniteScrollPaginator/InfiniteScrollPaginator.js

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import debounce from 'lodash.debounce';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
+/**
+ * Prevents Chrome hangups
+ * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
+ */
+const mousewheelListener = (event) => {
+    if (event instanceof WheelEvent && event.deltaY === 1) {
+        event.preventDefault();
+    }
+};
+export const InfiniteScrollPaginator = (props) => {
+    const { children, listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, className, ...componentProps } = props;
+    const rootRef = useRef(null);
+    const childRef = useRef(null);
+    const scrollListener = useMemo(() => debounce(() => {
+        const root = rootRef.current;
+        const child = childRef.current;
+        if (!root || root.offsetParent === null || !child) {
+            return;
+        }
+        const distanceFromBottom = child.scrollHeight - root.scrollTop - root.clientHeight;
+        const distanceFromTop = root.scrollTop;
+        if (listenToScroll) {
+            listenToScroll(distanceFromBottom, distanceFromTop, threshold);
+        }
+        if (distanceFromTop < Number(threshold)) {
+            loadNextOnScrollToTop?.();
+        }
+        if (distanceFromBottom < Number(threshold)) {
+            loadNextOnScrollToBottom?.();
+        }
+    }, 500), [listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold]);
+    useEffect(() => {
+        const scrollElement = rootRef.current;
+        if (!scrollElement)
+            return;
+        scrollElement.addEventListener('scroll', scrollListener, useCapture);
+        return () => {
+            scrollElement.removeEventListener('scroll', scrollListener, useCapture);
+        };
+    }, [scrollListener, useCapture]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === 'undefined' || !scrollListener)
+            return;
+        const observer = new ResizeObserver(scrollListener);
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+        };
+    }, [scrollListener]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (root) {
+            root.addEventListener('wheel', mousewheelListener, { passive: false });
+        }
+        return () => {
+            if (root) {
+                root.removeEventListener('wheel', mousewheelListener, useCapture);
+            }
+        };
+    }, [useCapture]);
+    return (React.createElement("div", { ...componentProps, className: clsx('str-chat__infinite-scroll-paginator', className), ref: rootRef },
+        React.createElement("div", { className: 'str-chat__infinite-scroll-paginator__content', ref: childRef }, children)));
+};

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

@@ -0,0 +1,18 @@
+import { StateStore } from 'stream-chat';
+export type CursorPaginatorState<T> = {
+    hasNextPage: boolean;
+    items: T[];
+    latestPageItems: T[];
+    loading: boolean;
+    error?: Error;
+    next?: string | null;
+};
+export type CursorPaginatorStateStore<T> = StateStore<CursorPaginatorState<T>>;
+export type PaginationFn<T> = (next?: string) => Promise<{
+    items: T[];
+    next?: string;
+}>;
+export declare const useCursorPaginator: <T>(paginationFn: PaginationFn<T>, loadFirstPage?: boolean) => {
+    cursorPaginatorState: StateStore<CursorPaginatorState<T>>;
+    loadMore: () => Promise<void>;
+};

package/dist/components/InfiniteScrollPaginator/hooks/useCursorPaginator.js

@@ -0,0 +1,41 @@
+import uniqBy from 'lodash.uniqby';
+import { useCallback, useEffect, useMemo } from 'react';
+import { StateStore } from 'stream-chat';
+export const useCursorPaginator = (paginationFn, loadFirstPage) => {
+    const cursorPaginatorState = useMemo(() => new StateStore({
+        hasNextPage: true,
+        items: [],
+        latestPageItems: [],
+        loading: false,
+    }), []);
+    const loadMore = useCallback(async () => {
+        const { loading, next: currentNext } = cursorPaginatorState.getLatestValue();
+        if (currentNext === null || loading)
+            return;
+        cursorPaginatorState.partialNext({ loading: true });
+        try {
+            const { items, next } = await paginationFn(currentNext);
+            cursorPaginatorState.next((prev) => ({
+                ...prev,
+                hasNextPage: !!next,
+                items: uniqBy(prev.items.concat(items), 'id'),
+                latestPageItems: items,
+                next: next || null,
+            }));
+        }
+        catch (error) {
+            cursorPaginatorState.partialNext({ error: error });
+        }
+        cursorPaginatorState.partialNext({ loading: false });
+    }, [cursorPaginatorState, paginationFn]);
+    useEffect(() => {
+        const { items } = cursorPaginatorState.getLatestValue();
+        if (!loadFirstPage || items.length)
+            return;
+        loadMore();
+    }, [cursorPaginatorState, loadFirstPage, loadMore]);
+    return {
+        cursorPaginatorState,
+        loadMore,
+    };
+};

package/dist/components/Message/MessageSimple.js

@@ -15,14 +15,16 @@ import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
 import { MML } from '../MML';
 import { Modal } from '../Modal';
+import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context';
+import { useChatContext, useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
 const MessageSimpleWithContext = (props) => {
     const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
+    const { client } = useChatContext('MessageSimple');
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
@@ -66,6 +68,7 @@ const MessageSimpleWithContext = (props) => {
         'str-chat__virtual-message__wrapper--first': firstOfGroup,
         'str-chat__virtual-message__wrapper--group': groupedByUser,
     });
+    const poll = message.poll_id && client.polls.fromState(message.poll_id);
     return (React.createElement(React.Fragment, null,
         editing && (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: clearEditingState, open: editing },
             React.createElement(MessageInput, { clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message, ...additionalMessageInputProps }))),
@@ -79,6 +82,7 @@ const MessageSimpleWithContext = (props) => {
                 React.createElement(MessageActions, null),
                 React.createElement("div", { className: 'str-chat__message-reactions-host' }, hasReactions && React.createElement(ReactionsList, { reverse: true })),
                 React.createElement("div", { className: 'str-chat__message-bubble' },
+                    poll && React.createElement(Poll, { poll: poll }),
                     message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                     React.createElement(MessageText, { message: message, renderText: renderText }),
                     message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),

package/dist/components/Message/QuotedMessage.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
+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 { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
-import { Attachment as DefaultAttachment } from '../Attachment';
 export const QuotedMessage = () => {
     const { Attachment = DefaultAttachment, Avatar: ContextAvatar, } = useComponentContext('QuotedMessage');
+    const { client } = useChatContext();
     const { isMyMessage, message } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
     const { jumpToMessage } = useChannelActionContext('QuotedMessage');
@@ -15,6 +18,7 @@ export const QuotedMessage = () => {
     const { quoted_message } = message;
     if (!quoted_message)
         return null;
+    const poll = quoted_message.poll_id && client.polls.fromState(quoted_message.poll_id);
     const quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === 'deleted';
     const quotedMessageText = quotedMessageDeleted
         ? t('This message was deleted...')
@@ -23,7 +27,7 @@ export const QuotedMessage = () => {
     const quotedMessageAttachment = quoted_message.attachments?.length && !quotedMessageDeleted
         ? quoted_message.attachments[0]
         : null;
-    if (!quotedMessageText && !quotedMessageAttachment)
+    if (!quoted_message.poll && !quotedMessageText && !quotedMessageAttachment)
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: clsx('str-chat__quoted-message-preview', { mine: isMyMessage() }), "data-testid": 'quoted-message', onClickCapture: (e) => {
@@ -32,8 +36,8 @@ export const QuotedMessage = () => {
                 jumpToMessage(quoted_message.id);
             } },
             quoted_message.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quoted_message.user.image, name: quoted_message.user.name || quoted_message.user.id, user: quoted_message.user })),
-            React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' },
+            React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
                 quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
-                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, quotedMessageText))),
+                React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, quotedMessageText))))),
         message.attachments?.length ? React.createElement(Attachment, { attachments: message.attachments }) : null));
 };

package/dist/components/Message/hooks/useUserRole.js

@@ -23,8 +23,9 @@ export const useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) =
         channel.state.membership.is_moderator === true ||
         channel.state.membership.channel_role === 'channel_moderator';
     const isMyMessage = client.userID === message.user?.id;
-    const canEdit = (!onlySenderCanEdit && channelCapabilities['update-any-message']) ||
-        (isMyMessage && channelCapabilities['update-own-message']);
+    const canEdit = !message.poll &&
+        ((!onlySenderCanEdit && channelCapabilities['update-any-message']) ||
+            (isMyMessage && channelCapabilities['update-own-message']));
     const canDelete = channelCapabilities['delete-any-message'] ||
         (isMyMessage && channelCapabilities['delete-own-message']);
     const canFlag = !isMyMessage && channelCapabilities['flag-message'];

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

@@ -13,3 +13,4 @@ export * from './QuotedMessage';
 export * from './renderText';
 export * from './types';
 export * from './utils';
+export type { TimestampProps } from './Timestamp';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+export declare const SimpleAttachmentSelector: () => React.JSX.Element;
+export type AttachmentSelectorModalContentProps = {
+    close: () => void;
+};
+export type AttachmentSelectorActionProps = {
+    closeMenu: () => void;
+    openModalForAction: (actionType: AttachmentSelectorAction['type']) => void;
+};
+export type AttachmentSelectorAction = {
+    ActionButton: React.ComponentType<AttachmentSelectorActionProps>;
+    type: 'uploadFile' | 'createPoll' | (string & {});
+    ModalContent?: React.ComponentType<AttachmentSelectorModalContentProps>;
+};
+export declare const DefaultAttachmentSelectorComponents: {
+    File({ closeMenu }: AttachmentSelectorActionProps): React.JSX.Element;
+    Poll({ closeMenu, openModalForAction }: AttachmentSelectorActionProps): React.JSX.Element;
+};
+export declare const defaultAttachmentSelectorActionSet: AttachmentSelectorAction[];
+export type AttachmentSelectorProps = {
+    attachmentSelectorActionSet?: AttachmentSelectorAction[];
+    getModalPortalDestination?: () => HTMLElement | null;
+};
+export declare const AttachmentSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachmentSelectorActionSet, getModalPortalDestination, }: AttachmentSelectorProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentSelector.js

@@ -0,0 +1,125 @@
+import { nanoid } from 'nanoid';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { UploadIcon as DefaultUploadIcon } from './icons';
+import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
+import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogMenuButton } from '../Dialog/DialogMenu';
+import { Modal } from '../Modal';
+import { PollCreationDialog as DefaultPollCreationDialog } from '../Poll';
+import { Portal } from '../Portal/Portal';
+import { UploadFileInput } from '../ReactFileUtilities';
+import { useChannelStateContext, useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { AttachmentSelectorContextProvider, useAttachmentSelectorContext, } from '../../context/AttachmentSelectorContext';
+export const SimpleAttachmentSelector = () => {
+    const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
+    const inputRef = useRef(null);
+    const [labelElement, setLabelElement] = useState(null);
+    const id = useMemo(() => nanoid(), []);
+    useEffect(() => {
+        if (!labelElement)
+            return;
+        const handleKeyUp = (event) => {
+            if (![' ', 'Enter'].includes(event.key) || !inputRef.current)
+                return;
+            event.preventDefault();
+            inputRef.current.click();
+        };
+        labelElement.addEventListener('keyup', handleKeyUp);
+        return () => {
+            labelElement.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [labelElement]);
+    return (React.createElement("div", { className: 'str-chat__file-input-container', "data-testid": 'file-upload-button' },
+        React.createElement(UploadFileInput, { id: id, ref: inputRef }),
+        React.createElement("label", { className: 'str-chat__file-input-label', htmlFor: id, ref: setLabelElement, tabIndex: 0 }, AttachmentSelectorInitiationButtonContents ? (React.createElement(AttachmentSelectorInitiationButtonContents, null)) : (React.createElement(FileUploadIcon, null)))));
+};
+const AttachmentSelectorMenuInitButtonIcon = () => {
+    const { AttachmentSelectorInitiationButtonContents, FileUploadIcon } = useComponentContext('SimpleAttachmentSelector');
+    if (AttachmentSelectorInitiationButtonContents) {
+        return React.createElement(AttachmentSelectorInitiationButtonContents, null);
+    }
+    if (FileUploadIcon) {
+        return React.createElement(FileUploadIcon, null);
+    }
+    return React.createElement("div", { className: 'str-chat__attachment-selector__menu-button__icon' });
+};
+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: () => {
+                if (fileInput)
+                    fileInput.click();
+                closeMenu();
+            } }, t('File')));
+    },
+    Poll({ closeMenu, openModalForAction }) {
+        const { t } = useTranslationContext();
+        return (React.createElement(DialogMenuButton, { className: 'str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button', onClick: () => {
+                openModalForAction('createPoll');
+                closeMenu();
+            } }, t('Poll')));
+    },
+};
+export const defaultAttachmentSelectorActionSet = [
+    { ActionButton: DefaultAttachmentSelectorComponents.File, type: 'uploadFile' },
+    {
+        ActionButton: DefaultAttachmentSelectorComponents.Poll,
+        type: 'createPoll',
+    },
+];
+const useAttachmentSelectorActionsFiltered = (original) => {
+    const { PollCreationDialog = DefaultPollCreationDialog } = useComponentContext();
+    const { channelCapabilities, channelConfig } = useChannelStateContext();
+    const { isThreadInput } = useMessageInputContext();
+    return original
+        .filter((action) => {
+        if (action.type === 'uploadFile' && !channelCapabilities['upload-file'])
+            return false;
+        if (action.type === 'createPoll' &&
+            (!channelConfig?.polls || isThreadInput || !channelCapabilities['send-poll']))
+            return false;
+        return true;
+    })
+        .map((action) => {
+        if (action.type === 'createPoll' && !action.ModalContent) {
+            return { ...action, ModalContent: PollCreationDialog };
+        }
+        return action;
+    });
+};
+export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelectorActionSet, getModalPortalDestination, }) => {
+    const { t } = useTranslationContext();
+    const { channelCapabilities } = useChannelStateContext();
+    const { isThreadInput } = useMessageInputContext();
+    const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);
+    const menuDialogId = `attachment-actions-menu${isThreadInput ? '-thread' : ''}`;
+    const menuDialog = useDialog({ id: menuDialogId });
+    const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
+    const [modalContentAction, setModalContentActionAction] = useState();
+    const openModal = useCallback((actionType) => {
+        const action = actions.find((a) => a.type === actionType);
+        if (!action?.ModalContent)
+            return;
+        setModalContentActionAction(action);
+    }, [actions]);
+    const closeModal = useCallback(() => setModalContentActionAction(undefined), []);
+    const [fileInput, setFileInput] = useState(null);
+    const menuButtonRef = useRef(null);
+    const getDefaultPortalDestination = useCallback(() => document.getElementById(CHANNEL_CONTAINER_ID), []);
+    if (actions.length === 0)
+        return null;
+    if (actions.length === 1 && actions[0].type === 'uploadFile')
+        return React.createElement(SimpleAttachmentSelector, null);
+    const ModalContent = modalContentAction?.ModalContent;
+    const modalIsOpen = !!ModalContent;
+    return (React.createElement(AttachmentSelectorContextProvider, { value: { fileInput } },
+        React.createElement("div", { className: 'str-chat__attachment-selector' },
+            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("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.js

@@ -12,7 +12,7 @@ export const EditMessageForm = () => {
         document.addEventListener('keydown', onKeyDown);
         return () => document.removeEventListener('keydown', onKeyDown);
     }, [clearEditingState]);
-    return (React.createElement("form", { className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
+    return (React.createElement("form", { autoComplete: 'off', className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
         React.createElement(MessageInputFlat, null),
         React.createElement("div", { className: 'str-chat__edit-message-form-options' },
             React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: clearEditingState }, t('Cancel')),

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

@@ -56,6 +56,8 @@ export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGeneri
     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<StreamChatGenerics, V>>;
+    /** 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;
     /** If true, the suggestion list will search all app users for an @mention, not just current channel members/watchers. Default: false. */

package/dist/components/MessageInput/MessageInput.js

@@ -7,6 +7,7 @@ import { useMessageInputState } from './hooks/useMessageInputState';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
+import { DialogManagerProvider } from '../../context';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
     const messageInputState = useMessageInputState(props);
@@ -24,13 +25,17 @@ const UnMemoizedMessageInput = (props) => {
     const { dragAndDropWindow } = useChannelStateContext();
     const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext('MessageInput');
     const Input = PropInput || ContextInput || MessageInputFlat;
+    const dialogManagerId = props.isThreadInput
+        ? 'message-input-dialog-manager-thread'
+        : 'message-input-dialog-manager';
     if (dragAndDropWindow)
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
             React.createElement(TriggerProvider, null,
                 React.createElement(Input, null))));
-    return (React.createElement(MessageInputProvider, { ...props },
-        React.createElement(TriggerProvider, null,
-            React.createElement(Input, null))));
+    return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
+        React.createElement(MessageInputProvider, { ...props },
+            React.createElement(TriggerProvider, null,
+                React.createElement(Input, null)))));
 };
 /**
  * A high level component that has provides all functionality to the Input it renders.

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,14 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { UploadButton } from '../ReactFileUtilities';
 import clsx from 'clsx';
 import { useDropzone } from 'react-dropzone';
-import { nanoid } from 'nanoid';
-import { UploadIcon as DefaultUploadIcon } from './icons';
+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 { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
-import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
@@ -21,7 +19,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
     const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, 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 { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, CooldownTimer = DefaultCooldownTimer, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
     const { channel } = useChatContext('MessageInputFlat');
@@ -29,7 +27,6 @@ export const MessageInputFlat = () => {
     const closePermissionDeniedNotification = useCallback(() => {
         setShowRecordingPermissionDeniedNotification(false);
     }, []);
-    const id = useMemo(() => nanoid(), []);
     const failedUploadsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
     const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
@@ -80,10 +77,7 @@ export const MessageInputFlat = () => {
                 isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
             displayQuotedMessage && React.createElement(QuotedMessagePreviewHeader, null),
             React.createElement("div", { className: 'str-chat__message-input-inner' },
-                React.createElement("div", { className: 'str-chat__file-input-container', "data-testid": 'file-upload-button' },
-                    React.createElement(UploadButton, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), className: 'str-chat__file-input', "data-testid": 'file-input', disabled: !isUploadEnabled || maxFilesLeft === 0, id: id, multiple: multipleUploads, onFileChange: uploadNewFiles }),
-                    React.createElement("label", { className: 'str-chat__file-input-label', htmlFor: id },
-                        React.createElement(FileUploadIcon, null))),
+                React.createElement(AttachmentSelector, null),
                 React.createElement("div", { className: 'str-chat__message-textarea-container' },
                     displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
                     isUploadEnabled &&

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
+import { CloseIcon } from './icons';
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
-import { CloseIcon } from './icons';
+import { Poll } from '../Poll';
+import { useChatContext } from '../../context/ChatContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
@@ -14,6 +16,7 @@ export const QuotedMessagePreviewHeader = () => {
             React.createElement(CloseIcon, null))));
 };
 export const QuotedMessagePreview = ({ quotedMessage, }) => {
+    const { client } = useChatContext();
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
     const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
@@ -24,10 +27,11 @@ export const QuotedMessagePreview = ({ quotedMessage, }) => {
     }, [quotedMessage.attachments]);
     if (!quotedMessageText && !quotedMessageAttachment)
         return null;
+    const poll = quotedMessage.poll_id && client.polls.fromState(quotedMessage.poll_id);
     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' },
+        React.createElement("div", { className: 'str-chat__quoted-message-bubble' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
             !!quotedMessageAttachment.length && (React.createElement(Attachment, { attachments: quotedMessageAttachment, isQuoted: true })),
             React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' },
-                React.createElement("p", null, quotedMessageText)))));
+                React.createElement("p", null, quotedMessageText)))))));
 };

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

@@ -1,6 +1,6 @@
 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, 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 { 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, isThreadInput, 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 linkPreviewsValue = Array.from(linkPreviews.values()).join();
     const mentionedUsersLength = mentioned_users.length;
@@ -31,6 +31,7 @@ export const useCreateMessageInputContext = (value) => {
         handleSubmit,
         hideSendButton,
         insertText,
+        isThreadInput,
         isUploadEnabled,
         linkPreviews,
         maxFilesLeft,
@@ -78,6 +79,7 @@ export const useCreateMessageInputContext = (value) => {
         handleSubmit,
         hideSendButton,
         isUploadEnabled,
+        isThreadInput,
         linkPreviewsValue,
         mentionedUsersLength,
         minRows,

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

@@ -1,7 +1,5 @@
 import { useCallback } from 'react';
-import { 
-// dataTransferItemsHaveFiles,
-dataTransferItemsToFiles, } from '../../ReactFileUtilities';
+import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
 import { SetLinkPreviewMode } from '../types';
 export const usePasteHandler = (uploadNewFiles, insertText, isUploadEnabled, findAndEnqueueURLsToEnrich) => {
     const onPaste = useCallback((clipboardEvent) => {
@@ -24,17 +22,16 @@ export const usePasteHandler = (uploadNewFiles, insertText, isUploadEnabled, fin
                 }
             }
             const fileLikes = await dataTransferItemsToFiles(Array.from(items));
-            if (fileLikes.length && isUploadEnabled) {
-                uploadNewFiles(fileLikes);
-                return;
-            }
-            // fallback to regular text paste
             if (plainTextPromise) {
                 const pastedText = await plainTextPromise;
                 insertText(pastedText);
                 findAndEnqueueURLsToEnrich?.(pastedText, SetLinkPreviewMode.UPSERT);
                 findAndEnqueueURLsToEnrich?.flush();
             }
+            else if (fileLikes.length && isUploadEnabled) {
+                uploadNewFiles(fileLikes);
+                return;
+            }
         })(clipboardEvent);
     }, [findAndEnqueueURLsToEnrich, insertText, isUploadEnabled, uploadNewFiles]);
     return { onPaste };

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

@@ -29,7 +29,10 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
             trimmedMessage === '____' ||
             trimmedMessage === '__' ||
             trimmedMessage === '****';
-        if (isEmptyMessage && numberOfUploads === 0 && attachments.length === 0)
+        if (isEmptyMessage &&
+            numberOfUploads === 0 &&
+            attachments.length === 0 &&
+            !customMessageData?.poll_id)
             return;
         const someAttachmentsUploading = attachments.some((att) => att.localMetadata?.uploadState === 'uploading');
         if (someAttachmentsUploading) {

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

@@ -1,3 +1,4 @@
+export * from './AttachmentSelector';
 export { AttachmentPreviewList } from './AttachmentPreviewList';
 export type { AttachmentPreviewListProps, FileAttachmentPreviewProps, ImageAttachmentPreviewProps, AttachmentPreviewProps, UnsupportedAttachmentPreviewProps, VoiceRecordingPreviewProps, } from './AttachmentPreviewList';
 export * from './CooldownTimer';

package/dist/components/MessageInput/index.js

@@ -1,3 +1,4 @@
+export * from './AttachmentSelector';
 export { AttachmentPreviewList } from './AttachmentPreviewList';
 export * from './CooldownTimer';
 export * from './DefaultTriggerProvider';