stream-chat-react 12.14.0 → 13.0.0-rc.1

package/dist/components/MessageList/utils.js

@@ -16,7 +16,7 @@ import { isDate } from '../../i18n';
  *
  * The only required params are messages and userId, the rest are config params:
  *
- * @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
+ * @return {LocalMessage[]} Transformed list of messages
  */
 export const processMessages = (params) => {
     const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
@@ -70,7 +70,7 @@ export const processMessages = (params) => {
                 (hideDeletedMessages &&
                     previousMessage?.type === 'deleted' &&
                     lastDateSeparator !== messageDate)) &&
-            changes[changes.length - 1]?.customType !== CUSTOM_MESSAGE_TYPE.date // do not show two date separators in a row)
+            !isDateSeparatorMessage(changes[changes.length - 1]) // do not show two date separators in a row)
         ) {
             lastDateSeparator = messageDate;
             changes.push({
@@ -96,6 +96,10 @@ export const processMessages = (params) => {
     }
     return newMessages;
 };
+export const makeIntroMessage = () => ({
+    customType: CUSTOM_MESSAGE_TYPE.intro,
+    id: nanoid(),
+});
 export const makeDateMessageId = (date) => {
     let idSuffix;
     try {
@@ -147,9 +151,7 @@ export const getReadStates = (messages, read = {}, returnAllReadData) => {
 };
 export const insertIntro = (messages, headerPosition) => {
     const newMessages = messages;
-    const intro = {
-        customType: CUSTOM_MESSAGE_TYPE.intro,
-    };
+    const intro = makeIntroMessage();
     // if no headerPosition is set, HeaderComponent will go at the top
     if (!headerPosition) {
         newMessages.unshift(intro);
@@ -162,19 +164,17 @@ 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()
+        const messageTime = isDate(messages[i].created_at)
+            ? messages[i].created_at.getTime()
             : null;
-        const nextMessage = messages[i + 1];
-        const nextMessageTime = nextMessage.created_at && isDate(nextMessage.created_at)
-            ? nextMessage.created_at.getTime()
+        const nextMessageTime = isDate(messages[i + 1].created_at)
+            ? messages[i + 1].created_at.getTime()
             : null;
         // header position is smaller than message time so comes after;
         if (messageTime && messageTime < headerPosition) {
             // if header position is also smaller than message time continue;
             if (nextMessageTime && nextMessageTime < headerPosition) {
-                if (messages[i + 1] && messages[i + 1].customType === CUSTOM_MESSAGE_TYPE.date)
+                if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1]))
                     continue;
                 if (!nextMessageTime) {
                     newMessages.push(intro);
@@ -190,15 +190,13 @@ export const insertIntro = (messages, headerPosition) => {
     return newMessages;
 };
 export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) => {
-    if (message.customType === CUSTOM_MESSAGE_TYPE.date)
-        return '';
-    if (message.customType === CUSTOM_MESSAGE_TYPE.intro)
+    if (isDateSeparatorMessage(message) || isIntroMessage(message))
         return '';
     if (noGroupByUser || message.attachments?.length !== 0)
         return 'single';
     const isTopMessage = !previousMessage ||
-        previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
-        previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
+        isIntroMessage(previousMessage) ||
+        isDateSeparatorMessage(previousMessage) ||
         previousMessage.type === 'system' ||
         previousMessage.type === 'error' ||
         previousMessage.attachments?.length !== 0 ||
@@ -213,8 +211,8 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
                 new Date(previousMessage.created_at).getTime() >
                 maxTimeBetweenGroupedMessages);
     const isBottomMessage = !nextMessage ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
+        isIntroMessage(nextMessage) ||
+        isDateSeparatorMessage(nextMessage) ||
         nextMessage.type === 'system' ||
         nextMessage.type === 'error' ||
         nextMessage.attachments?.length !== 0 ||
@@ -251,11 +249,18 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
 export const hasMoreMessagesProbably = (returnedCountMessages, limit) => returnedCountMessages >= limit;
 // @deprecated
 export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages < limit;
+export function isIntroMessage(message) {
+    return message.customType === CUSTOM_MESSAGE_TYPE.intro;
+}
 export function isDateSeparatorMessage(message) {
-    return (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-        !!message.date &&
+    return (message !== null &&
+        typeof message === 'object' &&
+        message.customType === CUSTOM_MESSAGE_TYPE.date &&
         isDate(message.date));
 }
+export function isLocalMessage(message) {
+    return !isDateSeparatorMessage(message) && !isIntroMessage(message);
+}
 export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
     // prevent showing unread indicator in threads
     if (message.parent_id)

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

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type ModalProps = {
     /** If true, modal is opened or visible. */
     open: boolean;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Poll as PollClass } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const Poll: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isQuoted, poll, }: {
-    poll: PollClass<StreamChatGenerics>;
+export declare const Poll: ({ isQuoted, poll }: {
+    poll: PollClass;
     isQuoted?: boolean;
 }) => React.JSX.Element | null;

package/dist/components/Poll/Poll.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { PollContent as DefaultPollContent } from './PollContent';
 import { QuotedPoll as DefaultQuotedPoll } from './QuotedPoll';
 import { PollProvider, useComponentContext } from '../../context';
-export const Poll = ({ isQuoted, poll, }) => {
+export const Poll = ({ isQuoted, poll }) => {
     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/AddCommentForm.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type AddCommentFormProps = {
     close: () => void;
     messageId: string;
 };
-export declare const AddCommentForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: AddCommentFormProps) => React.JSX.Element;
+export declare const AddCommentForm: ({ close, messageId }: AddCommentFormProps) => React.JSX.Element;

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

@@ -2,8 +2,10 @@ import React from 'react';
 import { FormDialog } from '../../Dialog/FormDialog';
 import { useStateStore } from '../../../store';
 import { usePollContext, useTranslationContext } from '../../../context';
-const pollStateSelector = (nextValue) => ({ ownAnswer: nextValue.ownAnswer });
-export const AddCommentForm = ({ close, messageId, }) => {
+const pollStateSelector = (nextValue) => ({
+    ownAnswer: nextValue.ownAnswer,
+});
+export const AddCommentForm = ({ close, messageId }) => {
     const { t } = useTranslationContext('AddCommentForm');
     const { poll } = usePollContext();
     const { ownAnswer } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollActions/EndPollDialog.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type EndPollDialogProps = {
     close: () => void;
 };
-export declare const EndPollDialog: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: EndPollDialogProps) => React.JSX.Element;
+export declare const EndPollDialog: ({ close }: EndPollDialogProps) => React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import { PromptDialog } from '../../Dialog/PromptDialog';
 import React from 'react';
 import { usePollContext, useTranslationContext } from '../../../context';
-export const EndPollDialog = ({ close, }) => {
+export const EndPollDialog = ({ close }) => {
     const { t } = useTranslationContext('SuggestPollOptionForm');
     const { poll } = usePollContext();
     return (React.createElement(PromptDialog, { actions: [

package/dist/components/Poll/PollActions/PollAction.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type PollActionProps = {
     buttonText: string;
     closeModal: () => void;

package/dist/components/Poll/PollActions/PollActions.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { AddCommentFormProps } from './AddCommentForm';
-import { SuggestPollOptionFormProps } from './SuggestPollOptionForm';
-import { EndPollDialogProps } from './EndPollDialog';
-import { PollAnswerListProps } from './PollAnswerList';
-import { FullPollOptionsListingProps } from './PollOptionsFullList';
-import { PollResultsProps } from './PollResults';
-import type { DefaultStreamChatGenerics } from '../../../types';
+import type { AddCommentFormProps } from './AddCommentForm';
+import type { SuggestPollOptionFormProps } from './SuggestPollOptionForm';
+import type { EndPollDialogProps } from './EndPollDialog';
+import type { PollAnswerListProps } from './PollAnswerList';
+import type { FullPollOptionsListingProps } from './PollOptionsFullList';
+import type { PollResultsProps } from './PollResults';
 export type PollActionsProps = {
     AddCommentForm?: React.ComponentType<AddCommentFormProps>;
     EndPollDialog?: React.ComponentType<EndPollDialogProps>;
@@ -14,4 +13,4 @@ export type PollActionsProps = {
     PollResults?: React.ComponentType<PollResultsProps>;
     SuggestPollOptionForm?: React.ComponentType<SuggestPollOptionFormProps>;
 };
-export declare const PollActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ AddCommentForm, EndPollDialog, PollAnswerList, PollOptionsFullList, PollResults, SuggestPollOptionForm, }: PollActionsProps) => React.JSX.Element;
+export declare const PollActions: ({ AddCommentForm, EndPollDialog, PollAnswerList, PollOptionsFullList, PollResults, SuggestPollOptionForm, }: PollActionsProps) => React.JSX.Element;

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

@@ -1,10 +1,10 @@
 import React, { useCallback, useState } from 'react';
 import { PollAction } from './PollAction';
-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 { PollOptionsFullList as DefaultPollOptionsFullList, } from './PollOptionsFullList';
+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 { PollOptionsFullList as DefaultPollOptionsFullList } from './PollOptionsFullList';
 import { PollResults as DefaultPollResults } from './PollResults';
 import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
 import { useChannelStateContext, useChatContext, useMessageContext, usePollContext, useTranslationContext, } from '../../../context';

package/dist/components/Poll/PollActions/PollAnswerList.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type PollAnswerListProps = {
     onUpdateOwnAnswerClick: () => void;
     close?: () => void;
 };
-export declare const PollAnswerList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, onUpdateOwnAnswerClick, }: PollAnswerListProps) => React.JSX.Element;
+export declare const PollAnswerList: ({ close, onUpdateOwnAnswerClick, }: PollAnswerListProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollOptionsFullList.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type FullPollOptionsListingProps = {
     close?: () => void;
 };
-export declare const PollOptionsFullList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: FullPollOptionsListingProps) => React.JSX.Element;
+export declare const PollOptionsFullList: ({ close }: FullPollOptionsListingProps) => React.JSX.Element;

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

@@ -3,8 +3,10 @@ import { ModalHeader } from '../../Modal/ModalHeader';
 import { PollOptionList } from '../PollOptionList';
 import { useStateStore } from '../../../store';
 import { usePollContext, useTranslationContext } from '../../../context';
-const pollStateSelector = (nextValue) => ({ name: nextValue.name });
-export const PollOptionsFullList = ({ close, }) => {
+const pollStateSelector = (nextValue) => ({
+    name: nextValue.name,
+});
+export const PollOptionsFullList = ({ close }) => {
     const { t } = useTranslationContext();
     const { poll } = usePollContext();
     const { name } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
-export type PollOptionVotesListingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export type PollOptionVotesListingProps = {
+    option: PollOption;
 };
-export declare const PollOptionVotesList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionVotesListingProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionVotesList: ({ option }: PollOptionVotesListingProps) => React.JSX.Element;

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

@@ -4,7 +4,7 @@ import { usePollOptionVotesPagination } from '../../hooks';
 import { LoadingIndicator } from '../../../Loading';
 import { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
-export const PollOptionVotesList = ({ option, }) => {
+export const PollOptionVotesList = ({ option }) => {
     const paginationParams = useMemo(() => ({ filter: { option_id: option.id } }), [option.id]);
     const { error, hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({
         paginationParams,

package/dist/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
-export type PollOptionWithVotesProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export type PollOptionWithVotesProps = {
+    option: PollOption;
     countVotesPreview?: number;
     showAllVotes?: () => void;
 };
-export declare const PollOptionWithLatestVotes: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ countVotesPreview, option, showAllVotes, }: PollOptionWithVotesProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionWithLatestVotes: ({ countVotesPreview, option, showAllVotes, }: PollOptionWithVotesProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../../types';
 export type PollResultOptionVoteCounterProps = {
     optionId: string;
 };
-export declare const PollResultOptionVoteCounter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ optionId, }: PollResultOptionVoteCounterProps) => React.JSX.Element;
-export type PollOptionWithVotesHeaderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export declare const PollResultOptionVoteCounter: ({ optionId, }: PollResultOptionVoteCounterProps) => React.JSX.Element;
+export type PollOptionWithVotesHeaderProps = {
+    option: PollOption;
 };
-export declare const PollOptionWithVotesHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionWithVotesHeaderProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionWithVotesHeader: ({ option }: PollOptionWithVotesHeaderProps) => React.JSX.Element;

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

@@ -13,6 +13,6 @@ export const PollResultOptionVoteCounter = ({ optionId, }) => {
         maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === optionId && (React.createElement("div", { className: 'str-chat__poll-result-winning-option-icon' })),
         React.createElement("span", { className: 'str-chat__poll-result-option-vote-count' }, t('{{count}} votes', { count: vote_counts_by_option[optionId] ?? 0 }))));
 };
-export const PollOptionWithVotesHeader = ({ option, }) => (React.createElement("div", { className: 'str-chat__poll-option__header' },
+export const PollOptionWithVotesHeader = ({ option }) => (React.createElement("div", { className: 'str-chat__poll-option__header' },
     React.createElement("div", { className: 'str-chat__poll-option__option-text' }, option.text),
     React.createElement(PollResultOptionVoteCounter, { optionId: option.id })));

package/dist/components/Poll/PollActions/PollResults/PollResults.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../../types';
 export type PollResultsProps = {
     close?: () => void;
 };
-export declare const PollResults: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, }: PollResultsProps) => React.JSX.Element;
+export declare const PollResults: ({ close }: PollResultsProps) => React.JSX.Element;

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

@@ -10,7 +10,7 @@ const pollStateSelector = (nextValue) => ({
     options: nextValue.options,
     vote_counts_by_option: nextValue.vote_counts_by_option,
 });
-export const PollResults = ({ close, }) => {
+export const PollResults = ({ close }) => {
     const { t } = useTranslationContext();
     const { poll } = usePollContext();
     const { name, options, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollActions/SuggestPollOptionForm.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type SuggestPollOptionFormProps = {
     close: () => void;
     messageId: string;
 };
-export declare const SuggestPollOptionForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: SuggestPollOptionFormProps) => React.JSX.Element;
+export declare const SuggestPollOptionForm: ({ close, messageId, }: SuggestPollOptionFormProps) => React.JSX.Element;

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

@@ -2,7 +2,9 @@ import React from 'react';
 import { FormDialog } from '../../Dialog/FormDialog';
 import { useChatContext, usePollContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const pollStateSelector = (nextValue) => ({ options: nextValue.options });
+const pollStateSelector = (nextValue) => ({
+    options: nextValue.options,
+});
 export const SuggestPollOptionForm = ({ close, messageId, }) => {
     const { client } = useChatContext('SuggestPollOptionForm');
     const { t } = useTranslationContext('SuggestPollOptionForm');

package/dist/components/Poll/PollContent.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const PollContent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
+export declare const PollContent: () => React.JSX.Element;

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

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

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

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import React from 'react';
+import { SimpleSwitchField } from '../../Form/SwitchField';
+import { FieldError } from '../../Form/FieldError';
+import { useTranslationContext } from '../../../context';
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    enforce_unique_vote: state.data.enforce_unique_vote,
+    error: state.errors.max_votes_allowed,
+    max_votes_allowed: state.data.max_votes_allowed,
+});
+export const MultipleAnswersField = () => {
+    const { t } = useTranslationContext();
+    const { pollComposer } = useMessageComposer();
+    const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    return (React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
+            'str-chat__form__expandable-field--expanded': !enforce_unique_vote,
+        }) },
+        React.createElement(SimpleSwitchField, { checked: !enforce_unique_vote, id: 'enforce_unique_vote', labelText: t('Multiple answers'), onChange: (e) => {
+                pollComposer.updateFields({ enforce_unique_vote: !e.target.checked });
+            } }),
+        !enforce_unique_vote && (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                'str-chat__form__input-field--has-error': error,
+            }) },
+            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: error && t(error) }),
+                React.createElement("input", { id: 'max_votes_allowed', onBlur: () => {
+                        pollComposer.handleFieldBlur('max_votes_allowed');
+                    }, onChange: (e) => {
+                        pollComposer.updateFields({
+                            max_votes_allowed: e.target.value,
+                        });
+                    }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: max_votes_allowed }))))));
+};

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import { FieldError } from '../../Form/FieldError';
+import { useTranslationContext } from '../../../context';
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    error: state.errors.name,
+    name: state.data.name,
+});
+export const NameField = () => {
+    const { t } = useTranslationContext();
+    const { pollComposer } = useMessageComposer();
+    const { error, name } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    return (React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label', {
+            'str-chat__form__input-field--has-error': error,
+        }) },
+        React.createElement("label", { className: 'str-chat__form__field-label', htmlFor: 'name' }, t('Question')),
+        React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
+            React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: error && t(error) }),
+            React.createElement("input", { id: 'name', onBlur: () => {
+                    pollComposer.handleFieldBlur('name');
+                }, onChange: (e) => {
+                    pollComposer.updateFields({ name: e.target.value });
+                }, placeholder: t('Ask a question'), type: 'text', value: name }))));
+};

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

@@ -1,9 +1,2 @@
 import React from 'react';
-import type { OptionErrors, PollFormState } from './types';
-export type OptionFieldSetProps = {
-    errors: OptionErrors;
-    options: PollFormState['options'];
-    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: () => React.JSX.Element;

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

@@ -1,77 +1,45 @@
 import clsx from 'clsx';
-import { MAX_POLL_OPTIONS } from '../constants';
-import { nanoid } from 'nanoid';
 import React, { useCallback } from 'react';
 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, }) => {
+import { useMessageComposer } from '../../MessageInput';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    errors: state.errors.options,
+    options: state.data.options,
+});
+export const OptionFieldSet = () => {
+    const { pollComposer } = useMessageComposer();
+    const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
     const { t } = useTranslationContext('OptionFieldSet');
-    const findOptionDuplicate = (sourceOption) => {
-        const isDuplicateFilter = (option) => !!sourceOption.text.trim() && // do not include empty options into consideration
-            option.id !== sourceOption.id &&
-            option.text.trim() === sourceOption.text.trim();
-        return options.find(isDuplicateFilter);
-    };
     const onSetNewOrder = useCallback((newOrder) => {
-        setState((prev) => ({
-            ...prev,
-            options: newOrder.map((index) => prev.options[index]),
-        }));
-    }, [setState]);
+        const prevOptions = pollComposer.options;
+        pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });
+    }, [pollComposer]);
     const draggable = options.length > 1;
     return (React.createElement("fieldset", { className: 'str-chat__form__field str-chat__form__input-fieldset' },
         React.createElement("legend", { className: 'str-chat__form__field-label' }, t('Options')),
-        React.createElement(DragAndDropContainer, { className: 'str-chat__form__input-fieldset__values', draggable: draggable, onSetNewOrder: onSetNewOrder }, options.map((option, i) => (React.createElement("div", { className: clsx('str-chat__form__input-field', {
-                'str-chat__form__input-field--draggable': draggable,
-                'str-chat__form__input-field--has-error': errors[option.id],
-            }), key: `new-poll-option-${i}` },
-            React.createElement("div", { className: 'str-chat__form__input-field__value' },
-                React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: errors[option.id] }),
-                React.createElement("input", { id: option.id, onBlur: (e) => {
-                        if (findOptionDuplicate({ id: e.target.id, text: e.target.value })) {
-                            setErrors((prev) => ({
-                                ...prev,
-                                [e.target.id]: t('Option already exists'),
-                            }));
-                        }
-                    }, onChange: (e) => {
-                        setState((prev) => {
-                            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 optionListHead = prev.options ? prev.options.slice(0, i) : [];
-                            const optionListTail = shouldAddEmptyOption
-                                ? [{ id: nanoid(), text: '' }]
-                                : (prev.options || []).slice(i + 1);
-                            if ((errors[option.id] && !e.target.value) ||
-                                (VALIDATION_ERRORS[errors[option.id]] &&
-                                    !findOptionDuplicate({ id: e.target.id, text: e.target.value }))) {
-                                setErrors((prev) => {
-                                    delete prev[option.id];
-                                    return prev;
-                                });
+        React.createElement(DragAndDropContainer, { className: 'str-chat__form__input-fieldset__values', draggable: draggable, onSetNewOrder: onSetNewOrder }, options.map((option, i) => {
+            const error = errors?.[option.id];
+            return (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                    'str-chat__form__input-field--draggable': draggable,
+                    'str-chat__form__input-field--has-error': error,
+                }), key: `new-poll-option-${i}` },
+                React.createElement("div", { className: 'str-chat__form__input-field__value' },
+                    React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: error && t(error) }),
+                    React.createElement("input", { id: option.id, onBlur: () => {
+                            pollComposer.handleFieldBlur('options');
+                        }, onChange: (e) => {
+                            pollComposer.updateFields({
+                                options: { index: i, text: e.target.value },
+                            });
+                        }, onKeyUp: (event) => {
+                            if (event.key === 'Enter') {
+                                const nextInputId = options[i + 1].id;
+                                document.getElementById(nextInputId)?.focus();
                             }
-                            return {
-                                ...prev,
-                                options: [
-                                    ...optionListHead,
-                                    ...(shouldRemoveOption
-                                        ? []
-                                        : [{ ...option, text: e.target.value }]),
-                                    ...optionListTail,
-                                ],
-                            };
-                        });
-                    }, onKeyUp: (event) => {
-                        if (event.key === 'Enter') {
-                            const nextInputId = options[i + 1].id;
-                            document.getElementById(nextInputId)?.focus();
-                        }
-                    }, placeholder: t('Add an option'), type: 'text', value: option.text })),
-            draggable && React.createElement("div", { className: 'str-chat__drag-handle' })))))));
+                        }, placeholder: t('Add an option'), type: 'text', value: option.text })),
+                draggable && React.createElement("div", { className: 'str-chat__drag-handle' })));
+        }))));
 };