stream-chat-react 12.9.0 → 12.11.0

package/dist/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.js

@@ -5,8 +5,8 @@ const STATUSES_EXCLUDED_FROM_PREPEND = {
 };
 export function usePrependedMessagesCount(messages, hasDateSeparator) {
     const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    const firstMessageOnFirstLoadedPage = useRef();
-    const previousFirstMessageOnFirstLoadedPage = useRef();
+    const firstMessageOnFirstLoadedPage = useRef(undefined);
+    const previousFirstMessageOnFirstLoadedPage = useRef(undefined);
     const previousNumItemsPrepended = useRef(0);
     const numItemsPrepended = useMemo(() => {
         if (!messages || !messages.length) {
@@ -26,7 +26,8 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
         // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
         // not considered as prepended messages.
-        const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessage?.status && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]);
+        const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessage?.status &&
+            STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]);
         if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
             return previousNumItemsPrepended.current;
         }

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 export const useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }) => {
     const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
-    const scrollToBottomIfConfigured = useRef();
+    const scrollToBottomIfConfigured = useRef(undefined);
     scrollToBottomIfConfigured.current = (event) => {
         if (!scrollToLatestMessageOnFocus ||
             !newMessagesReceivedInBackground ||

package/dist/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.js

@@ -21,10 +21,14 @@ export const useUnreadMessagesNotificationVirtualized = ({ lastRead, showAlways,
         if (!(firstRenderedMessage && lastRenderedMessage))
             return;
         const scrolledBelowSeparator = !!lastRead &&
-            new Date(firstRenderedMessage.created_at).getTime() > lastRead.getTime();
+            new Date(firstRenderedMessage.created_at).getTime() >
+                lastRead.getTime();
         const scrolledAboveSeparator = !!lastRead &&
-            new Date(lastRenderedMessage.created_at).getTime() < lastRead.getTime();
-        setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
+            new Date(lastRenderedMessage.created_at).getTime() <
+                lastRead.getTime();
+        setShow(showAlways
+            ? scrolledBelowSeparator || scrolledAboveSeparator
+            : scrolledBelowSeparator);
     }, [lastRead, showAlways, unreadCount]);
     useEffect(() => {
         if (!unreadCount)

package/dist/components/MessageList/hooks/useMarkRead.d.ts

@@ -1,8 +1,7 @@
-import { DefaultStreamChatGenerics } from '../../../types';
+import type { DefaultStreamChatGenerics } from '../../../types';
 type UseMarkReadParams = {
     isMessageListScrolledToBottom: boolean;
     messageListIsThread: boolean;
-    unreadCount: number;
     wasMarkedUnread?: boolean;
 };
 /**
@@ -12,8 +11,7 @@ type UseMarkReadParams = {
  * 3. the channel was not marked unread by the user
  * @param isMessageListScrolledToBottom
  * @param messageListIsThread
- * @param unreadCount
  * @param wasChannelMarkedUnread
  */
-export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }: UseMarkReadParams) => void;
+export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }: UseMarkReadParams) => void;
 export {};

package/dist/components/MessageList/hooks/useMarkRead.js

@@ -1,5 +1,10 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useChannelActionContext, useChannelStateContext, useChatContext, } from '../../../context';
+const hasReadLastMessage = (channel, userId) => {
+    const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
+    const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
+    return latestMessageIdInChannel === lastReadMessageIdServer;
+};
 /**
  * Takes care of marking a channel read. The channel is read only if all the following applies:
  * 1. the message list is not rendered in a thread
@@ -7,29 +12,25 @@ import { useChannelActionContext, useChannelStateContext, useChatContext, } from
  * 3. the channel was not marked unread by the user
  * @param isMessageListScrolledToBottom
  * @param messageListIsThread
- * @param unreadCount
  * @param wasChannelMarkedUnread
  */
-export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, unreadCount, wasMarkedUnread, }) => {
+export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }) => {
     const { client } = useChatContext('useMarkRead');
     const { markRead, setChannelUnreadUiState } = useChannelActionContext('useMarkRead');
     const { channel } = useChannelStateContext('useMarkRead');
-    const previousRenderMessageListScrolledToBottom = useRef(isMessageListScrolledToBottom);
     useEffect(() => {
-        const shouldMarkRead = (unreadMessages) => !document.hidden &&
+        const shouldMarkRead = () => !document.hidden &&
             !wasMarkedUnread &&
             !messageListIsThread &&
             isMessageListScrolledToBottom &&
-            unreadMessages > 0;
+            client.user?.id &&
+            !hasReadLastMessage(channel, client.user.id);
         const onVisibilityChange = () => {
-            if (shouldMarkRead(channel.countUnread()))
+            if (shouldMarkRead())
                 markRead();
         };
         const handleMessageNew = (event) => {
-            const isOwnMessage = event.user?.id && event.user.id === client.user?.id;
             const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
-            if (isOwnMessage)
-                return;
             if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {
                 setChannelUnreadUiState((prev) => {
                     const previousUnreadCount = prev?.unread_messages ?? 0;
@@ -44,17 +45,15 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                     };
                 });
             }
-            else if (mainChannelUpdated && shouldMarkRead(channel.countUnread())) {
+            else if (mainChannelUpdated && shouldMarkRead()) {
                 markRead();
             }
         };
         channel.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
-        const hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
-            isMessageListScrolledToBottom;
-        if (hasScrolledToBottom && shouldMarkRead(channel.countUnread()))
+        if (shouldMarkRead()) {
             markRead();
-        previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
+        }
         return () => {
             channel.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
@@ -66,7 +65,6 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
         markRead,
         messageListIsThread,
         setChannelUnreadUiState,
-        unreadCount,
         wasMarkedUnread,
     ]);
 };

package/dist/components/MessageList/utils.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-continue */
 import { nanoid } from 'nanoid';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { isMessageEdited } from '../Message/utils';
@@ -31,20 +30,29 @@ export const processMessages = (params) => {
         if (hideDeletedMessages && message.type === 'deleted') {
             continue;
         }
-        if (setGiphyPreviewMessage && message.type === 'ephemeral' && message.command === 'giphy') {
+        if (setGiphyPreviewMessage &&
+            message.type === 'ephemeral' &&
+            message.command === 'giphy') {
             ephemeralMessagePresent = true;
             setGiphyPreviewMessage(message);
             continue;
         }
         const changes = [];
-        const messageDate = (message.created_at && isDate(message.created_at) && message.created_at.toDateString()) || '';
+        const messageDate = (message.created_at &&
+            isDate(message.created_at) &&
+            message.created_at.toDateString()) ||
+            '';
         const previousMessage = messages[i - 1];
         let prevMessageDate = messageDate;
-        if (enableDateSeparator && previousMessage?.created_at && isDate(previousMessage.created_at)) {
+        if (enableDateSeparator &&
+            previousMessage?.created_at &&
+            isDate(previousMessage.created_at)) {
             prevMessageDate = previousMessage.created_at.toDateString();
         }
         if (!unread && !hideNewMessageSeparator) {
-            unread = (lastRead && message.created_at && new Date(lastRead) < message.created_at) || false;
+            unread =
+                (lastRead && message.created_at && new Date(lastRead) < message.created_at) ||
+                    false;
             // do not show date separator for current user's messages
             if (enableDateSeparator && unread && message.user?.id !== userId) {
                 changes.push({
@@ -155,7 +163,9 @@ export const insertIntro = (messages, headerPosition) => {
     // else loop over the messages
     for (let i = 0; i < messages.length; i += 1) {
         const message = messages[i];
-        const messageTime = message.created_at && isDate(message.created_at) ? message.created_at.getTime() : null;
+        const messageTime = message.created_at && isDate(message.created_at)
+            ? message.created_at.getTime()
+            : null;
         const nextMessage = messages[i + 1];
         const nextMessageTime = nextMessage.created_at && isDate(nextMessage.created_at)
             ? nextMessage.created_at.getTime()
@@ -199,7 +209,8 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
         (maxTimeBetweenGroupedMessages !== undefined &&
             previousMessage.created_at &&
             message.created_at &&
-            new Date(message.created_at).getTime() - new Date(previousMessage.created_at).getTime() >
+            new Date(message.created_at).getTime() -
+                new Date(previousMessage.created_at).getTime() >
                 maxTimeBetweenGroupedMessages);
     const isBottomMessage = !nextMessage ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
@@ -209,12 +220,14 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
         nextMessage.attachments?.length !== 0 ||
         message.user?.id !== nextMessage.user?.id ||
         nextMessage.deleted_at ||
-        (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
+        (nextMessage.reaction_groups &&
+            Object.keys(nextMessage.reaction_groups).length > 0) ||
         isMessageEdited(message) ||
         (maxTimeBetweenGroupedMessages !== undefined &&
             nextMessage.created_at &&
             message.created_at &&
-            new Date(nextMessage.created_at).getTime() - new Date(message.created_at).getTime() >
+            new Date(nextMessage.created_at).getTime() -
+                new Date(message.created_at).getTime() >
                 maxTimeBetweenGroupedMessages);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')
@@ -239,7 +252,9 @@ export const hasMoreMessagesProbably = (returnedCountMessages, limit) => returne
 // @deprecated
 export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages < limit;
 export function isDateSeparatorMessage(message) {
-    return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
+    return (message.customType === CUSTOM_MESSAGE_TYPE.date &&
+        !!message.date &&
+        isDate(message.date));
 }
 export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
     const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
@@ -247,5 +262,7 @@ export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage,
     const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;
     const previousMessageIsLastRead = !!lastReadMessageId && lastReadMessageId === previousMessage?.id;
     return (firstUnreadMessageId === message.id ||
-        (!!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead)));
+        (!!unreadMessageCount &&
+            messageIsUnread &&
+            (isFirstMessage || previousMessageIsLastRead)));
 };

package/dist/components/Modal/Modal.d.ts

@@ -7,4 +7,4 @@ export type ModalProps = {
     /** Callback handler for closing of modal. */
     onClose?: (event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 };
-export declare const Modal: ({ children, className, onClose, open }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;
+export declare const Modal: ({ children, className, onClose, open, }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;

package/dist/components/Modal/Modal.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { CloseIconRound } from './icons';
 import { useTranslationContext } from '../../context';
-export const Modal = ({ children, className, onClose, open }) => {
+export const Modal = ({ children, className, onClose, open, }) => {
     const { t } = useTranslationContext('Modal');
     const innerRef = useRef(null);
     const closeRef = useRef(null);

package/dist/components/Modal/ModalHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
 export const ModalHeader = ({ className, close, goBack, title }) => (React.createElement("div", { className: clsx('str-chat__modal-header', className) },
-    goBack && React.createElement("button", { className: 'str-chat__modal-header__go-back-button', onClick: goBack }),
+    goBack && (React.createElement("button", { className: 'str-chat__modal-header__go-back-button', onClick: goBack })),
     React.createElement("div", { className: 'str-chat__modal-header__title' }, title),
     close && React.createElement("button", { className: 'str-chat__modal-header__close-button', onClick: close })));

package/dist/components/Poll/Poll.js

@@ -3,6 +3,6 @@ import { PollContent as DefaultPollContent } from './PollContent';
 import { QuotedPoll as DefaultQuotedPoll } from './QuotedPoll';
 import { PollProvider, useComponentContext } from '../../context';
 export const Poll = ({ isQuoted, poll, }) => {
-    const { PollContent = DefaultPollContent, QuotedPoll = DefaultQuotedPoll, } = useComponentContext();
+    const { PollContent = DefaultPollContent, QuotedPoll = DefaultQuotedPoll } = useComponentContext();
     return poll ? (React.createElement(PollProvider, { poll: poll }, isQuoted ? React.createElement(QuotedPoll, null) : React.createElement(PollContent, null))) : null;
 };

package/dist/components/Poll/PollActions/PollActions.js

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { PollAction } from './PollAction';
-import { AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
+import { AddCommentForm as DefaultAddCommentForm, } from './AddCommentForm';
 import { SuggestPollOptionForm as DefaultSuggestPollOptionForm, } from './SuggestPollOptionForm';
-import { EndPollDialog as DefaultEndPollDialog } from './EndPollDialog';
-import { PollAnswerList as DefaultPollAnswerList } from './PollAnswerList';
+import { EndPollDialog as DefaultEndPollDialog, } from './EndPollDialog';
+import { PollAnswerList as DefaultPollAnswerList, } from './PollAnswerList';
 import { PollOptionsFullList as DefaultPollOptionsFullList, } from './PollOptionsFullList';
 import { PollResults as DefaultPollResults } from './PollResults';
 import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
@@ -33,7 +33,9 @@ export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDia
                 count: options.length,
             }), closeModal: closeModal, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
             React.createElement(PollOptionsFullList, { close: closeModal }))),
-        !is_closed && allow_user_suggested_options && options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: 'str-chat__suggest-poll-option-modal', modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
+        !is_closed &&
+            allow_user_suggested_options &&
+            options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: 'str-chat__suggest-poll-option-modal', modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
             React.createElement(SuggestPollOptionForm, { close: closeModal, messageId: message.id }))),
         !is_closed && allow_answers && (React.createElement(PollAction, { buttonText: ownAnswer ? t('Update your comment') : t('Add a comment'), closeModal: closeModal, modalClassName: 'str-chat__add-poll-answer-modal', modalIsOpen: modalOpen === 'add-comment', openModal: () => setModalOpen('add-comment') },
             React.createElement(AddCommentForm, { close: closeModal, messageId: message.id }))),

package/dist/components/Poll/PollActions/PollAnswerList.js

@@ -14,7 +14,7 @@ export const PollAnswerList = ({ close, onUpdateOwnAnswerClick, }) => {
     const { t } = useTranslationContext();
     const { poll } = usePollContext();
     const { is_closed, ownAnswer } = useStateStore(poll.state, pollStateSelector);
-    const { answers, error, hasNextPage, loading, loadMore, } = usePollAnswerPagination();
+    const { answers, error, hasNextPage, loading, loadMore } = usePollAnswerPagination();
     return (React.createElement("div", { className: 'str-chat__modal__poll-answer-list' },
         React.createElement(ModalHeader, { close: close, title: t('Poll comments') }),
         React.createElement("div", { className: 'str-chat__modal__poll-answer-list__body' },

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.js

@@ -6,7 +6,7 @@ import { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/Infini
 import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
 export const PollOptionVotesList = ({ option, }) => {
     const paginationParams = useMemo(() => ({ filter: { option_id: option.id } }), [option.id]);
-    const { error, hasNextPage, loading, loadMore, votes, } = usePollOptionVotesPagination({
+    const { error, hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({
         paginationParams,
     });
     return (React.createElement("div", { className: 'str-chat__poll-option str-chat__poll-option--full-vote-list' },

package/dist/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
 import { PollVoteListing } from '../../PollVote';
 import { useStateStore } from '../../../../store';
-import { useChannelStateContext, usePollContext, useTranslationContext } from '../../../../context';
-const pollStateSelector = (nextValue) => ({ latest_votes_by_option: nextValue.latest_votes_by_option });
+import { useChannelStateContext, usePollContext, useTranslationContext, } from '../../../../context';
+const pollStateSelector = (nextValue) => ({
+    latest_votes_by_option: nextValue.latest_votes_by_option,
+});
 export const PollOptionWithLatestVotes = ({ countVotesPreview = 5, option, showAllVotes, }) => {
     const { t } = useTranslationContext();
     const { channelCapabilities = {} } = useChannelStateContext('PollOptionWithLatestVotes');

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -26,7 +26,8 @@ export const PollResults = ({ close, }) => {
         React.createElement("div", { className: 'str-chat__modal__poll-results__body' },
             React.createElement("div", { className: 'str-chat__modal__poll-results__title' }, name),
             React.createElement("div", { className: 'str-chat__modal__poll-results__option-list' }, options
-                .sort((next, current) => (vote_counts_by_option[current.id] ?? 0) >= (vote_counts_by_option[next.id] ?? 0)
+                .sort((next, current) => (vote_counts_by_option[current.id] ?? 0) >=
+                (vote_counts_by_option[next.id] ?? 0)
                 ? 1
                 : -1)
                 .map((option) => (React.createElement(PollOptionWithLatestVotes, { key: `poll-option-${option.id}`, option: option, showAllVotes: () => setOptionToView(option) })))))))));

package/dist/components/Poll/PollContent.js

@@ -8,7 +8,7 @@ import { useComponentContext, usePollContext } from '../../context';
 import { useStateStore } from '../../store';
 const pollStateSelectorPollContent = (nextValue) => ({ is_closed: nextValue.is_closed });
 export const PollContent = () => {
-    const { PollHeader = DefaultPollHeader, PollActions = DefaultPollActions, } = useComponentContext();
+    const { PollActions = DefaultPollActions, PollHeader = DefaultPollHeader } = useComponentContext();
     const { poll } = usePollContext();
     const { is_closed } = useStateStore(poll.state, pollStateSelectorPollContent);
     return (React.createElement("div", { className: clsx('str-chat__poll', { 'str-chat__poll--closed': is_closed }) },

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.d.ts

@@ -6,4 +6,4 @@ export type OptionFieldSetProps = {
     setErrors: (fn: (prev: OptionErrors) => OptionErrors) => void;
     setState: (fn: (prev: PollFormState) => PollFormState) => void;
 };
-export declare const OptionFieldSet: ({ errors, options, setErrors, setState }: OptionFieldSetProps) => React.JSX.Element;
+export declare const OptionFieldSet: ({ errors, options, setErrors, setState, }: OptionFieldSetProps) => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.js

@@ -6,7 +6,7 @@ import { FieldError } from '../../Form/FieldError';
 import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
 import { useTranslationContext } from '../../../context';
 const VALIDATION_ERRORS = { 'Option already exists': true };
-export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
+export const OptionFieldSet = ({ errors, options, setErrors, setState, }) => {
     const { t } = useTranslationContext('OptionFieldSet');
     const findOptionDuplicate = (sourceOption) => {
         const isDuplicateFilter = (option) => !!sourceOption.text.trim() && // do not include empty options into consideration
@@ -15,7 +15,10 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
         return options.find(isDuplicateFilter);
     };
     const onSetNewOrder = useCallback((newOrder) => {
-        setState((prev) => ({ ...prev, options: newOrder.map((index) => prev.options[index]) }));
+        setState((prev) => ({
+            ...prev,
+            options: newOrder.map((index) => prev.options[index]),
+        }));
     }, [setState]);
     const draggable = options.length > 1;
     return (React.createElement("fieldset", { className: 'str-chat__form__field str-chat__form__input-fieldset' },
@@ -38,7 +41,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
                             const shouldAddEmptyOption = prev.options.length < MAX_POLL_OPTIONS &&
                                 (!prev.options ||
                                     (prev.options.slice(i + 1).length === 0 && !!e.target.value));
-                            const shouldRemoveOption = prev.options && prev.options.slice(i + 1).length > 0 && !e.target.value;
+                            const shouldRemoveOption = prev.options &&
+                                prev.options.slice(i + 1).length > 0 &&
+                                !e.target.value;
                             const optionListHead = prev.options ? prev.options.slice(0, i) : [];
                             const optionListTail = shouldAddEmptyOption
                                 ? [{ id: nanoid(), text: '' }]
@@ -55,7 +60,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
                                 ...prev,
                                 options: [
                                     ...optionListHead,
-                                    ...(shouldRemoveOption ? [] : [{ ...option, text: e.target.value }]),
+                                    ...(shouldRemoveOption
+                                        ? []
+                                        : [{ ...option, text: e.target.value }]),
                                     ...optionListTail,
                                 ],
                             };

package/dist/components/Poll/PollCreationDialog/PollCreationDialog.js

@@ -64,20 +64,29 @@ export const PollCreationDialog = ({ close }) => {
                         React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
                             React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: multipleAnswerCountError }),
                             React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
-                                    const isValidValue = !e.target.value || e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                                    const isValidValue = !e.target.value ||
+                                        e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
                                     if (!isValidValue) {
                                         setMultipleAnswerCountError(t('Type a number from 2 to 10'));
                                     }
                                     else if (multipleAnswerCountError) {
                                         setMultipleAnswerCountError(undefined);
                                     }
-                                    setState((prev) => ({ ...prev, max_votes_allowed: e.target.value }));
+                                    setState((prev) => ({
+                                        ...prev,
+                                        max_votes_allowed: e.target.value,
+                                    }));
                                 }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: state.max_votes_allowed }))))),
                 React.createElement(SimpleSwitchField, { checked: state.voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => setState((prev) => ({
                         ...prev,
-                        voting_visibility: (e.target.checked ? 'anonymous' : 'public'),
+                        voting_visibility: (e.target.checked
+                            ? 'anonymous'
+                            : 'public'),
+                    })) }),
+                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({
+                        ...prev,
+                        allow_user_suggested_options: e.target.checked,
                     })) }),
-                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({ ...prev, allow_user_suggested_options: e.target.checked })) }),
                 React.createElement(SimpleSwitchField, { checked: state.allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => setState((prev) => ({ ...prev, allow_answers: e.target.checked })) }))),
         React.createElement(PollCreationDialogControls, { close: close, errors: [
                 ...(nameError ?? []),

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
-import { useChatContext, useMessageInputContext, useTranslationContext } from '../../../context';
+import { useChatContext, useMessageInputContext, useTranslationContext, } from '../../../context';
 export const PollCreationDialogControls = ({ close, errors, state, }) => {
     const { client } = useChatContext();
     const { t } = useTranslationContext('PollCreationDialogControls');
@@ -10,7 +10,8 @@ export const PollCreationDialogControls = ({ close, errors, state, }) => {
         const hasName = !!state.name;
         const maxVotesAllowedNumber = parseInt(state.max_votes_allowed?.match(VALID_MAX_VOTES_VALUE_REGEX)?.[0] || '');
         const validMaxVotesAllowed = state.max_votes_allowed === '' ||
-            (!!maxVotesAllowedNumber && (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
+            (!!maxVotesAllowedNumber &&
+                (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
         const noErrors = errors.length === 0;
         return hasAtLeastOneOption && hasName && validMaxVotesAllowed && noErrors;
     };
@@ -24,7 +25,9 @@ export const PollCreationDialogControls = ({ close, errors, state, }) => {
                         max_votes_allowed: state.max_votes_allowed
                             ? parseInt(state.max_votes_allowed)
                             : undefined,
-                        options: state.options?.filter((o) => o.text).map((o) => ({ text: o.text })),
+                        options: state.options
+                            ?.filter((o) => o.text)
+                            .map((o) => ({ text: o.text })),
                     });
                     pollId = poll.id;
                 }

package/dist/components/Poll/PollOptionList.js

@@ -5,7 +5,7 @@ import { useStateStore } from '../../store';
 import { useComponentContext, usePollContext } from '../../context';
 const pollStateSelector = (nextValue) => ({ options: nextValue.options });
 export const PollOptionList = ({ optionsDisplayCount, }) => {
-    const { PollOptionSelector = DefaultPollOptionSelector, } = useComponentContext();
+    const { PollOptionSelector = DefaultPollOptionSelector } = useComponentContext();
     const { poll } = usePollContext();
     const { options } = useStateStore(poll.state, pollStateSelector);
     return (React.createElement("div", { className: clsx('str-chat__poll-option-list', {

package/dist/components/Poll/PollOptionSelector.js

@@ -24,7 +24,9 @@ export const PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbos
     const { poll } = usePollContext();
     const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility, } = useStateStore(poll.state, pollStateSelector);
     const canCastVote = channelCapabilities['cast-poll-vote'] && !is_closed;
-    const winningOptionCount = maxVotedOptionIds[0] ? vote_counts_by_option[maxVotedOptionIds[0]] : 0;
+    const winningOptionCount = maxVotedOptionIds[0]
+        ? vote_counts_by_option[maxVotedOptionIds[0]]
+        : 0;
     const toggleVote = useMemo(() => debounce(() => {
         if (!canCastVote)
             return;
@@ -45,9 +47,14 @@ export const PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbos
                     .slice(0, displayAvatarCount)
                     .map(({ user }) => (React.createElement(Avatar, { image: user?.image, key: `poll-option-${option.id}-avatar-${user?.id}`, name: user?.name }))))),
             React.createElement("div", { className: 'str-chat__poll-option-vote-count' }, voteCountVerbose
-                ? t('{{count}} votes', { count: vote_counts_by_option[option.id] ?? 0 })
-                : vote_counts_by_option[option.id] ?? 0)),
-        React.createElement(AmountBar, { amount: (winningOptionCount && (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100, className: clsx('str-chat__poll-option__votes-bar', {
-                'str-chat__poll-option__votes-bar--winner': is_closed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id,
+                ? t('{{count}} votes', {
+                    count: vote_counts_by_option[option.id] ?? 0,
+                })
+                : (vote_counts_by_option[option.id] ?? 0))),
+        React.createElement(AmountBar, { amount: (winningOptionCount &&
+                (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100, className: clsx('str-chat__poll-option__votes-bar', {
+                'str-chat__poll-option__votes-bar--winner': is_closed &&
+                    maxVotedOptionIds.length === 1 &&
+                    maxVotedOptionIds[0] === option.id,
             }) })));
 };

package/dist/components/Poll/hooks/useManagePollVotesRealtime.js

@@ -11,16 +11,21 @@ export function useManagePollVotesRealtime(managedVoteType, cursorPaginatorState
                 return;
             const isAnswer = isVoteAnswer(event.poll_vote);
             if ((managedVoteType === 'answer' && !isAnswer) ||
-                (managedVoteType === 'vote' && (isAnswer || event.poll_vote.option_id !== optionId)))
+                (managedVoteType === 'vote' &&
+                    (isAnswer || event.poll_vote.option_id !== optionId)))
                 return;
             if (event.type === 'poll.vote_removed') {
-                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+                setVotesInRealtime((prev) => event.poll_vote
+                    ? prev.filter((vote) => vote.id !== event.poll_vote.id)
+                    : prev);
             }
             if (event.type === 'poll.vote_changed') {
-                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+                setVotesInRealtime((prev) => event.poll_vote
+                    ? prev.filter((vote) => vote.id !== event.poll_vote.id)
+                    : prev);
             }
             if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {
-                setVotesInRealtime((prev) => (event.poll_vote ? [event.poll_vote, ...prev] : prev));
+                setVotesInRealtime((prev) => event.poll_vote ? [event.poll_vote, ...prev] : prev);
             }
         };
         const voteCastedSubscription = client.on('poll.vote_casted', handleVoteEvent);

package/dist/components/Poll/hooks/usePollAnswerPagination.js

@@ -3,13 +3,19 @@ import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
 import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { usePollContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+const paginationStateSelector = (state) => [
+    state.error,
+    state.hasNextPage,
+    state.loading,
+];
 export const usePollAnswerPagination = ({ paginationParams } = {}) => {
     const { poll } = usePollContext();
     const paginationFn = useCallback(async (next) => {
         const { next: newNext, votes } = await poll.queryAnswers({
             filter: paginationParams?.filter,
-            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            options: !next
+                ? paginationParams?.options
+                : { ...paginationParams?.options, next },
             sort: { created_at: -1, ...paginationParams?.sort },
         });
         return { items: votes, next: newNext };

package/dist/components/Poll/hooks/usePollOptionVotesPagination.js

@@ -3,13 +3,19 @@ import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
 import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { useStateStore } from '../../../store';
 import { usePollContext } from '../../../context';
-const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+const paginationStateSelector = (state) => [
+    state.error,
+    state.hasNextPage,
+    state.loading,
+];
 export const usePollOptionVotesPagination = ({ paginationParams, }) => {
     const { poll } = usePollContext();
     const paginationFn = useCallback(async (next) => {
         const { next: newNext, votes } = await poll.queryOptionVotes({
             filter: paginationParams.filter,
-            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            options: !next
+                ? paginationParams?.options
+                : { ...paginationParams?.options, next },
             sort: { created_at: -1, ...paginationParams?.sort },
         });
         return { items: votes, next: newNext };

package/dist/components/ReactFileUtilities/FileIcon/mimeTypes.d.ts

@@ -1,5 +1,5 @@
 export type GeneralType = 'audio/' | 'video/' | 'image/' | 'text/';
-export type SupportedMimeType = typeof wordMimeTypes[number] | typeof excelMimeTypes[number] | typeof powerpointMimeTypes[number] | typeof archiveFileTypes[number] | typeof codeFileTypes[number];
+export type SupportedMimeType = (typeof wordMimeTypes)[number] | (typeof excelMimeTypes)[number] | (typeof powerpointMimeTypes)[number] | (typeof archiveFileTypes)[number] | (typeof codeFileTypes)[number];
 export declare const wordMimeTypes: string[];
 export declare const excelMimeTypes: string[];
 export declare const powerpointMimeTypes: string[];

package/dist/components/ReactFileUtilities/ImageDropzone.js

@@ -12,7 +12,9 @@ export const ImageDropzone = ({ accept: acceptedFiles = [], children, disabled,
             handleFiles(accepted);
         }
     }, [handleFiles]);
-    const accept = useMemo(() => (typeof acceptedFiles === 'string' ? acceptedFiles.split(',') : acceptedFiles).reduce((mediaTypeMap, mediaType) => {
+    const accept = useMemo(() => (typeof acceptedFiles === 'string'
+        ? acceptedFiles.split(',')
+        : acceptedFiles).reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
         return mediaTypeMap;
     }, {}), [acceptedFiles]);