stream-chat-react-native-core 5.39.6 → 5.40.0-beta.1

package/src/components/Poll/hooks/usePollOptionVotesPagination.ts

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import uniqBy from 'lodash/uniqBy';
+import { isVoteAnswer, PollOption, PollOptionVotesQueryParams, PollVote } from 'stream-chat';
+
+import { useChatContext, usePollContext } from '../../../contexts';
+
+export type UsePollOptionVotesPaginationParams = {
+  option: PollOption;
+  loadFirstPage?: boolean;
+  paginationParams?: PollOptionVotesQueryParams;
+};
+
+export type UsePollVotesReturnType = {
+  error: Error | undefined;
+  hasNextPage: boolean;
+  loading: boolean;
+  loadMore: () => void;
+  next: string | null | undefined;
+  votes: PollVote[];
+};
+
+/**
+ * A hook that queries votes for a given Poll and returns them in a paginated fashion.
+ * Should be used instead of the latest_votes_by_option property within the reactive state in the
+ * event that we need more than the top 10 votes for an option. The returned property votes will
+ * automatically be updated and trigger a state change when paginating further. Querying for votes
+ * can only be done on an option by option basis.
+ *
+ * @param option {PollOption} The option for which we want to load the votes.
+ * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
+ * the hook is first called.
+ * @param paginationParams {PollOptionVotesQueryParams} The pagination params we might want to use for our custom
+ * needs when invoking the hook.
+ *
+ * @returns {UsePollVotesReturnType} An object containing all of the needed pagination values as well as the
+ * answers.
+ **/
+
+export const usePollOptionVotesPagination = ({
+  loadFirstPage = true,
+  option,
+  paginationParams,
+}: UsePollOptionVotesPaginationParams): UsePollVotesReturnType => {
+  const { poll } = usePollContext();
+  const { client } = useChatContext();
+
+  const [votes, setVotes] = useState<PollVote[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+  const cursorRef = useRef<string | null>();
+  const queryInProgress = useRef(false);
+  const optionFilter = useMemo(() => ({ option_id: option.id }), [option.id]);
+
+  const loadMore = useCallback(async () => {
+    if (cursorRef.current === null || queryInProgress.current) return;
+    const next = cursorRef.current;
+
+    setLoading(true);
+    queryInProgress.current = true;
+    try {
+      const { next: newNext, votes } = await poll.queryOptionVotes({
+        filter: { ...optionFilter, ...paginationParams?.filter },
+        options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+        sort: { created_at: -1, ...paginationParams?.sort },
+      });
+      cursorRef.current = newNext || null;
+      setVotes((prev) => uniqBy([...prev, ...votes], 'id'));
+    } catch (e) {
+      setError(e as Error);
+    }
+    queryInProgress.current = false;
+    setLoading(false);
+  }, [optionFilter, paginationParams, poll]);
+
+  useEffect(() => {
+    if (!loadFirstPage || votes.length) return;
+    loadMore();
+  }, [loadFirstPage, loadMore, votes]);
+
+  // TODO: Possibly generalize these in a utility hook.
+  useEffect(() => {
+    const castedListeners = ['poll.vote_casted', 'poll.vote_changed'].map((eventName) =>
+      client.on(eventName, (event) => {
+        if (event.poll?.id && event.poll.id !== poll.id) return;
+        const vote = event.poll_vote;
+        if (vote && !isVoteAnswer(vote)) {
+          if (vote.option_id === option.id) {
+            setVotes([vote, ...votes.filter((v) => v.id !== vote.id)]);
+          } else if (eventName === 'poll.vote_changed') {
+            setVotes(votes.filter((v) => v.id !== vote.id));
+          }
+        }
+      }),
+    );
+
+    const removedListener = client.on('poll.vote_removed', (event) => {
+      if (event.poll?.id && event.poll.id !== poll.id) return;
+      const vote = event.poll_vote;
+      if (vote && !isVoteAnswer(vote) && vote.option_id === option.id) {
+        setVotes(votes.filter((v) => v.id !== vote.id));
+      }
+    });
+
+    return () => {
+      castedListeners.forEach((listener) => listener.unsubscribe());
+      removedListener.unsubscribe();
+    };
+  }, [client, option, poll, votes]);
+
+  return {
+    error,
+    hasNextPage: cursorRef.current !== null,
+    loading,
+    loadMore,
+    next: cursorRef.current,
+    votes,
+  };
+};

package/src/components/Poll/hooks/usePollState.ts

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+
+import {
+  APIResponse,
+  CastVoteAPIResponse,
+  PollAnswer,
+  PollOption,
+  PollState,
+  PollVote,
+  UpdatePollAPIResponse,
+  UserResponse,
+  VotingVisibility,
+} from 'stream-chat';
+
+import { usePollStateStore } from './usePollStateStore';
+
+import { usePollContext } from '../../../contexts';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+export type UsePollStateSelectorReturnType = {
+  allow_answers: boolean | undefined;
+  allow_user_suggested_options: boolean | undefined;
+  answers_count: number;
+  created_by: UserResponse | null;
+  enforce_unique_vote: boolean;
+  is_closed: boolean | undefined;
+  latest_votes_by_option: Record<string, PollVote[]>;
+  max_votes_allowed: number;
+  maxVotedOptionIds: string[];
+  name: string;
+  options: PollOption[];
+  ownAnswer: PollAnswer | undefined;
+  ownVotesByOptionId: Record<string, PollVote>;
+  vote_counts_by_option: Record<string, number>;
+  voting_visibility: VotingVisibility | undefined;
+};
+
+export type UsePollStateReturnType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = UsePollStateSelectorReturnType & {
+  addComment: (
+    answerText: string,
+  ) => Promise<APIResponse & CastVoteAPIResponse<StreamChatGenerics>>;
+  addOption: (optionText: string) => Promise<void>;
+  endVote: () => Promise<APIResponse & UpdatePollAPIResponse<StreamChatGenerics>>;
+};
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: PollState<StreamChatGenerics>,
+): UsePollStateSelectorReturnType => ({
+  allow_answers: nextValue.allow_answers,
+  allow_user_suggested_options: nextValue.allow_user_suggested_options,
+  answers_count: nextValue.answers_count,
+  created_by: nextValue.created_by,
+  enforce_unique_vote: nextValue.enforce_unique_vote,
+  is_closed: nextValue.is_closed,
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+  max_votes_allowed: nextValue.max_votes_allowed,
+  maxVotedOptionIds: nextValue.maxVotedOptionIds,
+  name: nextValue.name,
+  options: nextValue.options,
+  ownAnswer: nextValue.ownAnswer,
+  ownVotesByOptionId: nextValue.ownVotesByOptionId,
+  vote_counts_by_option: nextValue.vote_counts_by_option,
+  voting_visibility: nextValue.voting_visibility,
+});
+
+export const usePollState = (): UsePollStateReturnType => {
+  const { message, poll } = usePollContext();
+  const {
+    allow_answers,
+    allow_user_suggested_options,
+    answers_count,
+    created_by,
+    enforce_unique_vote,
+    is_closed,
+    latest_votes_by_option,
+    max_votes_allowed,
+    maxVotedOptionIds,
+    name,
+    options,
+    ownAnswer,
+    ownVotesByOptionId,
+    vote_counts_by_option,
+    voting_visibility,
+  } = usePollStateStore(selector);
+
+  const addOption = useCallback(
+    async (optionText: string) => {
+      const { poll_option } = await poll.createOption({ text: optionText });
+      await poll.castVote(poll_option.id, message.id);
+    },
+    [message, poll],
+  );
+  const addComment = useCallback(
+    (answerText: string) => poll.addAnswer(answerText, message.id),
+    [message.id, poll],
+  );
+  const endVote = useCallback(() => poll.close(), [poll]);
+
+  return {
+    addComment,
+    addOption,
+    allow_answers,
+    allow_user_suggested_options,
+    answers_count,
+    created_by,
+    endVote,
+    enforce_unique_vote,
+    is_closed,
+    latest_votes_by_option,
+    max_votes_allowed,
+    maxVotedOptionIds,
+    name,
+    options,
+    ownAnswer,
+    ownVotesByOptionId,
+    vote_counts_by_option,
+    voting_visibility,
+  };
+};

package/src/components/Poll/hooks/usePollStateStore.ts

@@ -0,0 +1,13 @@
+import { PollState } from 'stream-chat';
+
+import { usePollContext } from '../../../contexts';
+import { useStateStore } from '../../../hooks';
+
+export const usePollStateStore = <
+  T extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
+>(
+  selector: (nextValue: PollState) => T,
+): T => {
+  const { poll } = usePollContext();
+  return useStateStore(poll.state, selector);
+};

package/src/components/Poll/index.ts

@@ -0,0 +1,10 @@
+// components
+export * from './Poll';
+export * from './CreatePollContent';
+export * from './components';
+
+// hooks
+export * from './hooks/usePollState';
+export * from './hooks/usePollStateStore';
+export * from './hooks/usePollAnswersPagination';
+export * from './hooks/usePollOptionVotesPagination';

package/src/components/Reply/Reply.tsx

@@ -262,6 +262,8 @@ const ReplyWithContext = <
               text:
                 quotedMessage.type === 'deleted'
                   ? `_${t('Message deleted')}_`
+                  : quotedMessage.poll
+                  ? `📊 ${quotedMessage.poll.name}`
                   : quotedMessage.text
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`

package/src/components/index.ts

@@ -161,6 +161,7 @@ export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
 
 export * from './ProgressControl/ProgressControl';
+export * from './Poll';
 
 export * from './Reply/Reply';
 

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -59,6 +59,12 @@ export type AttachmentPickerContextValue = {
    */
   CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   closePicker: () => void;
+  /**
+   * Custom UI component for the poll creation icon.
+   *
+   * **Default: ** [CreatePollIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CreatePollIcon.tsx)
+   */
+  CreatePollIcon: React.ComponentType;
   /**
    * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
@@ -98,7 +104,12 @@ export const AttachmentPickerProvider = ({
 }: PropsWithChildren<{
   value?: Pick<
     AttachmentPickerContextValue,
-    'CameraSelectorIcon' | 'closePicker' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'openPicker'
+    | 'CameraSelectorIcon'
+    | 'closePicker'
+    | 'CreatePollIcon'
+    | 'FileSelectorIcon'
+    | 'ImageSelectorIcon'
+    | 'openPicker'
   > &
     Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>>;
 }>) => {

package/src/contexts/index.ts

@@ -24,3 +24,4 @@ export * from './threadsContext/ThreadListItemContext';
 export * from './translationContext/TranslationContext';
 export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';
+export * from './pollContext';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -29,6 +29,7 @@ import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
 import { isUploadAllowed, MAX_FILE_SIZE_TO_UPLOAD, prettifyFileSize } from './utils/utils';
 
+import { PollContentProps } from '../../components';
 import { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
@@ -326,7 +327,6 @@ export type InputMessageInputContextValue<
    */
   CooldownTimer: React.ComponentType<CooldownTimerProps>;
   editMessage: StreamChat<StreamChatGenerics>['updateMessage'];
-
   /**
    * Custom UI component for FileUploadPreview.
    * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/FileUploadPreview.tsx
@@ -335,6 +335,7 @@ export type InputMessageInputContextValue<
 
   /** When false, CameraSelectorIcon will be hidden */
   hasCameraPicker: boolean;
+
   /** When false, CommandsButton will be hidden */
   hasCommands: boolean;
   /** When false, FileSelectorIcon will be hidden */
@@ -351,13 +352,13 @@ export type InputMessageInputContextValue<
   InputReplyStateHeader: React.ComponentType<InputReplyStateHeaderProps<StreamChatGenerics>>;
   /** Limit on allowed number of files to attach at a time. */
   maxNumberOfFiles: number;
-
   /**
    * Custom UI component for more options button.
    *
    * Defaults to and accepts same props as: [MoreOptionsButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/more-options-button/)
    */
   MoreOptionsButton: React.ComponentType<MoreOptionsButtonProps>;
+
   /** Limit on the number of lines in the text input before scrolling */
   numberOfLines: number;
   quotedMessage: boolean | MessageType<StreamChatGenerics>;
@@ -377,6 +378,7 @@ export type InputMessageInputContextValue<
   ShowThreadMessageInChannelButton: React.ComponentType<{
     threadList?: boolean;
   }>;
+
   /**
    * Custom UI component for audio recording mic button.
    *
@@ -389,7 +391,6 @@ export type InputMessageInputContextValue<
    * **Default** [UploadProgressIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/UploadProgressIndicator.tsx)
    */
   UploadProgressIndicator: React.ComponentType<UploadProgressIndicatorProps>;
-
   /**
    * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.
    *
@@ -404,6 +405,7 @@ export type InputMessageInputContextValue<
   autoCompleteTriggerSettings?: (
     settings: ACITriggerSettingsParams<StreamChatGenerics>,
   ) => TriggerSettings<StreamChatGenerics>;
+  closePollCreationDialog?: () => void;
   /**
    * Compress image with quality (from 0 to 1, where 1 is best quality).
    * On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images,
@@ -411,6 +413,13 @@ export type InputMessageInputContextValue<
    * Image picker defaults to 0.8 for iOS and 1 for Android
    */
   compressImageQuality?: number;
+
+  /**
+   * Override the entire content of the CreatePoll component. The component has full access to the
+   * useCreatePollContext() hook.
+   * */
+  CreatePollContent?: React.ComponentType<PollContentProps>;
+
   /**
    * Override file upload request
    *
@@ -423,6 +432,7 @@ export type InputMessageInputContextValue<
     file: File,
     channel: ChannelContextValue<StreamChatGenerics>['channel'],
   ) => Promise<SendFileAPIResponse>;
+
   /**
    * Override image upload request
    *
@@ -444,17 +454,14 @@ export type InputMessageInputContextValue<
    * It is defined with message type if the editing state is true, else its undefined.
    */
   editing?: MessageType<StreamChatGenerics>;
-
   /**
    * Prop to override the default emoji search index in auto complete suggestion list.
    */
   emojiSearchIndex?: EmojiSearchIndex;
-
   /**
    * Handler for when the attach button is pressed.
    */
   handleAttachButtonPress?: () => void;
-
   /** Initial value to set on input */
   initialValue?: string;
   /**
@@ -484,13 +491,14 @@ export type InputMessageInputContextValue<
    */
   InputButtons?: React.ComponentType<InputButtonsProps<StreamChatGenerics>>;
   maxMessageLength?: number;
-  mentionAllAppUsersEnabled?: boolean;
   /** Object containing filters/sort/options overrides for an @mention user query */
+  mentionAllAppUsersEnabled?: boolean;
   mentionAllAppUsersQuery?: MentionAllAppUsersQuery<StreamChatGenerics>;
   /**
    * Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
    */
   onChangeText?: (newText: string) => void;
+  openPollCreationDialog?: ({ sendMessage }: Pick<LocalMessageInputContext, 'sendMessage'>) => void;
   SendMessageDisallowedIndicator?: React.ComponentType;
   /**
    * ref for input setter function
@@ -500,6 +508,7 @@ export type InputMessageInputContextValue<
    * @overrideType Function
    */
   setInputRef?: (ref: TextInput | null) => void;
+  showPollCreationDialog?: boolean;
 };
 
 export type MessageInputContextValue<
@@ -567,7 +576,16 @@ export const MessageInputProvider = <
   }>({});
   const [giphyActive, setGiphyActive] = useState(false);
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
-  const { editing, initialValue } = value;
+  const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
+
+  const defaultOpenPollCreationDialog = useCallback(() => setShowPollCreationDialog(true), []);
+  const closePollCreationDialog = useCallback(() => setShowPollCreationDialog(false), []);
+
+  const {
+    editing,
+    initialValue,
+    openPollCreationDialog: openPollCreationDialogFromContext,
+  } = value;
   const {
     fileUploads,
     imageUploads,
@@ -978,7 +996,7 @@ export const MessageInputProvider = <
     }
 
     // Disallow sending message if its empty.
-    if (!prevText && attachments.length === 0) {
+    if (!prevText && attachments.length === 0 && !customMessageData?.poll_id) {
       sending.current = false;
       return;
     }
@@ -1399,6 +1417,14 @@ export const MessageInputProvider = <
     }
   };
 
+  const openPollCreationDialog = () => {
+    if (openPollCreationDialogFromContext) {
+      openPollCreationDialogFromContext({ sendMessage });
+      return;
+    }
+    defaultOpenPollCreationDialog();
+  };
+
   const messageInputContext = useCreateMessageInputContext({
     appendText,
     asyncIds,
@@ -1450,9 +1476,11 @@ export const MessageInputProvider = <
     uploadNewFile,
     uploadNewImage,
     ...value,
+    closePollCreationDialog,
+    openPollCreationDialog,
     sendMessage, // overriding the originally passed in sendMessage
+    showPollCreationDialog,
   });
-
   return (
     <MessageInputContext.Provider
       value={messageInputContext as unknown as MessageInputContextValue}

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -39,9 +39,8 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
   </MessageInputProvider>
 );
 
-afterEach(jest.clearAllMocks);
-
 describe("MessageInputContext's pickFile", () => {
+  afterEach(jest.clearAllMocks);
   jest.spyOn(Alert, 'alert');
   jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
     jest.fn().mockResolvedValue({
@@ -109,5 +108,8 @@ describe("MessageInputContext's pickFile", () => {
     });
 
     expect(Alert.alert).toHaveBeenCalledTimes(2);
+    expect(Alert.alert).toHaveBeenCalledWith(
+      'File is too large: {{ size }}, maximum upload size is {{ limit }}',
+    );
   });
 });

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -27,10 +27,12 @@ export const useCreateMessageInputContext = <
   clearEditingState,
   clearQuotedMessageState,
   closeAttachmentPicker,
+  closePollCreationDialog,
   CommandsButton,
   compressImageQuality,
   cooldownEndsAt,
   CooldownTimer,
+  CreatePollContent,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -69,6 +71,7 @@ export const useCreateMessageInputContext = <
   openCommandsPicker,
   openFilePicker,
   openMentionsPicker,
+  openPollCreationDialog,
   pickAndUploadImageFromNativePicker,
   pickFile,
   quotedMessage,
@@ -97,6 +100,7 @@ export const useCreateMessageInputContext = <
   setShowMoreOptions,
   setText,
   showMoreOptions,
+  showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
   takeAndUploadImage,
@@ -149,10 +153,12 @@ export const useCreateMessageInputContext = <
       clearEditingState,
       clearQuotedMessageState,
       closeAttachmentPicker,
+      closePollCreationDialog,
       CommandsButton,
       compressImageQuality,
       cooldownEndsAt,
       CooldownTimer,
+      CreatePollContent,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -191,6 +197,7 @@ export const useCreateMessageInputContext = <
       openCommandsPicker,
       openFilePicker,
       openMentionsPicker,
+      openPollCreationDialog,
       pickAndUploadImageFromNativePicker,
       pickFile,
       quotedMessage,
@@ -219,6 +226,7 @@ export const useCreateMessageInputContext = <
       setShowMoreOptions,
       setText,
       showMoreOptions,
+      showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
       takeAndUploadImage,
@@ -249,6 +257,7 @@ export const useCreateMessageInputContext = <
       showMoreOptions,
       text,
       threadId,
+      showPollCreationDialog,
     ],
   );
 

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ImageProps } from 'react-native';
 
-import type { Attachment, TranslationLanguages } from 'stream-chat';
+import { Attachment, TranslationLanguages } from 'stream-chat';
 
 import { useResettableState } from './hooks/useResettableState';
 
@@ -46,6 +46,7 @@ export type MessageOverlayData<
   otherAttachments?: Attachment<StreamChatGenerics>[];
   OverlayReactionList?: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
   ownCapabilities?: OwnCapabilitiesContextValue;
+  Poll?: React.ComponentType;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
   userLanguage?: TranslationLanguages;

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -4,6 +4,7 @@ import type { TouchableOpacityProps } from 'react-native';
 
 import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
+import { PollContentProps } from '../../components';
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
 import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
@@ -60,7 +61,13 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
+export type MessageContentType =
+  | 'attachments'
+  | 'files'
+  | 'gallery'
+  | 'quoted_reply'
+  | 'poll'
+  | 'text';
 export type DeletedMessagesVisibilityType = 'always' | 'never' | 'receiver' | 'sender';
 
 export type MessagesContextValue<
@@ -350,6 +357,8 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+  /** A flag specifying whether the poll creation button is available or not. */
+  hasCreatePoll?: boolean;
   /** Handler to deal with custom memoization logic of Attachment */
   isAttachmentEqual?: (
     prevAttachment: Attachment<StreamChatGenerics>,
@@ -502,7 +511,11 @@ export type MessagesContextValue<
    * ```
    */
   onPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
-
+  /**
+   * Override the entire content of the Poll component. The component has full access to the
+   * usePollState() and usePollContext() hooks.
+   * */
+  PollContent?: React.ComponentType<PollContentProps>;
   /**
    * Full override of the reaction function on Message and Message Overlay
    *

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -43,6 +43,7 @@ export type OverlayProviderProps<
       | 'attachmentSelectionBarHeight'
       | 'bottomInset'
       | 'CameraSelectorIcon'
+      | 'CreatePollIcon'
       | 'FileSelectorIcon'
       | 'ImageSelectorIcon'
       | 'topInset'

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -27,6 +27,7 @@ import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
 import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
+import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/components/CreatePollIcon';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { useViewport } from '../../hooks/useViewport';
@@ -99,6 +100,7 @@ export const OverlayProvider = <
         }, 600);
       }
     },
+    CreatePollIcon = DefaultCreatePollIcon,
     FileSelectorIcon = DefaultFileSelectorIcon,
     giphyVersion,
     i18nInstance,
@@ -200,6 +202,7 @@ export const OverlayProvider = <
     bottomInset,
     CameraSelectorIcon,
     closePicker: () => closePicker(bottomSheetRef),
+    CreatePollIcon,
     FileSelectorIcon,
     ImageSelectorIcon,
     openPicker: () => openPicker(bottomSheetRef),