From 67a302f9f8e2bb2d4091afe504ac0fb9ec82f00c Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Wed, 29 Jan 2025 10:13:24 +0100
Subject: [PATCH] Prettier + ESLint fixes (and some manual fixes)

---
 e2e/fixtures/data/attachment.mjs              |   2 +-
 eslint.config.mjs                             |   5 +-
 .../AIStateIndicator/AIStateIndicator.tsx     |   9 +-
 .../AIStateIndicator/hooks/useAIState.ts      |   2 +-
 src/components/Attachment/Attachment.tsx      |  19 +-
 .../Attachment/AttachmentActions.tsx          |   4 +-
 .../Attachment/AttachmentContainer.tsx        |  40 +-
 src/components/Attachment/Audio.tsx           |   4 +-
 src/components/Attachment/Card.tsx            |  37 +-
 src/components/Attachment/FileAttachment.tsx  |   9 +-
 .../Attachment/UnsupportedAttachment.tsx      |   9 +-
 src/components/Attachment/VoiceRecording.tsx  |  34 +-
 .../Attachment/__tests__/Attachment.test.js   |  20 +-
 .../__tests__/AttachmentActions.test.js       |   1 -
 .../Attachment/__tests__/Audio.test.js        |  27 +-
 .../Attachment/__tests__/Card.test.js         |   3 +-
 .../__tests__/VoiceRecording.test.js          |  20 +-
 .../__tests__/WaveProgressBar.test.js         |  41 +-
 .../__tests__/audioSampling.test.js           |   8 +-
 .../Attachment/attachment-sizing.tsx          |  19 +-
 src/components/Attachment/audioSampling.ts    |  30 +-
 .../components/FileSizeIndicator.tsx          |   5 +-
 .../Attachment/components/ProgressBar.tsx     |   5 +-
 .../Attachment/components/WaveProgressBar.tsx |   3 +-
 .../Attachment/hooks/useAudioController.ts    |   8 +-
 src/components/Attachment/utils.tsx           |  49 +-
 src/components/AutoCompleteTextarea/Item.jsx  |   5 +-
 src/components/AutoCompleteTextarea/List.jsx  |  14 +-
 .../AutoCompleteTextarea/Textarea.jsx         |  28 +-
 src/components/AutoCompleteTextarea/utils.js  |  10 +-
 src/components/Avatar/Avatar.tsx              |   9 +-
 src/components/Avatar/ChannelAvatar.tsx       |   8 +-
 src/components/Avatar/GroupAvatar.tsx         |   5 +-
 .../Avatar/__tests__/Avatar.test.js           |  14 +-
 src/components/Channel/Channel.tsx            | 505 ++++++++++--------
 .../Channel/__tests__/Channel.test.js         | 265 ++++++---
 src/components/Channel/channelState.ts        | 336 ++++++------
 .../hooks/useChannelContainerClasses.ts       |   7 +-
 .../hooks/useCreateChannelStateContext.ts     |  26 +-
 .../Channel/hooks/useCreateTypingContext.ts   |   2 +-
 .../Channel/hooks/useEditMessageHandler.ts    |  18 +-
 .../Channel/hooks/useMentionsHandlers.ts      |  24 +-
 src/components/Channel/utils.ts               |  51 +-
 .../ChannelHeader/ChannelHeader.tsx           |  11 +-
 .../__tests__/ChannelHeader.test.js           |  50 +-
 src/components/ChannelList/ChannelList.tsx    |  64 ++-
 .../ChannelList/ChannelListMessenger.tsx      |   4 +-
 .../ChannelList/__tests__/ChannelList.test.js | 106 +++-
 .../hooks/useChannelDeletedListener.ts        |   2 +-
 .../hooks/useChannelHiddenListener.ts         |   2 +-
 .../ChannelList/hooks/useChannelListShape.ts  | 174 +++---
 .../hooks/useChannelMembershipState.ts        |  11 +-
 .../hooks/useChannelTruncatedListener.ts      |   2 +-
 .../hooks/useChannelUpdatedListener.ts        |   9 +-
 .../hooks/useChannelVisibleListener.ts        |   2 +-
 .../hooks/useConnectionRecoveredListener.ts   |   2 +-
 .../hooks/useMessageNewListener.ts            |  13 +-
 .../useNotificationAddedToChannelListener.ts  |   6 +-
 .../useNotificationMessageNewListener.ts      |   6 +-
 ...eNotificationRemovedFromChannelListener.ts |   6 +-
 .../ChannelList/hooks/usePaginatedChannels.ts |  33 +-
 .../hooks/useSelectedChannelState.ts          |   2 +-
 .../hooks/useUserPresenceChangedListener.ts   |   2 +-
 src/components/ChannelList/utils.ts           |  29 +-
 .../ChannelPreview/ChannelPreview.tsx         |  17 +-
 .../ChannelPreviewMessenger.tsx               |  12 +-
 .../__tests__/ChannelPreview.test.js          |  36 +-
 .../__tests__/ChannelPreviewMessenger.test.js |   1 -
 .../ChannelPreview/__tests__/utils.test.js    |  18 +-
 .../useMessageDeliveryStatus.test.js          |   9 +-
 .../hooks/useChannelPreviewInfo.ts            |   6 +-
 .../ChannelPreview/hooks/useIsChannelMuted.ts |   2 +-
 .../hooks/useMessageDeliveryStatus.ts         |  19 +-
 src/components/ChannelPreview/icons.tsx       |   1 -
 src/components/ChannelPreview/utils.tsx       |  29 +-
 .../ChannelSearch/ChannelSearch.tsx           |  21 +-
 src/components/ChannelSearch/SearchBar.tsx    |  10 +-
 .../ChannelSearch/SearchResults.tsx           |  41 +-
 .../__tests__/ChannelSearch.test.js           |  60 ++-
 .../ChannelSearch/__tests__/SearchBar.test.js |   2 +-
 .../__tests__/SearchResults.test.js           |   6 +-
 .../ChannelSearch/hooks/useChannelSearch.ts   |  53 +-
 src/components/ChannelSearch/icons.tsx        |   8 +-
 src/components/ChannelSearch/index.ts         |   5 +-
 src/components/ChannelSearch/utils.ts         |   7 +-
 src/components/Chat/Chat.tsx                  |   4 +-
 .../Chat/hooks/useChannelsQueryState.ts       |   3 +-
 src/components/Chat/hooks/useChat.ts          |  20 +-
 .../Chat/hooks/useCreateChatClient.ts         |   8 +-
 .../Chat/hooks/useCreateChatContext.ts        |   2 +-
 .../ChatAutoComplete/ChatAutoComplete.tsx     |  99 ++--
 .../__tests__/ChatAutocomplete.test.js        |  13 +-
 src/components/ChatView/ChatView.tsx          |  10 +-
 src/components/CommandItem/CommandItem.tsx    |   4 +-
 .../CommandItem/__tests__/CommandItem.test.js |   2 +-
 .../DateSeparator/DateSeparator.tsx           |   4 +-
 .../__tests__/DateSeparator.test.js           |   8 +-
 src/components/Dialog/DialogManager.ts        |  15 +-
 src/components/Dialog/DialogMenu.tsx          |   6 +-
 src/components/Dialog/FormDialog.tsx          |  16 +-
 src/components/Dialog/PromptDialog.tsx        |   7 +-
 .../Dialog/__tests__/DialogsManager.test.js   |   8 +-
 .../DragAndDrop/DragAndDropContainer.tsx      |  13 +-
 src/components/EmoticonItem/EmoticonItem.tsx  |   4 +-
 .../__tests__/EmoticonItem.test.js            |   2 +-
 .../__tests__/EmptyStateIndicator.test.js     |   2 +-
 .../EventComponent/EventComponent.tsx         |  10 +-
 .../__tests__/EventComponent.test.js          |  17 +-
 src/components/Form/SwitchField.tsx           |   8 +-
 src/components/Gallery/Gallery.tsx            |  13 +-
 src/components/Gallery/Image.tsx              |  19 +-
 src/components/Gallery/ModalGallery.tsx       |  14 +-
 .../Gallery/__tests__/Gallery.test.js         |   4 +-
 .../Gallery/__tests__/Image.test.js           |  10 +-
 .../Gallery/__tests__/ModalGallery.test.js    |   4 +-
 .../InfiniteScroll.tsx                        |  14 +-
 .../InfiniteScrollPaginator.tsx               |  15 +-
 .../__tests__/InfiniteScroll.test.js          |  19 +-
 .../hooks/useCursorPaginator.ts               |   5 +-
 src/components/LoadMore/LoadMorePaginator.tsx |  14 +-
 .../LoadMore/__tests__/LoadMoreButton.test.js |   8 +-
 .../Loading/LoadingErrorIndicator.tsx         |   4 +-
 src/components/Loading/LoadingIndicator.tsx   |   7 +-
 .../Loading/__tests__/LoadingChannels.test.js |   2 +-
 .../__tests__/LoadingErrorIndicator.test.js   |   6 +-
 .../__tests__/LoadingIndicator.test.js        |   2 +-
 src/components/MML/__tests__/MML.test.js      |   2 +-
 .../AudioRecordingInProgress.tsx              |   3 +-
 .../AudioRecorder/AudioRecordingPreview.tsx   |  15 +-
 .../__tests__/AudioRecorder.test.js           |  39 +-
 .../__tests__/AudioRecordingPreview.test.js   |   3 +-
 .../classes/AmplitudeRecorder.ts              |  15 +-
 .../classes/BrowserPermission.ts              |   4 +-
 .../classes/MediaRecorderController.ts        |  21 +-
 .../__tests__/AmplitudeRecorder.test.js       |  13 +-
 .../__tests__/MediaRecorderController.test.js | 243 +++++----
 .../hooks/__tests__/useMediaRecorder.test.js  |  22 +-
 .../MediaRecorder/hooks/useMediaRecorder.ts   |  15 +-
 src/components/MediaRecorder/transcode/wav.ts |  17 +-
 src/components/Message/FixedHeightMessage.tsx |  33 +-
 src/components/Message/Message.tsx            |  18 +-
 src/components/Message/MessageDeleted.tsx     |   4 +-
 .../Message/MessageEditedTimestamp.tsx        |  10 +-
 src/components/Message/MessageErrorText.tsx   |  12 +-
 src/components/Message/MessageOptions.tsx     |   8 +-
 src/components/Message/MessageSimple.tsx      |  33 +-
 src/components/Message/MessageStatus.tsx      |  24 +-
 src/components/Message/MessageText.tsx        |  31 +-
 src/components/Message/MessageTimestamp.tsx   |   7 +-
 src/components/Message/QuotedMessage.tsx      |  20 +-
 .../Message/StreamedMessageText.tsx           |  14 +-
 src/components/Message/Timestamp.tsx          |  19 +-
 .../__tests__/FixedHeightMessage.test.js      |   5 +-
 .../Message/__tests__/Message.test.js         |  28 +-
 .../Message/__tests__/MessageDeleted.test.js  |   4 +-
 .../Message/__tests__/MessageOptions.test.js  |  67 ++-
 .../MessageRepliesCountButton.test.js         |  13 +-
 .../Message/__tests__/MessageSimple.test.js   |  48 +-
 .../Message/__tests__/MessageStatus.test.js   |  14 +-
 .../Message/__tests__/MessageText.test.js     |  37 +-
 .../__tests__/MessageTimestamp.test.js        |  15 +-
 .../Message/__tests__/utils.test.js           |  19 +-
 .../hooks/__tests__/useEditHandler.test.js    |   6 +-
 .../hooks/__tests__/useFlagHandler.test.js    |   4 +-
 .../hooks/__tests__/useMuteHandler.test.js    |   4 +-
 .../__tests__/useOpenThreadHandler.test.js    |   5 +-
 .../__tests__/useReactionHandler.test.js      |   4 +-
 .../hooks/__tests__/useReactionsFetcher.js    |  19 +-
 .../hooks/__tests__/useUserRole.test.js       |  89 +--
 .../__tests__/userMarkUnreadHandler.test.js   |  14 +-
 .../Message/hooks/useActionHandler.ts         |  12 +-
 .../Message/hooks/useDeleteHandler.ts         |   9 +-
 .../Message/hooks/useFlagHandler.ts           |   7 +-
 .../Message/hooks/useMarkUnreadHandler.ts     |   7 +-
 .../Message/hooks/useMentionsHandler.ts       |  18 +-
 .../Message/hooks/useMessageTextStreaming.ts  |   6 +-
 .../Message/hooks/useMuteHandler.ts           |  18 +-
 .../Message/hooks/useOpenThreadHandler.ts     |  11 +-
 src/components/Message/hooks/usePinHandler.ts |  23 +-
 .../Message/hooks/useReactionHandler.ts       |  32 +-
 .../Message/hooks/useReactionsFetcher.ts      |   6 +-
 .../Message/hooks/useRetryHandler.ts          |  12 +-
 .../Message/hooks/useUserHandler.ts           |   4 +-
 src/components/Message/hooks/useUserRole.ts   |  15 +-
 src/components/Message/icons.tsx              |   2 +-
 .../renderText/__tests__/renderText.test.js   |  37 +-
 .../renderText/componentRenderers/Mention.tsx |   4 +-
 .../rehypePlugins/mentionsMarkdownPlugin.ts   | 108 ++--
 .../remarkPlugins/keepLineBreaksPlugin.ts     |   5 +-
 .../Message/renderText/renderText.tsx         |  37 +-
 src/components/Message/types.ts               |  30 +-
 src/components/Message/utils.tsx              |  36 +-
 .../CustomMessageActionsList.tsx              |   4 +-
 .../MessageActions/MessageActions.tsx         |  11 +-
 .../MessageActions/MessageActionsBox.tsx      |  44 +-
 .../__tests__/MessageActions.test.js          |  11 +-
 .../__tests__/MessageActionsBox.test.js       |  25 +-
 .../hooks/useMessageActionsBoxPopper.ts       |  30 +-
 .../MessageBounce/MessageBouncePrompt.tsx     |   7 +-
 .../AttachmentPreviewList.tsx                 |  11 +-
 .../FileAttachmentPreview.tsx                 |  44 +-
 .../ImageAttachmentPreview.tsx                |   4 +-
 .../UnsupportedAttachmentPreview.tsx          |  30 +-
 .../VoiceRecordingPreview.tsx                 |  10 +-
 .../AttachmentPreviewList/types.ts            |   2 +-
 .../MessageInput/AttachmentSelector.tsx       |  43 +-
 .../MessageInput/DefaultTriggerProvider.tsx   |  31 +-
 .../MessageInput/DropzoneProvider.tsx         |  23 +-
 .../MessageInput/EditMessageForm.tsx          |  15 +-
 .../MessageInput/LinkPreviewList.tsx          |  20 +-
 src/components/MessageInput/MessageInput.tsx  |  26 +-
 .../MessageInput/MessageInputFlat.tsx         |  16 +-
 .../MessageInput/QuotedMessagePreview.tsx     |  25 +-
 src/components/MessageInput/SendButton.tsx    |   4 +-
 .../MessageInput/StopAIGenerationButton.tsx   |   5 +-
 .../__tests__/AttachmentPreviewList.test.js   |  77 +--
 .../__tests__/AttachmentSelector.test.js      |  46 +-
 .../__tests__/CooldownTimer.test.js           |   4 +-
 .../__tests__/LinkPreviewList.test.js         | 199 ++++---
 .../__tests__/MessageInput.test.js            | 207 ++++---
 .../__tests__/useMessageInputState.test.js    | 468 ++++++++--------
 .../MessageInput/hooks/useAttachments.ts      |  47 +-
 .../MessageInput/hooks/useCommandTrigger.ts   |  24 +-
 .../MessageInput/hooks/useCooldownTimer.tsx   |  14 +-
 .../hooks/useCreateMessageInputContext.ts     |   2 +-
 .../MessageInput/hooks/useLinkPreviews.ts     |  17 +-
 .../hooks/useMessageInputState.ts             |  79 +--
 .../MessageInput/hooks/useMessageInputText.ts |  11 +-
 .../MessageInput/hooks/useSubmitHandler.ts    |  41 +-
 .../MessageInput/hooks/useUserTrigger.ts      |  13 +-
 src/components/MessageInput/hooks/utils.ts    |  22 +-
 src/components/MessageInput/icons.tsx         |  16 +-
 src/components/MessageInput/types.ts          |  68 +--
 .../MessageList/ConnectionStatus.tsx          |   6 +-
 .../MessageList/CustomNotification.tsx        |   4 +-
 .../MessageList/GiphyPreviewMessage.tsx       |   4 +-
 src/components/MessageList/MessageList.tsx    |  59 +-
 .../MessageList/MessageListMainPanel.tsx      |   3 +-
 .../MessageList/MessageListNotifications.tsx  |   4 +-
 .../MessageList/ScrollToBottomButton.tsx      |   5 +-
 .../MessageList/UnreadMessagesSeparator.tsx   |   5 +-
 .../MessageList/VirtualizedMessageList.tsx    | 114 ++--
 .../VirtualizedMessageListComponents.tsx      |  26 +-
 .../__tests__/CustomNotification.test.js      |  10 +-
 .../MessageList/__tests__/MessageList.test.js |  67 ++-
 .../__tests__/MessageNotification.test.js     |   2 +-
 .../__tests__/ScrollToBottomButton.test.js    |  41 +-
 .../VirtualizedMessageListComponents.test.js  |  67 ++-
 .../MessageList/__tests__/utils.test.js       | 105 +++-
 .../hooks/MessageList/useEnrichedMessages.ts  |   5 +-
 .../MessageList/useMessageListElements.tsx    |  20 +-
 .../useMessageListScrollManager.ts            |   7 +-
 .../MessageList/useScrollLocationLogic.tsx    |  14 +-
 .../useUnreadMessagesNotification.ts          |  24 +-
 .../VirtualizedMessageList/useGiphyPreview.ts |   7 +-
 .../useMessageSetKey.ts                       |   8 +-
 .../useNewMessageNotification.ts              |   5 +-
 .../usePrependMessagesCount.ts                |  17 +-
 .../useScrollToBottomOnNewMessage.ts          |   7 +-
 .../useShouldForceScrollToBottom.ts           |   2 +-
 ...seUnreadMessagesNotificationVirtualized.ts |  12 +-
 .../hooks/__tests__/useGiphyPreview.test.js   |   4 +-
 .../hooks/__tests__/useMarkRead.test.js       |  38 +-
 .../useMessageListScrollManager.test.js       |   3 +-
 .../__tests__/usePrependMessagesCount.test.js |  13 +-
 .../MessageList/hooks/useLastReadData.ts      |   4 +-
 .../MessageList/hooks/useMarkRead.ts          |  14 +-
 src/components/MessageList/renderMessages.tsx |  26 +-
 src/components/MessageList/utils.ts           |  67 ++-
 src/components/Modal/Modal.tsx                |  28 +-
 src/components/Modal/ModalHeader.tsx          |   4 +-
 src/components/Modal/__tests__/Modal.test.js  |   2 +-
 src/components/Poll/Poll.tsx                  |   8 +-
 .../Poll/PollActions/AddCommentForm.tsx       |   4 +-
 .../Poll/PollActions/EndPollDialog.tsx        |   2 +-
 .../Poll/PollActions/PollActions.tsx          |  55 +-
 .../Poll/PollActions/PollAnswerList.tsx       |  13 +-
 .../Poll/PollActions/PollOptionsFullList.tsx  |   4 +-
 .../PollResults/PollOptionVotesList.tsx       |  17 +-
 .../PollResults/PollOptionWithLatestVotes.tsx |  23 +-
 .../PollResults/PollOptionWithVotesHeader.tsx |  13 +-
 .../PollActions/PollResults/PollResults.tsx   |  14 +-
 .../PollActions/SuggestPollOptionForm.tsx     |   6 +-
 src/components/Poll/PollContent.tsx           |  10 +-
 .../PollCreationDialog/OptionFieldSet.tsx     |  25 +-
 .../PollCreationDialog/PollCreationDialog.tsx |  27 +-
 .../PollCreationDialogControls.tsx            |  13 +-
 src/components/Poll/PollHeader.tsx            |  12 +-
 src/components/Poll/PollOptionList.tsx        |  11 +-
 src/components/Poll/PollOptionSelector.tsx    |  34 +-
 src/components/Poll/PollVote.tsx              |  16 +-
 src/components/Poll/QuotedPoll.tsx            |   9 +-
 src/components/Poll/__tests__/Poll.test.js    |  10 +-
 .../Poll/__tests__/PollActions.test.js        |  23 +-
 .../Poll/__tests__/PollCreationDialog.test.js |  47 +-
 .../Poll/__tests__/PollHeader.test.js         |  20 +-
 .../Poll/__tests__/PollOptionList.test.js     |  28 +-
 .../__tests__/SuggestPollOptionForm.test.js   |   4 +-
 .../Poll/hooks/useManagePollVotesRealtime.ts  |  20 +-
 .../Poll/hooks/usePollAnswerPagination.ts     |  22 +-
 .../hooks/usePollOptionVotesPagination.ts     |  23 +-
 .../ReactFileUtilities/FileIcon/FileIcon.tsx  |   9 +-
 .../FileIcon/FileIconSet.tsx                  |  84 ++-
 .../ReactFileUtilities/FileIcon/iconMap.ts    |   5 +-
 .../ReactFileUtilities/FileIcon/mimeTypes.ts  |  10 +-
 .../ReactFileUtilities/ImageDropzone.tsx      |  14 +-
 .../ReactFileUtilities/UploadButton.tsx       |  14 +-
 src/components/ReactFileUtilities/utils.ts    |  12 +-
 src/components/Reactions/ReactionSelector.tsx |  18 +-
 .../Reactions/ReactionSelectorWithButton.tsx  |  14 +-
 src/components/Reactions/ReactionsList.tsx    |  28 +-
 .../Reactions/ReactionsListModal.tsx          |  52 +-
 .../Reactions/SimpleReactionsList.tsx         |  18 +-
 src/components/Reactions/SpriteImage.tsx      |   8 +-
 .../__tests__/ReactionSelector.test.js        |   4 +-
 .../Reactions/__tests__/ReactionsList.test.js |  34 +-
 .../Reactions/hooks/useFetchReactions.ts      |   9 +-
 .../Reactions/hooks/useProcessReactions.tsx   |  15 +-
 src/components/Reactions/reactionOptions.tsx  |  26 +-
 src/components/Reactions/types.ts             |   9 +-
 src/components/Reactions/utils/utils.ts       |   4 +-
 .../SafeAnchor/__tests__/SafeAnchor.test.js   |   4 +-
 src/components/Thread/Thread.tsx              |  24 +-
 src/components/Thread/ThreadHead.tsx          |   7 +-
 src/components/Thread/ThreadHeader.tsx        |   4 +-
 .../Thread/__tests__/Thread.test.js           |  40 +-
 .../Thread/__tests__/ThreadStart.test.js      |   6 +-
 src/components/Threads/ThreadContext.tsx      |   5 +-
 .../Threads/ThreadList/ThreadList.tsx         |   2 +-
 .../Threads/ThreadList/ThreadListItem.tsx     |   5 +-
 .../Threads/ThreadList/ThreadListItemUI.tsx   |  20 +-
 src/components/Threads/icons.tsx              |   1 -
 src/components/Tooltip/Tooltip.tsx            |   2 +-
 .../TypingIndicator/TypingIndicator.tsx       |   5 +-
 .../__tests__/TypingIndicator.test.js         |  18 +-
 .../UserItem/__tests__/UserItem.test.js       |   2 +-
 src/components/Window/Window.tsx              |   4 +-
 .../Window/__tests__/Window.test.js           |  27 +-
 src/context/AttachmentSelectorContext.tsx     |   4 +-
 src/context/ChannelActionContext.tsx          |  34 +-
 src/context/ChannelListContext.tsx            |  14 +-
 src/context/ChannelStateContext.tsx           |  22 +-
 src/context/ChatContext.tsx                   |  16 +-
 src/context/ComponentContext.tsx              |  35 +-
 src/context/DialogManagerContext.tsx          |   5 +-
 src/context/MessageBounceContext.tsx          |  24 +-
 src/context/MessageContext.tsx                |  25 +-
 src/context/MessageInputContext.tsx           |   6 +-
 src/context/MessageListContext.tsx            |   4 +-
 src/context/PollContext.tsx                   |  10 +-
 src/context/TranslationContext.tsx            |   4 +-
 src/context/TypingContext.tsx                 |  14 +-
 src/context/VirtualizedMessageListContext.tsx |   4 +-
 src/context/WithComponents.tsx                |   6 +-
 src/context/utils/getDisplayName.ts           |   5 +-
 .../MessageActions/MessageActions.tsx         |  18 +-
 src/experimental/MessageActions/defaults.tsx  |  41 +-
 .../hooks/useBaseMessageActionSetFilter.ts    |   3 +-
 src/i18n/Streami18n.ts                        |  23 +-
 src/i18n/__tests__/Streami18n.test.js         |  57 +-
 src/i18n/__tests__/utils.test.js              |  34 +-
 src/i18n/utils.ts                             |  98 ++--
 src/mock-builders/__test__/translator.test.js |  13 +-
 src/mock-builders/api/index.js                |   5 +-
 src/mock-builders/generator/attachment.js     | 151 ++----
 src/mock-builders/generator/channel.js        |   4 +-
 src/mock-builders/index.js                    |   1 -
 src/mock-builders/utils.js                    |  17 +-
 src/plugins/Emojis/EmojiPicker.tsx            |   4 +-
 src/plugins/encoders/mp3.ts                   |  10 +-
 src/store/hooks/useStateStore.ts              |   6 +-
 src/stories/add-message.stories.tsx           |   6 +-
 src/stories/attachment-sizing.stories.tsx     |  10 +-
 src/stories/edit-message.stories.tsx          |   8 +-
 src/stories/hello.stories.tsx                 |   1 -
 src/stories/jump-to-message.stories.tsx       |   1 -
 src/stories/mark-read.stories.tsx             |   6 +-
 .../message-status-readby-tooltip.stories.tsx |  11 +-
 .../navigate-long-message-lists.stories.tsx   |  10 +-
 src/stories/pin-message.stories.tsx           |   4 +-
 .../toggle-message-actions.stories.tsx        |  10 +-
 src/stories/utils.tsx                         |   3 +-
 src/types/types.ts                            |   6 +-
 src/utils/__tests__/getChannel.test.js        |   5 +-
 src/utils/getChannel.ts                       |  12 +-
 385 files changed, 5768 insertions(+), 3330 deletions(-)

diff --git a/e2e/fixtures/data/attachment.mjs b/e2e/fixtures/data/attachment.mjs
index 5e468d85f..f89dbaa54 100644
--- a/e2e/fixtures/data/attachment.mjs
+++ b/e2e/fixtures/data/attachment.mjs
@@ -1,4 +1,4 @@
-/* eslint-disable sort-keys */
+ 
 const smallImageAttachment = [
   {
     type: 'image',
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 994bb3a3c..80c0b1af9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -57,10 +57,7 @@ export default tseslint.config(
       'object-shorthand': 'warn',
       'prefer-const': 'warn',
       'require-await': 'error',
-      "sort-destructure-keys/sort-destructure-keys": [
-      	"error",
-      	{ caseSensitive: false },
-      ],
+      'sort-destructure-keys/sort-destructure-keys': ['error', { caseSensitive: false }],
       'sort-imports': [
         'error',
         {
diff --git a/src/components/AIStateIndicator/AIStateIndicator.tsx b/src/components/AIStateIndicator/AIStateIndicator.tsx
index 2bbe572f1..977bd240a 100644
--- a/src/components/AIStateIndicator/AIStateIndicator.tsx
+++ b/src/components/AIStateIndicator/AIStateIndicator.tsx
@@ -8,20 +8,19 @@ import { useChannelStateContext, useTranslationContext } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AIStateIndicatorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   channel?: Channel<StreamChatGenerics>;
 };
 
 export const AIStateIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel: channelFromProps,
 }: AIStateIndicatorProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
-  const { channel: channelFromContext } = useChannelStateContext<StreamChatGenerics>(
-    'AIStateIndicator',
-  );
+  const { channel: channelFromContext } =
+    useChannelStateContext<StreamChatGenerics>('AIStateIndicator');
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
   const allowedStates = {
diff --git a/src/components/AIStateIndicator/hooks/useAIState.ts b/src/components/AIStateIndicator/hooks/useAIState.ts
index 54e955a6f..33d744fda 100644
--- a/src/components/AIStateIndicator/hooks/useAIState.ts
+++ b/src/components/AIStateIndicator/hooks/useAIState.ts
@@ -18,7 +18,7 @@ export const AIStates = {
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
 export const useAIState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel?: Channel<StreamChatGenerics>,
 ): { aiState: AIState } => {
diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
index f1c32c43a..93e70adcc 100644
--- a/src/components/Attachment/Attachment.tsx
+++ b/src/components/Attachment/Attachment.tsx
@@ -55,7 +55,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
 ] as const;
 
 export type AttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
   attachments: StreamAttachment<StreamChatGenerics>[];
@@ -87,14 +87,17 @@ export type AttachmentProps<
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
 export const Attachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AttachmentProps<StreamChatGenerics>,
 ) => {
   const { attachments } = props;
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
+  const groupedAttachments = useMemo(
+    () => renderGroupedAttachments(props),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [attachments],
+  );
 
   return (
     <div className='str-chat__attachment-list'>
@@ -107,13 +110,13 @@ export const Attachment = <
 };
 
 const renderGroupedAttachments = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachments,
   ...rest
 }: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter((attachment) =>
-    isUploadedImage(attachment),
+  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter(
+    (attachment) => isUploadedImage(attachment),
   );
 
   const containers = attachments
@@ -169,7 +172,7 @@ const renderGroupedAttachments = <
 };
 
 const getAttachmentType = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: AttachmentProps<StreamChatGenerics>['attachments'][number],
 ): keyof typeof CONTAINER_MAP => {
diff --git a/src/components/Attachment/AttachmentActions.tsx b/src/components/Attachment/AttachmentActions.tsx
index 72fef6982..ec323edfb 100644
--- a/src/components/Attachment/AttachmentActions.tsx
+++ b/src/components/Attachment/AttachmentActions.tsx
@@ -7,7 +7,7 @@ import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler'
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AttachmentActionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> & {
   /** A list of actions */
   actions: Action[];
@@ -20,7 +20,7 @@ export type AttachmentActionsProps<
 };
 
 const UnMemoizedAttachmentActions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AttachmentActionsProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/Attachment/AttachmentContainer.tsx b/src/components/Attachment/AttachmentContainer.tsx
index 94e73d179..cb003a423 100644
--- a/src/components/Attachment/AttachmentContainer.tsx
+++ b/src/components/Attachment/AttachmentContainer.tsx
@@ -30,13 +30,13 @@ import type {
 import type { Attachment } from 'stream-chat';
 
 export type AttachmentContainerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
   componentType: AttachmentComponentType;
 };
 export const AttachmentWithinContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   children,
@@ -50,8 +50,8 @@ export const AttachmentWithinContainer = <
       componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
         ? 'no-image'
         : attachment?.actions?.length
-        ? 'actions'
-        : '';
+          ? 'actions'
+          : '';
   }
 
   const classNames = clsx(
@@ -59,7 +59,8 @@ export const AttachmentWithinContainer = <
     {
       [`str-chat__message-attachment--${componentType}`]: componentType,
       [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
-      [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+      [`str-chat__message-attachment--${componentType}--${extra}`]:
+        componentType && extra,
       'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
       'str-chat__message-attachment-with-actions': extra === 'actions',
     },
@@ -69,7 +70,7 @@ export const AttachmentWithinContainer = <
 };
 
 export const AttachmentActionsContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   actionHandler,
   attachment,
@@ -108,7 +109,7 @@ function getCssDimensionsVariables(url: string) {
 }
 
 export const GalleryContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   Gallery = DefaultGallery,
@@ -150,7 +151,7 @@ export const GalleryContainer = <
 };
 
 export const ImageContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
@@ -194,7 +195,7 @@ export const ImageContainer = <
 };
 
 export const CardContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
@@ -220,7 +221,7 @@ export const CardContainer = <
 };
 
 export const FileContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   File = DefaultFile,
@@ -234,7 +235,7 @@ export const FileContainer = <
   );
 };
 export const AudioContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   Audio = DefaultAudio,
@@ -247,11 +248,11 @@ export const AudioContainer = <
 );
 
 export const VoiceRecordingContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
-  VoiceRecording = DefaultVoiceRecording,
   isQuoted,
+  VoiceRecording = DefaultVoiceRecording,
 }: RenderAttachmentProps<StreamChatGenerics>) => (
   <AttachmentWithinContainer attachment={attachment} componentType='voiceRecording'>
     <div className='str-chat__attachment'>
@@ -261,18 +262,17 @@ export const VoiceRecordingContainer = <
 );
 
 export const MediaContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: RenderAttachmentProps<StreamChatGenerics>,
 ) => {
   const { attachment, Media = ReactPlayer } = props;
   const componentType = 'media';
-  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
+  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =
+    useChannelStateContext();
   const videoElement = useRef<HTMLDivElement>(null);
-  const [
-    attachmentConfiguration,
-    setAttachmentConfiguration,
-  ] = useState<VideoAttachmentConfiguration>();
+  const [attachmentConfiguration, setAttachmentConfiguration] =
+    useState<VideoAttachmentConfiguration>();
 
   useLayoutEffect(() => {
     if (videoElement.current && videoAttachmentSizeHandler) {
@@ -319,7 +319,7 @@ export const MediaContainer = <
 };
 
 export const UnsupportedAttachmentContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   UnsupportedAttachment = DefaultUnsupportedAttachment,
diff --git a/src/components/Attachment/Audio.tsx b/src/components/Attachment/Audio.tsx
index baff2d7ef..c9b76a100 100644
--- a/src/components/Attachment/Audio.tsx
+++ b/src/components/Attachment/Audio.tsx
@@ -8,14 +8,14 @@ import { useAudioController } from './hooks/useAudioController';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AudioProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   // fixme: rename og to attachment
   og: Attachment<StreamChatGenerics>;
 };
 
 const UnMemoizedAudio = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AudioProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/Attachment/Card.tsx b/src/components/Attachment/Card.tsx
index 93d7e39aa..b69605593 100644
--- a/src/components/Attachment/Card.tsx
+++ b/src/components/Attachment/Card.tsx
@@ -41,8 +41,14 @@ const UnableToRenderCard = ({ type }: { type?: CardProps['type'] }) => {
   );
 };
 
-const SourceLink = ({ author_name, url }: Pick<CardProps, 'author_name'> & { url: string }) => (
-  <div className='str-chat__message-attachment-card--source-link' data-testid='card-source-link'>
+const SourceLink = ({
+  author_name,
+  url,
+}: Pick<CardProps, 'author_name'> & { url: string }) => (
+  <div
+    className='str-chat__message-attachment-card--source-link'
+    data-testid='card-source-link'
+  >
     <SafeAnchor
       className='str-chat__message-attachment-card--url'
       href={url}
@@ -68,7 +74,13 @@ const CardHeader = (props: CardHeaderProps) => {
   let visual = null;
   if (asset_url && type === 'video') {
     visual = (
-      <ReactPlayer className='react-player' controls height='100%' url={asset_url} width='100%' />
+      <ReactPlayer
+        className='react-player'
+        controls
+        height='100%'
+        url={asset_url}
+        width='100%'
+      />
     );
   } else if (image) {
     visual = (
@@ -104,7 +116,9 @@ const CardContent = (props: CardContentProps) => {
       ) : (
         <div className='str-chat__message-attachment-card--flex'>
           {url && <SourceLink author_name={author_name} url={url} />}
-          {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}
+          {title && (
+            <div className='str-chat__message-attachment-card--title'>{title}</div>
+          )}
           {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}
         </div>
       )}
@@ -139,9 +153,13 @@ export const CardAudio = ({
       )}
       <div className='str-chat__message-attachment-audio-widget--second-row'>
         {url && <SourceLink author_name={author_name} url={url} />}
-        {title && <div className='str-chat__message-attachment-audio-widget--title'>{title}</div>}
+        {title && (
+          <div className='str-chat__message-attachment-audio-widget--title'>{title}</div>
+        )}
         {text && (
-          <div className='str-chat__message-attachment-audio-widget--description'>{text}</div>
+          <div className='str-chat__message-attachment-audio-widget--description'>
+            {text}
+          </div>
         )}
       </div>
     </div>
@@ -158,7 +176,8 @@ const UnMemoizedCard = (props: CardProps) => {
   const dimensions: { height?: string; width?: string } = {};
 
   if (type === 'giphy' && typeof giphy !== 'undefined') {
-    const giphyVersion = giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];
+    const giphyVersion =
+      giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];
     image = giphyVersion.url;
     dimensions.height = giphyVersion.height;
     dimensions.width = giphyVersion.width;
@@ -169,7 +188,9 @@ const UnMemoizedCard = (props: CardProps) => {
   }
 
   return (
-    <div className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}>
+    <div
+      className={`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`}
+    >
       <CardHeader {...props} dimensions={dimensions} image={image} />
       <CardContent {...props} />
     </div>
diff --git a/src/components/Attachment/FileAttachment.tsx b/src/components/Attachment/FileAttachment.tsx
index 0e66e74a7..7380e11af 100644
--- a/src/components/Attachment/FileAttachment.tsx
+++ b/src/components/Attachment/FileAttachment.tsx
@@ -7,13 +7,13 @@ import { DownloadButton, FileSizeIndicator } from './components';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type FileAttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: Attachment<StreamChatGenerics>;
 };
 
 const UnMemoizedFileAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
 }: FileAttachmentProps<StreamChatGenerics>) => (
@@ -21,7 +21,10 @@ const UnMemoizedFileAttachment = <
     <FileIcon className='str-chat__file-icon' mimeType={attachment.mime_type} />
     <div className='str-chat__message-attachment-file--item-text'>
       <div className='str-chat__message-attachment-file--item-first-row'>
-        <div className='str-chat__message-attachment-file--item-name' data-testid='file-title'>
+        <div
+          className='str-chat__message-attachment-file--item-name'
+          data-testid='file-title'
+        >
           {attachment.title}
         </div>
         <DownloadButton assetUrl={attachment.asset_url} />
diff --git a/src/components/Attachment/UnsupportedAttachment.tsx b/src/components/Attachment/UnsupportedAttachment.tsx
index e738ec8fe..eb81a2bec 100644
--- a/src/components/Attachment/UnsupportedAttachment.tsx
+++ b/src/components/Attachment/UnsupportedAttachment.tsx
@@ -5,19 +5,22 @@ import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type UnsupportedAttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: Attachment<StreamChatGenerics>;
 };
 
 export const UnsupportedAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
 }: UnsupportedAttachmentProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext('UnsupportedAttachment');
   return (
-    <div className='str-chat__message-attachment-unsupported' data-testid='attachment-unsupported'>
+    <div
+      className='str-chat__message-attachment-unsupported'
+      data-testid='attachment-unsupported'
+    >
       <FileIcon className='str-chat__file-icon' />
       <div className='str-chat__message-attachment-unsupported__metadata'>
         <div
diff --git a/src/components/Attachment/VoiceRecording.tsx b/src/components/Attachment/VoiceRecording.tsx
index 2b1d62fe6..fa2687971 100644
--- a/src/components/Attachment/VoiceRecording.tsx
+++ b/src/components/Attachment/VoiceRecording.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
 
-import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar } from './components';
+import {
+  FileSizeIndicator,
+  PlaybackRateButton,
+  PlayButton,
+  WaveProgressBar,
+} from './components';
 import { useAudioController } from './hooks/useAudioController';
 import { displayDuration } from './utils';
 import { FileIcon } from '../ReactFileUtilities';
@@ -12,13 +17,16 @@ import type { DefaultStreamChatGenerics } from '../../types';
 const rootClassName = 'str-chat__message-attachment__voice-recording-widget';
 
 export type VoiceRecordingPlayerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'> & {
   /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
   playbackRates?: number[];
 };
 
-export const VoiceRecordingPlayer = ({ attachment, playbackRates }: VoiceRecordingPlayerProps) => {
+export const VoiceRecordingPlayer = ({
+  attachment,
+  playbackRates,
+}: VoiceRecordingPlayerProps) => {
   const { t } = useTranslationContext('VoiceRecordingPlayer');
   const {
     asset_url,
@@ -66,10 +74,17 @@ export const VoiceRecordingPlayer = ({ attachment, playbackRates }: VoiceRecordi
             {attachment.duration ? (
               displayDuration(displayedDuration)
             ) : (
-              <FileSizeIndicator fileSize={attachment.file_size} maximumFractionDigits={0} />
+              <FileSizeIndicator
+                fileSize={attachment.file_size}
+                maximumFractionDigits={0}
+              />
             )}
           </div>
-          <WaveProgressBar progress={progress} seek={seek} waveformData={waveform_data || []} />
+          <WaveProgressBar
+            progress={progress}
+            seek={seek}
+            waveformData={waveform_data || []}
+          />
         </div>
       </div>
       <div className='str-chat__message-attachment__voice-recording-widget__right-section'>
@@ -86,7 +101,7 @@ export const VoiceRecordingPlayer = ({ attachment, playbackRates }: VoiceRecordi
 };
 
 export type QuotedVoiceRecordingProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'>;
 
 export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {
@@ -109,7 +124,10 @@ export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps)
             {attachment.duration ? (
               displayDuration(attachment.duration)
             ) : (
-              <FileSizeIndicator fileSize={attachment.file_size} maximumFractionDigits={0} />
+              <FileSizeIndicator
+                fileSize={attachment.file_size}
+                maximumFractionDigits={0}
+              />
             )}
           </div>
         </div>
@@ -120,7 +138,7 @@ export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps)
 };
 
 export type VoiceRecordingProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The attachment object from the message's attachment list. */
   attachment: Attachment<StreamChatGenerics>;
diff --git a/src/components/Attachment/__tests__/Attachment.test.js b/src/components/Attachment/__tests__/Attachment.test.js
index ee24ee014..29a289bc9 100644
--- a/src/components/Attachment/__tests__/Attachment.test.js
+++ b/src/components/Attachment/__tests__/Attachment.test.js
@@ -28,7 +28,9 @@ const Media = (props) => <div data-testid='media-attachment'>{props.customTestId
 const AttachmentActions = () => <div data-testid='attachment-actions'></div>;
 const Image = (props) => <div data-testid='image-attachment'>{props.customTestId}</div>;
 const File = (props) => <div data-testid='file-attachment'>{props.customTestId}</div>;
-const Gallery = (props) => <div data-testid='gallery-attachment'>{props.customTestId}</div>;
+const Gallery = (props) => (
+  <div data-testid='gallery-attachment'>{props.customTestId}</div>
+);
 
 const ATTACHMENTS = {
   scraped: {
@@ -102,12 +104,15 @@ describe('attachment', () => {
       ${cases.file.attachments}    | ${cases.file.case}    | ${cases.file.renderedComponent}    | ${cases.file.testId}
       ${cases.gallery.attachments} | ${cases.gallery.case} | ${cases.gallery.renderedComponent} | ${cases.gallery.testId}
       ${cases.image.attachments}   | ${cases.image.case}   | ${cases.image.renderedComponent}   | ${cases.image.testId}
-    `('should  render $renderedComponent component for $case', async ({ attachments, testId }) => {
-      renderComponent({ attachments });
-      await waitFor(() => {
-        expect(screen.getByTestId(testId)).toBeInTheDocument();
-      });
-    });
+    `(
+      'should  render $renderedComponent component for $case',
+      async ({ attachments, testId }) => {
+        renderComponent({ attachments });
+        await waitFor(() => {
+          expect(screen.getByTestId(testId)).toBeInTheDocument();
+        });
+      },
+    );
 
     it.each(SUPPORTED_VIDEO_FORMATS.map((f) => [f]))(
       'should render Media component for video of %s mime-type attachment',
@@ -213,7 +218,6 @@ describe('attachment', () => {
         ],
       });
       await waitFor(() => {
-        /* eslint-disable jest-dom/prefer-in-document */
         const Card = queryAllByTestId('card-attachment');
 
         expect(Card).toHaveLength(3);
diff --git a/src/components/Attachment/__tests__/AttachmentActions.test.js b/src/components/Attachment/__tests__/AttachmentActions.test.js
index 9fb11d6fc..d3074d2e0 100644
--- a/src/components/Attachment/__tests__/AttachmentActions.test.js
+++ b/src/components/Attachment/__tests__/AttachmentActions.test.js
@@ -48,7 +48,6 @@ describe('AttachmentActions', () => {
     fireEvent.click(getByTestId(actions[1].name));
 
     await waitFor(() => {
-      // eslint-disable-next-line jest/prefer-called-with
       expect(actionHandler).toHaveBeenCalledTimes(2);
     });
   });
diff --git a/src/components/Attachment/__tests__/Audio.test.js b/src/components/Attachment/__tests__/Audio.test.js
index ff5388325..b88b20109 100644
--- a/src/components/Attachment/__tests__/Audio.test.js
+++ b/src/components/Attachment/__tests__/Audio.test.js
@@ -15,7 +15,7 @@ const originalConsoleError = console.error;
 jest.spyOn(console, 'error').mockImplementationOnce((...errorOrTextorArg) => {
   const msg = Array.isArray(errorOrTextorArg)
     ? errorOrTextorArg[0]
-    : errorOrTextorArg.message ?? errorOrTextorArg;
+    : (errorOrTextorArg.message ?? errorOrTextorArg);
   if (msg.match('Not implemented')) return;
   originalConsoleError(...errorOrTextorArg);
 });
@@ -70,7 +70,9 @@ describe('Audio', () => {
       .spyOn(HTMLDivElement.prototype, 'getBoundingClientRect')
       .mockImplementationOnce(() => ({ width: 120, x: 0 }));
 
-    jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'set').mockImplementationOnce(() => {});
+    jest
+      .spyOn(HTMLAudioElement.prototype, 'currentTime', 'set')
+      .mockImplementationOnce(() => {});
     jest.spyOn(HTMLAudioElement.prototype, 'duration', 'get').mockReturnValue(120);
 
     act(() => {
@@ -171,7 +173,10 @@ describe('Audio', () => {
     jest.advanceTimersByTime(2000);
     await waitFor(() => {
       expect(audioPauseMock).toHaveBeenCalledWith();
-      expect(addNotificationSpy).toHaveBeenCalledWith('Failed to play the recording', 'error');
+      expect(addNotificationSpy).toHaveBeenCalledWith(
+        'Failed to play the recording',
+        'error',
+      );
     });
 
     jest.useRealTimers();
@@ -185,8 +190,12 @@ describe('Audio', () => {
       og: AUDIO,
     });
     const audio = container.querySelector('audio');
-    const audioPlayMock = jest.spyOn(audio, 'play').mockRejectedValueOnce(new Error(errorText));
-    const audioCanPlayTypeMock = jest.spyOn(audio, 'canPlayType').mockReturnValue('maybe');
+    const audioPlayMock = jest
+      .spyOn(audio, 'play')
+      .mockRejectedValueOnce(new Error(errorText));
+    const audioCanPlayTypeMock = jest
+      .spyOn(audio, 'canPlayType')
+      .mockReturnValue('maybe');
 
     expect(await playButton()).toBeInTheDocument();
     expect(await pauseButton()).not.toBeInTheDocument();
@@ -230,8 +239,12 @@ describe('Audio', () => {
   it('should show the correct progress', async () => {
     const { container } = renderComponent({ og: AUDIO });
 
-    jest.spyOn(HTMLAudioElement.prototype, 'duration', 'get').mockImplementationOnce(() => 100);
-    jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'get').mockImplementationOnce(() => 50);
+    jest
+      .spyOn(HTMLAudioElement.prototype, 'duration', 'get')
+      .mockImplementationOnce(() => 100);
+    jest
+      .spyOn(HTMLAudioElement.prototype, 'currentTime', 'get')
+      .mockImplementationOnce(() => 50);
     const audioElement = container.querySelector('audio');
     fireEvent.timeUpdate(audioElement);
 
diff --git a/src/components/Attachment/__tests__/Card.test.js b/src/components/Attachment/__tests__/Card.test.js
index 826f0a87d..5582dd599 100644
--- a/src/components/Attachment/__tests__/Card.test.js
+++ b/src/components/Attachment/__tests__/Card.test.js
@@ -142,7 +142,8 @@ describe('Card', () => {
             thumb_url: undefined,
           },
           props: 'asset and neither og image URL is available',
-          render: 'content part with title and text only and without the header part of the Card',
+          render:
+            'content part with title and text only and without the header part of the Card',
         },
       );
     } else if (type === 'video') {
diff --git a/src/components/Attachment/__tests__/VoiceRecording.test.js b/src/components/Attachment/__tests__/VoiceRecording.test.js
index ac7704642..fb145257f 100644
--- a/src/components/Attachment/__tests__/VoiceRecording.test.js
+++ b/src/components/Attachment/__tests__/VoiceRecording.test.js
@@ -16,7 +16,9 @@ const attachment = generateVoiceRecordingAttachment();
 
 window.ResizeObserver = ResizeObserverMock;
 
-jest.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 120 });
+jest
+  .spyOn(HTMLDivElement.prototype, 'getBoundingClientRect')
+  .mockReturnValue({ width: 120 });
 
 const clickPlay = async () => {
   await act(async () => {
@@ -57,7 +59,9 @@ describe('VoiceRecordingPlayer', () => {
   afterAll(jest.restoreAllMocks);
 
   it('should not render the component if asset_url is missing', () => {
-    const { container } = renderComponent({ attachment: { ...attachment, asset_url: undefined } });
+    const { container } = renderComponent({
+      attachment: { ...attachment, asset_url: undefined },
+    });
     expect(container).toBeEmptyDOMElement();
   });
   it('should render title if present', () => {
@@ -65,7 +69,9 @@ describe('VoiceRecordingPlayer', () => {
     expect(getByTestId('voice-recording-title')).toHaveTextContent(attachment.title);
   });
   it('should render fallback title if attachment title not present', () => {
-    const { getByTestId } = renderComponent({ attachment: { ...attachment, title: undefined } });
+    const { getByTestId } = renderComponent({
+      attachment: { ...attachment, title: undefined },
+    });
     expect(getByTestId('voice-recording-title')).toHaveTextContent(FALLBACK_TITLE);
   });
 
@@ -129,8 +135,12 @@ describe('VoiceRecordingPlayer', () => {
   it('should show the correct progress', async () => {
     const { container } = renderComponent({ attachment });
 
-    jest.spyOn(HTMLAudioElement.prototype, 'duration', 'get').mockImplementationOnce(() => 100);
-    jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'get').mockImplementationOnce(() => 50);
+    jest
+      .spyOn(HTMLAudioElement.prototype, 'duration', 'get')
+      .mockImplementationOnce(() => 100);
+    jest
+      .spyOn(HTMLAudioElement.prototype, 'currentTime', 'get')
+      .mockImplementationOnce(() => 50);
     const audioElement = container.querySelector('audio');
     fireEvent.timeUpdate(audioElement);
 
diff --git a/src/components/Attachment/__tests__/WaveProgressBar.test.js b/src/components/Attachment/__tests__/WaveProgressBar.test.js
index 91be6ab09..85dcc78af 100644
--- a/src/components/Attachment/__tests__/WaveProgressBar.test.js
+++ b/src/components/Attachment/__tests__/WaveProgressBar.test.js
@@ -28,21 +28,28 @@ describe('WaveProgressBar', () => {
 
   it('is not rendered if no space available', () => {
     getBoundingClientRect.mockReturnValueOnce({ width: 0 });
-    render(<WaveProgressBar amplitudesCount={5} seek={jest.fn()} waveformData={originalSample} />);
+    render(
+      <WaveProgressBar
+        amplitudesCount={5}
+        seek={jest.fn()}
+        waveformData={originalSample}
+      />,
+    );
     expect(screen.queryByTestId(BAR_ROOT_TEST_ID)).not.toBeInTheDocument();
   });
 
   it('renders with default number of bars', () => {
     render(<WaveProgressBar seek={jest.fn()} waveformData={originalSample} />);
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
-      '1px',
-    );
+    expect(
+      root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width'),
+    ).toBe('1px');
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
     expect(
       bars.every(
         (b) =>
-          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '2px',
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') ===
+          '2px',
       ),
     ).toBeTruthy();
     expect(screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID)).toHaveLength(40);
@@ -58,14 +65,15 @@ describe('WaveProgressBar', () => {
       />,
     );
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
-      '5px',
-    );
+    expect(
+      root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width'),
+    ).toBe('5px');
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
     expect(
       bars.every(
         (b) =>
-          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '3px',
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') ===
+          '3px',
       ),
     ).toBeTruthy();
     expect(bars).toHaveLength(15);
@@ -80,14 +88,15 @@ describe('WaveProgressBar', () => {
       activeObserver.cb([{ contentRect: { width: 21 } }]);
     });
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
-      '1px',
-    );
+    expect(
+      root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width'),
+    ).toBe('1px');
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
     expect(
       bars.every(
         (b) =>
-          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '2px',
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') ===
+          '2px',
       ),
     ).toBeTruthy();
     expect(screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID)).toHaveLength(7);
@@ -102,7 +111,11 @@ describe('WaveProgressBar', () => {
 
   it('is rendered with zero progress by default if waveform data is available', () => {
     const { container } = render(
-      <WaveProgressBar amplitudesCount={5} seek={jest.fn()} waveformData={originalSample} />,
+      <WaveProgressBar
+        amplitudesCount={5}
+        seek={jest.fn()}
+        waveformData={originalSample}
+      />,
     );
     expect(container).toMatchSnapshot();
     expect(screen.getByTestId(PROGRESS_INDICATOR_TEST_ID)).toBeInTheDocument();
diff --git a/src/components/Attachment/__tests__/audioSampling.test.js b/src/components/Attachment/__tests__/audioSampling.test.js
index f018ad5a0..8d677f689 100644
--- a/src/components/Attachment/__tests__/audioSampling.test.js
+++ b/src/components/Attachment/__tests__/audioSampling.test.js
@@ -15,7 +15,9 @@ describe('amplitude sampling', () => {
     });
 
     it('should return original values if the original sample size equals the target', () => {
-      expect(upSample(originalSample, originalSample.length)).toHaveLength(originalSample.length);
+      expect(upSample(originalSample, originalSample.length)).toHaveLength(
+        originalSample.length,
+      );
     });
 
     it('should fill each bucket to reach the target sample size', () => {
@@ -35,7 +37,9 @@ describe('amplitude sampling', () => {
     });
 
     it('should return original values if the original sample size equals the target', () => {
-      expect(downSample(originalSample, originalSample.length)).toHaveLength(originalSample.length);
+      expect(downSample(originalSample, originalSample.length)).toHaveLength(
+        originalSample.length,
+      );
     });
 
     it('should return a mean of original values if the target output size is 1', () => {
diff --git a/src/components/Attachment/attachment-sizing.tsx b/src/components/Attachment/attachment-sizing.tsx
index 440961d6f..2806d67e8 100644
--- a/src/components/Attachment/attachment-sizing.tsx
+++ b/src/components/Attachment/attachment-sizing.tsx
@@ -1,7 +1,10 @@
 import type { Attachment } from 'stream-chat';
 import * as linkify from 'linkifyjs';
 
-export const getImageAttachmentConfiguration = (attachment: Attachment, element: HTMLElement) => {
+export const getImageAttachmentConfiguration = (
+  attachment: Attachment,
+  element: HTMLElement,
+) => {
   let newUrl = undefined;
 
   const urlToTest = attachment.image_url || attachment.thumb_url || '';
@@ -60,7 +63,10 @@ const getSizingRestrictions = (url: URL, htmlElement: HTMLElement) => {
   const cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
   let resizeDimensions: { height: number; width: number } | undefined;
 
-  if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) && cssSizeRestriction.maxWidth) {
+  if (
+    (cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
+    cssSizeRestriction.maxWidth
+  ) {
     resizeDimensions = getResizeDimensions(
       originalHeight,
       originalWidth,
@@ -87,7 +93,9 @@ const getResizeDimensions = (
 
 const getCSSSizeRestrictions = (htmlElement: HTMLElement) => {
   const computedStylesheet = getComputedStyle(htmlElement);
-  const height = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
+  const height = getValueRepresentationOfCSSProperty(
+    computedStylesheet.getPropertyValue('height'),
+  );
   const maxHeight = getValueRepresentationOfCSSProperty(
     computedStylesheet.getPropertyValue('max-height'),
   );
@@ -112,7 +120,10 @@ const getValueRepresentationOfCSSProperty = (property: string) => {
   return isNaN(number) ? undefined : number;
 };
 
-const addResizingParamsToUrl = (resizeDimensions: { height: number; width: number }, url: URL) => {
+const addResizingParamsToUrl = (
+  resizeDimensions: { height: number; width: number },
+  url: URL,
+) => {
   url.searchParams.set('h', resizeDimensions.height.toString());
   url.searchParams.set('w', resizeDimensions.width.toString());
 };
diff --git a/src/components/Attachment/audioSampling.ts b/src/components/Attachment/audioSampling.ts
index ff8b7638d..d9ece97cf 100644
--- a/src/components/Attachment/audioSampling.ts
+++ b/src/components/Attachment/audioSampling.ts
@@ -4,8 +4,8 @@ export const resampleWaveformData = (waveformData: number[], amplitudesCount: nu
   waveformData.length === amplitudesCount
     ? waveformData
     : waveformData.length > amplitudesCount
-    ? downSample(waveformData, amplitudesCount)
-    : upSample(waveformData, amplitudesCount);
+      ? downSample(waveformData, amplitudesCount)
+      : upSample(waveformData, amplitudesCount);
 
 /**
  * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
@@ -42,14 +42,21 @@ export function downSample(data: number[], targetOutputSize: number): number[] {
       currentPointIndex < nextBucketStartIndex;
       currentPointIndex++
     ) {
-      const countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+      const countUnitsBetweenAtoB =
+        Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
       const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
       const currentPointValue = data[currentPointIndex];
 
       triangleArea = triangleAreaHeron(
-        triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB),
+        triangleBase(
+          Math.abs(previousBucketRefPoint - currentPointValue),
+          countUnitsBetweenAtoB,
+        ),
         triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC),
-        triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC),
+        triangleBase(
+          Math.abs(previousBucketRefPoint - nextBucketMean),
+          countUnitsBetweenAtoC,
+        ),
       );
 
       if (triangleArea > maxArea) {
@@ -72,8 +79,13 @@ const triangleAreaHeron = (a: number, b: number, c: number) => {
   return Math.sqrt(s * (s - a) * (s - b) * (s - c));
 };
 const triangleBase = (a: number, b: number) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
-const mean = (values: number[]) => values.reduce((acc, value) => acc + value, 0) / values.length;
-const getNextBucketMean = (data: number[], currentBucketIndex: number, bucketSize: number) => {
+const mean = (values: number[]) =>
+  values.reduce((acc, value) => acc + value, 0) / values.length;
+const getNextBucketMean = (
+  data: number[],
+  currentBucketIndex: number,
+  bucketSize: number,
+) => {
   const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
   let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
   nextNextBucketStartIndex =
@@ -88,7 +100,9 @@ export const upSample = (values: number[], targetSize: number) => {
   }
 
   if (values.length > targetSize) {
-    console.warn('Requested to extend the waveformData that is longer than the target list size');
+    console.warn(
+      'Requested to extend the waveformData that is longer than the target list size',
+    );
     return values;
   }
 
diff --git a/src/components/Attachment/components/FileSizeIndicator.tsx b/src/components/Attachment/components/FileSizeIndicator.tsx
index a9f26e55e..5fdc0da42 100644
--- a/src/components/Attachment/components/FileSizeIndicator.tsx
+++ b/src/components/Attachment/components/FileSizeIndicator.tsx
@@ -11,7 +11,10 @@ type FileSizeIndicatorProps = {
   maximumFractionDigits?: number;
 };
 
-export const FileSizeIndicator = ({ fileSize, maximumFractionDigits }: FileSizeIndicatorProps) => {
+export const FileSizeIndicator = ({
+  fileSize,
+  maximumFractionDigits,
+}: FileSizeIndicatorProps) => {
   if (!(fileSize && Number.isFinite(Number(fileSize)))) return null;
 
   return (
diff --git a/src/components/Attachment/components/ProgressBar.tsx b/src/components/Attachment/components/ProgressBar.tsx
index 1e5d5fd10..20a17b3d1 100644
--- a/src/components/Attachment/components/ProgressBar.tsx
+++ b/src/components/Attachment/components/ProgressBar.tsx
@@ -8,7 +8,10 @@ export type ProgressBarProps = {
 
 export const ProgressBar = ({ className, onClick, progress }: ProgressBarProps) => (
   <div
-    className={clsx('str-chat__message-attachment-audio-widget--progress-track', className)}
+    className={clsx(
+      'str-chat__message-attachment-audio-widget--progress-track',
+      className,
+    )}
     data-progress={progress}
     data-testid='audio-progress'
     onClick={onClick}
diff --git a/src/components/Attachment/components/WaveProgressBar.tsx b/src/components/Attachment/components/WaveProgressBar.tsx
index 265280e47..ffca2d33a 100644
--- a/src/components/Attachment/components/WaveProgressBar.tsx
+++ b/src/components/Attachment/components/WaveProgressBar.tsx
@@ -144,7 +144,8 @@ export const WaveProgressBar = ({
           key={`amplitude-${i}`}
           style={
             {
-              '--str-chat__voice-recording-amplitude-bar-width': trackAxisX?.barWidth + 'px',
+              '--str-chat__voice-recording-amplitude-bar-width':
+                trackAxisX?.barWidth + 'px',
               '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                 ? amplitude * 100 + '%'
                 : '0%',
diff --git a/src/components/Attachment/hooks/useAudioController.ts b/src/components/Attachment/hooks/useAudioController.ts
index d18500c4e..b9b0112a6 100644
--- a/src/components/Attachment/hooks/useAudioController.ts
+++ b/src/components/Attachment/hooks/useAudioController.ts
@@ -52,7 +52,9 @@ export const useAudioController = ({
     clearTimeout(playTimeout.current);
     playTimeout.current = undefined;
     if (mimeType && !audioRef.current.canPlayType(mimeType)) {
-      registerError(new Error(t('Recording format is not supported and cannot be reproduced')));
+      registerError(
+        new Error(t('Recording format is not supported and cannot be reproduced')),
+      );
       setCanPlayRecord(false);
       return;
     }
@@ -149,7 +151,9 @@ export const useAudioController = ({
     playbackError,
     playbackRate: playbackRates[playbackRateIndex],
     progress:
-      audioRef.current && secondsElapsed ? (secondsElapsed / audioRef.current.duration) * 100 : 0,
+      audioRef.current && secondsElapsed
+        ? (secondsElapsed / audioRef.current.duration) * 100
+        : 0,
     secondsElapsed,
     seek,
     togglePlay,
diff --git a/src/components/Attachment/utils.tsx b/src/components/Attachment/utils.tsx
index 26c8696dc..7cee47ca5 100644
--- a/src/components/Attachment/utils.tsx
+++ b/src/components/Attachment/utils.tsx
@@ -13,91 +13,96 @@ import type {
   VoiceRecordingAttachment,
 } from '../MessageInput';
 
-export const SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/ogg', 'video/webm', 'video/quicktime'];
+export const SUPPORTED_VIDEO_FORMATS = [
+  'video/mp4',
+  'video/ogg',
+  'video/webm',
+  'video/quicktime',
+];
 
-export type AttachmentComponentType = typeof ATTACHMENT_GROUPS_ORDER[number];
+export type AttachmentComponentType = (typeof ATTACHMENT_GROUPS_ORDER)[number];
 
 export type GroupedRenderedAttachment = Record<AttachmentComponentType, ReactNode[]>;
 
 export type GalleryAttachment<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   images: Attachment<StreamChatGenerics>[];
   type: 'gallery';
 };
 
 export type RenderAttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
   attachment: Attachment<StreamChatGenerics>;
 };
 
 export type RenderGalleryProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
   attachment: GalleryAttachment<StreamChatGenerics>;
 };
 
 export const isLocalAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: UnknownType,
 ): attachment is LocalAttachment<StreamChatGenerics> =>
   !!(attachment.localMetadata as LocalAttachment)?.id;
 
 export const isScrapedContent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics>,
 ) => attachment.og_scrape_url || attachment.title_link;
 
 export const isUploadedImage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics>,
 ) => attachment.type === 'image' && !isScrapedContent(attachment);
 
 export const isLocalImageAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is LocalImageAttachment<StreamChatGenerics> =>
   isUploadedImage(attachment) && isLocalAttachment(attachment);
 
 export const isGalleryAttachmentType = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   output: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>,
 ): output is GalleryAttachment<StreamChatGenerics> => Array.isArray(output.images);
 
 export const isAudioAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ) => attachment.type === 'audio';
 
 export const isLocalAudioAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is LocalAudioAttachment<StreamChatGenerics> =>
   isAudioAttachment(attachment) && isLocalAttachment(attachment);
 
 export const isVoiceRecordingAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is VoiceRecordingAttachment => attachment.type === 'voiceRecording';
 
 export const isLocalVoiceRecordingAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is LocalVoiceRecordingAttachment<StreamChatGenerics> =>
   isVoiceRecordingAttachment(attachment) && isLocalAttachment(attachment);
 
 export const isFileAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ) =>
@@ -109,22 +114,23 @@ export const isFileAttachment = <
   );
 
 export const isLocalFileAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is LocalFileAttachment<StreamChatGenerics> =>
   isFileAttachment(attachment) && isLocalAttachment(attachment);
 
 export const isMediaAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ) =>
-  (attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
+  (attachment.mime_type &&
+    SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
   attachment.type === 'video';
 
 export const isLocalMediaAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): attachment is LocalVideoAttachment<StreamChatGenerics> =>
@@ -135,7 +141,10 @@ export const isSvgAttachment = (attachment: Attachment) => {
   return filename.toLowerCase().endsWith('.svg');
 };
 
-export const divMod = (num: number, divisor: number) => [Math.floor(num / divisor), num % divisor];
+export const divMod = (num: number, divisor: number) => [
+  Math.floor(num / divisor),
+  num % divisor,
+];
 
 export const displayDuration = (totalSeconds?: number) => {
   if (!totalSeconds || totalSeconds < 0) return '00:00';
diff --git a/src/components/AutoCompleteTextarea/Item.jsx b/src/components/AutoCompleteTextarea/Item.jsx
index 19cf35b04..4945d682d 100644
--- a/src/components/AutoCompleteTextarea/Item.jsx
+++ b/src/components/AutoCompleteTextarea/Item.jsx
@@ -13,7 +13,10 @@ export const Item = React.forwardRef(function Item(props, innerRef) {
   } = props;
 
   const handleSelect = useCallback(() => onSelectHandler(item), [item, onSelectHandler]);
-  const handleClick = useCallback((event) => onClickHandler(event, item), [item, onClickHandler]);
+  const handleClick = useCallback(
+    (event) => onClickHandler(event, item),
+    [item, onClickHandler],
+  );
 
   return (
     <li
diff --git a/src/components/AutoCompleteTextarea/List.jsx b/src/components/AutoCompleteTextarea/List.jsx
index abeb205aa..73c275ae1 100644
--- a/src/components/AutoCompleteTextarea/List.jsx
+++ b/src/components/AutoCompleteTextarea/List.jsx
@@ -47,7 +47,9 @@ export const List = ({
 
   const findItemIndex = useCallback(
     (item) =>
-      values.findIndex((value) => (value.id ? value.id === item.id : value.name === item.name)),
+      values.findIndex((value) =>
+        value.id ? value.id === item.id : value.name === item.name,
+      ),
     [values],
   );
 
@@ -98,7 +100,10 @@ export const List = ({
         });
       }
 
-      if ((event.key === 'Enter' || event.key === 'Tab') && selectedItemIndex !== undefined) {
+      if (
+        (event.key === 'Enter' || event.key === 'Tab') &&
+        selectedItemIndex !== undefined
+      ) {
         handleClick(event, values[selectedItemIndex]);
       }
 
@@ -134,7 +139,10 @@ export const List = ({
     [propValue, selectionEnd, currentTrigger],
   );
 
-  const restructuredValues = useMemo(() => values.map(restructureItem), [values, restructureItem]);
+  const restructuredValues = useMemo(
+    () => values.map(restructureItem),
+    [values, restructureItem],
+  );
 
   return (
     <ul className={clsx('str-chat__suggestion-list', className)} style={style}>
diff --git a/src/components/AutoCompleteTextarea/Textarea.jsx b/src/components/AutoCompleteTextarea/Textarea.jsx
index 0dfd5a2b8..65356bc32 100644
--- a/src/components/AutoCompleteTextarea/Textarea.jsx
+++ b/src/components/AutoCompleteTextarea/Textarea.jsx
@@ -179,7 +179,11 @@ export class ReactTextareaAutocomplete extends React.Component {
       showCommandsList,
       showMentionsList,
     } = this.props;
-    const { currentTrigger: stateTrigger, selectionEnd, value: textareaValue } = this.state;
+    const {
+      currentTrigger: stateTrigger,
+      selectionEnd,
+      value: textareaValue,
+    } = this.state;
 
     const currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
 
@@ -194,7 +198,9 @@ export class ReactTextareaAutocomplete extends React.Component {
           return startToken + token.length;
         default:
           if (!Number.isInteger(position)) {
-            throw new Error('RTA: caretPosition should be "start", "next", "end" or number.');
+            throw new Error(
+              'RTA: caretPosition should be "start", "next", "end" or number.',
+            );
           }
 
           return position;
@@ -204,13 +210,14 @@ export class ReactTextareaAutocomplete extends React.Component {
     const textToModify = showCommandsList
       ? '/'
       : showMentionsList
-      ? '@'
-      : textareaValue.slice(0, selectionEnd);
+        ? '@'
+        : textareaValue.slice(0, selectionEnd);
 
     const startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
 
     // we add space after emoji is selected if a caret position is next
-    const newTokenString = newToken.caretPosition === 'next' ? `${newToken.text} ` : newToken.text;
+    const newTokenString =
+      newToken.caretPosition === 'next' ? `${newToken.text} ` : newToken.text;
 
     const newCaretPosition = computeCaretPosition(
       newToken.caretPosition,
@@ -450,7 +457,6 @@ export class ReactTextareaAutocomplete extends React.Component {
       'value',
     ];
 
-    // eslint-disable-next-line
     for (const prop in props) {
       if (notSafe.includes(prop)) delete props[prop];
     }
@@ -467,7 +473,8 @@ export class ReactTextareaAutocomplete extends React.Component {
   };
 
   _changeHandler = (e) => {
-    const { minChar, movePopupAsYouType, onCaretPositionChange, onChange, trigger } = this.props;
+    const { minChar, movePopupAsYouType, onCaretPositionChange, onChange, trigger } =
+      this.props;
     const { left, top } = this.state;
 
     const textarea = e.target;
@@ -499,7 +506,8 @@ export class ReactTextareaAutocomplete extends React.Component {
 
       lastToken = tokenMatch && tokenMatch[tokenMatch.length - 1].trim();
 
-      currentTrigger = (lastToken && Object.keys(trigger).find((a) => a === lastToken[0])) || null;
+      currentTrigger =
+        (lastToken && Object.keys(trigger).find((a) => a === lastToken[0])) || null;
     }
 
     /*
@@ -636,7 +644,9 @@ export class ReactTextareaAutocomplete extends React.Component {
 
       triggerProps.component = showCommandsList ? CommandItem : UserItem;
       triggerProps.currentTrigger = showCommandsList ? '/' : '@';
-      triggerProps.getTextToReplace = this._getTextToReplace(showCommandsList ? '/' : '@');
+      triggerProps.getTextToReplace = this._getTextToReplace(
+        showCommandsList ? '/' : '@',
+      );
       triggerProps.getSelectedItem = this._getItemOnSelect(showCommandsList ? '/' : '@');
       triggerProps.selectionEnd = 1;
       triggerProps.value = showCommandsList ? '/' : '@';
diff --git a/src/components/AutoCompleteTextarea/utils.js b/src/components/AutoCompleteTextarea/utils.js
index 97e323b8d..54a32d801 100644
--- a/src/components/AutoCompleteTextarea/utils.js
+++ b/src/components/AutoCompleteTextarea/utils.js
@@ -11,11 +11,13 @@ export function defaultScrollToItem(container, item) {
   const actualScrollTop = container.scrollTop;
   const itemOffsetTop = item.offsetTop;
 
-  if (itemOffsetTop < actualScrollTop + containerHight && actualScrollTop < itemOffsetTop) {
+  if (
+    itemOffsetTop < actualScrollTop + containerHight &&
+    actualScrollTop < itemOffsetTop
+  ) {
     return;
   }
 
-  // eslint-disable-next-line
   container.scrollTop = itemOffsetTop;
 }
 
@@ -34,7 +36,9 @@ export const triggerPropsCheck = ({ trigger }) => {
     const [triggerChar, settings] = triggers[i];
 
     if (typeof triggerChar !== 'string' || triggerChar.length !== 1) {
-      return Error('Invalid prop trigger. Keys of the object has to be string / one character.');
+      return Error(
+        'Invalid prop trigger. Keys of the object has to be string / one character.',
+      );
     }
 
     // $FlowFixMe
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 4c8ab2005..e64fb3efc 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -9,7 +9,7 @@ import { getWholeChar } from '../../utils';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AvatarProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Custom root element class that will be merged with the default class */
   className?: string;
@@ -29,7 +29,7 @@ export type AvatarProps<
  * A round avatar image with fallback to username's first letter
  */
 export const Avatar = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: AvatarProps<StreamChatGenerics>,
 ) => {
@@ -75,7 +75,10 @@ export const Avatar = <
       ) : (
         <>
           {!!initials.length && (
-            <div className={clsx('str-chat__avatar-fallback')} data-testid='avatar-fallback'>
+            <div
+              className={clsx('str-chat__avatar-fallback')}
+              data-testid='avatar-fallback'
+            >
               {initials}
             </div>
           )}
diff --git a/src/components/Avatar/ChannelAvatar.tsx b/src/components/Avatar/ChannelAvatar.tsx
index eab6b088f..25e64fb1c 100644
--- a/src/components/Avatar/ChannelAvatar.tsx
+++ b/src/components/Avatar/ChannelAvatar.tsx
@@ -3,11 +3,11 @@ import { Avatar, AvatarProps, GroupAvatar, GroupAvatarProps } from './index';
 import type { DefaultStreamChatGenerics } from '../../types';
 
 export type ChannelAvatarProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<GroupAvatarProps> & AvatarProps<StreamChatGenerics>;
 
 export const ChannelAvatar = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   groupChannelDisplayInfo,
   image,
@@ -16,7 +16,9 @@ export const ChannelAvatar = <
   ...sharedProps
 }: ChannelAvatarProps<StreamChatGenerics>) => {
   if (groupChannelDisplayInfo) {
-    return <GroupAvatar groupChannelDisplayInfo={groupChannelDisplayInfo} {...sharedProps} />;
+    return (
+      <GroupAvatar groupChannelDisplayInfo={groupChannelDisplayInfo} {...sharedProps} />
+    );
   }
   return <Avatar image={image} name={name} user={user} {...sharedProps} />;
 };
diff --git a/src/components/Avatar/GroupAvatar.tsx b/src/components/Avatar/GroupAvatar.tsx
index 89a127d88..a188f6b9e 100644
--- a/src/components/Avatar/GroupAvatar.tsx
+++ b/src/components/Avatar/GroupAvatar.tsx
@@ -3,7 +3,10 @@ import React from 'react';
 import { Avatar, AvatarProps } from './Avatar';
 import { GroupChannelDisplayInfo } from '../ChannelPreview';
 
-export type GroupAvatarProps = Pick<AvatarProps, 'className' | 'onClick' | 'onMouseOver'> & {
+export type GroupAvatarProps = Pick<
+  AvatarProps,
+  'className' | 'onClick' | 'onMouseOver'
+> & {
   /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
   groupChannelDisplayInfo: GroupChannelDisplayInfo;
 };
diff --git a/src/components/Avatar/__tests__/Avatar.test.js b/src/components/Avatar/__tests__/Avatar.test.js
index 4e0805a4b..1c82df14c 100644
--- a/src/components/Avatar/__tests__/Avatar.test.js
+++ b/src/components/Avatar/__tests__/Avatar.test.js
@@ -9,7 +9,7 @@ const AVATAR_ROOT_TEST_ID = 'avatar';
 const AVATAR_FALLBACK_TEST_ID = 'avatar-fallback';
 const AVATAR_IMG_TEST_ID = 'avatar-img';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('Avatar', () => {
   it('should render component with default props', () => {
@@ -61,7 +61,9 @@ describe('Avatar', () => {
 
   it('should render initials as alt and title', () => {
     const name = 'Cherry Blossom';
-    const { getByAltText, getByTitle } = render(<Avatar image='randomImage' name={name} />);
+    const { getByAltText, getByTitle } = render(
+      <Avatar image='randomImage' name={name} />,
+    );
 
     expect(getByTitle(name)).toBeInTheDocument();
     expect(getByAltText(name[0])).toBeInTheDocument();
@@ -94,7 +96,9 @@ describe('Avatar', () => {
   });
 
   it('should render fallback initials on img error', () => {
-    const { getByTestId, queryByTestId } = render(<Avatar image='randomImage' name='Olive' />);
+    const { getByTestId, queryByTestId } = render(
+      <Avatar image='randomImage' name='Olive' />,
+    );
     const img = getByTestId(AVATAR_IMG_TEST_ID);
 
     expect(img).toBeInTheDocument();
@@ -105,7 +109,9 @@ describe('Avatar', () => {
   });
 
   it('should render new img on props change for errored img', () => {
-    const { getByTestId, queryByTestId, rerender } = render(<Avatar image='randomImage' />);
+    const { getByTestId, queryByTestId, rerender } = render(
+      <Avatar image='randomImage' />,
+    );
 
     fireEvent.error(getByTestId(AVATAR_IMG_TEST_ID));
     expect(queryByTestId(AVATAR_IMG_TEST_ID)).not.toBeInTheDocument();
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index c7af064cb..0ef286dec 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -100,7 +100,7 @@ import { useThreadContext } from '../Threads';
 import { CHANNEL_CONTAINER_ID } from './constants';
 
 type ChannelPropsForwardedToComponentContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   ComponentContextValue<StreamChatGenerics>,
   | 'Attachment'
@@ -166,7 +166,7 @@ type ChannelPropsForwardedToComponentContext<
 >;
 
 const isUserResponseArray = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   output: string[] | UserResponse<StreamChatGenerics>[],
 ): output is UserResponse<StreamChatGenerics>[] =>
@@ -174,7 +174,7 @@ const isUserResponseArray = <
 
 export type ChannelProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
   /** List of accepted file types */
   acceptedFiles?: string[];
@@ -255,7 +255,7 @@ export type ChannelProps<
 };
 
 const ChannelContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   className: additionalClassName,
@@ -275,7 +275,7 @@ const ChannelContainer = <
 
 const UnMemoizedChannel = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: PropsWithChildren<ChannelProps<StreamChatGenerics, V>>,
 ) => {
@@ -286,9 +286,8 @@ const UnMemoizedChannel = <
     LoadingIndicator = DefaultLoadingIndicator,
   } = props;
 
-  const { channel: contextChannel, channelsQueryState } = useChatContext<StreamChatGenerics>(
-    'Channel',
-  );
+  const { channel: contextChannel, channelsQueryState } =
+    useChatContext<StreamChatGenerics>('Channel');
 
   const channel = propsChannel || contextChannel;
 
@@ -317,7 +316,7 @@ const UnMemoizedChannel = <
 
 const ChannelInner = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: PropsWithChildren<
     ChannelProps<StreamChatGenerics, V> & {
@@ -360,12 +359,8 @@ const ChannelInner = <
     [propChannelQueryOptions],
   );
 
-  const {
-    client,
-    customClasses,
-    latestMessageDatesByChannels,
-    mutes,
-  } = useChatContext<StreamChatGenerics>('Channel');
+  const { client, customClasses, latestMessageDatesByChannels, mutes } =
+    useChatContext<StreamChatGenerics>('Channel');
   const { t } = useTranslationContext('Channel');
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
   const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
@@ -374,7 +369,8 @@ const ChannelInner = <
   const [channelConfig, setChannelConfig] = useState(channel.getConfig());
   const [notifications, setNotifications] = useState<ChannelNotifications>([]);
   const [quotedMessage, setQuotedMessage] = useState<StreamMessage<StreamChatGenerics>>();
-  const [channelUnreadUiState, _setChannelUnreadUiState] = useState<ChannelUnreadUiState>();
+  const [channelUnreadUiState, _setChannelUnreadUiState] =
+    useState<ChannelUnreadUiState>();
 
   const notificationTimeouts = useRef<Array<NodeJS.Timeout>>([]);
 
@@ -457,7 +453,14 @@ const ChannelInner = <
         500,
         { leading: true, trailing: false },
       ),
-    [activeUnreadHandler, channel, channelConfig, doMarkReadRequest, setChannelUnreadUiState, t],
+    [
+      activeUnreadHandler,
+      channel,
+      channelConfig,
+      doMarkReadRequest,
+      setChannelUnreadUiState,
+      t,
+    ],
   );
 
   const handleEvent = async (event: Event<StreamChatGenerics>) => {
@@ -469,7 +472,8 @@ const ChannelInner = <
       });
     }
 
-    if (event.type === 'user.watching.start' || event.type === 'user.watching.stop') return;
+    if (event.type === 'user.watching.start' || event.type === 'user.watching.stop')
+      return;
 
     if (event.type === 'typing.start' || event.type === 'typing.stop') {
       return dispatch({ channel, type: 'setTyping' });
@@ -480,10 +484,15 @@ const ChannelInner = <
     }
 
     if (event.type === 'message.new') {
-      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+      const mainChannelUpdated =
+        !event.message?.parent_id || event.message?.show_in_channel;
 
       if (mainChannelUpdated) {
-        if (document.hidden && channelConfig?.read_events && !channel.muteStatus().muted) {
+        if (
+          document.hidden &&
+          channelConfig?.read_events &&
+          !channel.muteStatus().muted
+        ) {
           const unread = channel.countUnread(lastRead.current);
 
           if (activeUnreadHandler) {
@@ -560,7 +569,8 @@ const ChannelInner = <
               if (typeof member === 'string') {
                 userId = member;
               } else if (typeof member === 'object') {
-                const { user, user_id } = member as ChannelMemberResponse<StreamChatGenerics>;
+                const { user, user_id } =
+                  member as ChannelMemberResponse<StreamChatGenerics>;
                 userId = user_id || user?.id;
               }
               if (userId) {
@@ -658,13 +668,21 @@ const ChannelInner = <
   );
 
   const loadMore = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-    if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasPrev)
+    if (
+      !online.current ||
+      !window.navigator.onLine ||
+      !channel.state.messagePagination.hasPrev
+    )
       return 0;
 
     // prevent duplicate loading events...
     const oldestMessage = state?.messages?.[0];
 
-    if (state.loadingMore || state.loadingMoreNewer || oldestMessage?.status !== 'received') {
+    if (
+      state.loadingMore ||
+      state.loadingMoreNewer ||
+      oldestMessage?.status !== 'received'
+    ) {
       return 0;
     }
 
@@ -691,7 +709,11 @@ const ChannelInner = <
   };
 
   const loadMoreNewer = async (limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE) => {
-    if (!online.current || !window.navigator.onLine || !channel.state.messagePagination.hasNext)
+    if (
+      !online.current ||
+      !window.navigator.onLine ||
+      !channel.state.messagePagination.hasNext
+    )
       return 0;
 
     const newestMessage = state?.messages?.[state?.messages?.length - 1];
@@ -722,170 +744,195 @@ const ChannelInner = <
     return queryResponse.messages.length;
   };
 
-  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
 
-  const jumpToMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToMessage'] = useCallback(
-    async (
-      messageId,
-      messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
-      highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
-    ) => {
-      dispatch({ loadingMore: true, type: 'setLoadingMore' });
-      await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
+  const jumpToMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToMessage'] =
+    useCallback(
+      async (
+        messageId,
+        messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
+        highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
+      ) => {
+        dispatch({ loadingMore: true, type: 'setLoadingMore' });
+        await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
+
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+        dispatch({
+          hasMoreNewer: channel.state.messagePagination.hasNext,
+          highlightedMessageId: messageId,
+          type: 'jumpToMessageFinished',
+        });
+
+        if (clearHighlightedMessageTimeoutId.current) {
+          clearTimeout(clearHighlightedMessageTimeoutId.current);
+        }
 
+        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+          clearHighlightedMessageTimeoutId.current = null;
+          dispatch({ type: 'clearHighlightedMessage' });
+        }, highlightDuration);
+      },
+      [channel, loadMoreFinished],
+    );
+
+  const jumpToLatestMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToLatestMessage'] =
+    useCallback(async () => {
+      await channel.state.loadMessageIntoState('latest');
       loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
       dispatch({
-        hasMoreNewer: channel.state.messagePagination.hasNext,
-        highlightedMessageId: messageId,
-        type: 'jumpToMessageFinished',
+        type: 'jumpToLatestMessage',
       });
+    }, [channel, loadMoreFinished]);
 
-      if (clearHighlightedMessageTimeoutId.current) {
-        clearTimeout(clearHighlightedMessageTimeoutId.current);
-      }
+  const jumpToFirstUnreadMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToFirstUnreadMessage'] =
+    useCallback(
+      async (
+        queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
+        highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
+      ) => {
+        if (!channelUnreadUiState?.unread_messages) return;
+        let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
+        let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
+        let isInCurrentMessageSet = false;
+
+        if (firstUnreadMessageId) {
+          const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
+          isInCurrentMessageSet = result.index !== -1;
+        } else if (lastReadMessageId) {
+          const result = findInMsgSetById(lastReadMessageId, channel.state.messages);
+          isInCurrentMessageSet = !!result.target;
+          firstUnreadMessageId =
+            result.index > -1 ? channel.state.messages[result.index + 1]?.id : undefined;
+        } else {
+          const lastReadTimestamp = channelUnreadUiState.last_read.getTime();
+          const { index: lastReadMessageIndex, target: lastReadMessage } =
+            findInMsgSetByDate(
+              channelUnreadUiState.last_read,
+              channel.state.messages,
+              true,
+            );
+
+          if (lastReadMessage) {
+            firstUnreadMessageId = channel.state.messages[lastReadMessageIndex + 1]?.id;
+            isInCurrentMessageSet = !!firstUnreadMessageId;
+            lastReadMessageId = lastReadMessage.id;
+          } else {
+            dispatch({ loadingMore: true, type: 'setLoadingMore' });
+            let messages;
+            try {
+              messages = (
+                await channel.query(
+                  {
+                    messages: {
+                      created_at_around: channelUnreadUiState.last_read.toISOString(),
+                      limit: queryMessageLimit,
+                    },
+                  },
+                  'new',
+                )
+              ).messages;
+            } catch (e) {
+              addNotification(t('Failed to jump to the first unread message'), 'error');
+              loadMoreFinished(
+                channel.state.messagePagination.hasPrev,
+                channel.state.messages,
+              );
+              return;
+            }
 
-      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-        clearHighlightedMessageTimeoutId.current = null;
-        dispatch({ type: 'clearHighlightedMessage' });
-      }, highlightDuration);
-    },
-    [channel, loadMoreFinished],
-  );
+            const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
+            if (!firstMessageWithCreationDate) {
+              addNotification(t('Failed to jump to the first unread message'), 'error');
+              loadMoreFinished(
+                channel.state.messagePagination.hasPrev,
+                channel.state.messages,
+              );
+              return;
+            }
+            const firstMessageTimestamp = new Date(
+              firstMessageWithCreationDate.created_at as string,
+            ).getTime();
+            if (lastReadTimestamp < firstMessageTimestamp) {
+              // whole channel is unread
+              firstUnreadMessageId = firstMessageWithCreationDate.id;
+            } else {
+              const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
+              lastReadMessageId = result.target?.id;
+            }
+            loadMoreFinished(
+              channel.state.messagePagination.hasPrev,
+              channel.state.messages,
+            );
+          }
+        }
 
-  const jumpToLatestMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToLatestMessage'] = useCallback(async () => {
-    await channel.state.loadMessageIntoState('latest');
-    loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-    dispatch({
-      type: 'jumpToLatestMessage',
-    });
-  }, [channel, loadMoreFinished]);
+        if (!firstUnreadMessageId && !lastReadMessageId) {
+          addNotification(t('Failed to jump to the first unread message'), 'error');
+          return;
+        }
 
-  const jumpToFirstUnreadMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToFirstUnreadMessage'] = useCallback(
-    async (
-      queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
-      highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
-    ) => {
-      if (!channelUnreadUiState?.unread_messages) return;
-      let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
-      let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
-      let isInCurrentMessageSet = false;
-
-      if (firstUnreadMessageId) {
-        const result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
-        isInCurrentMessageSet = result.index !== -1;
-      } else if (lastReadMessageId) {
-        const result = findInMsgSetById(lastReadMessageId, channel.state.messages);
-        isInCurrentMessageSet = !!result.target;
-        firstUnreadMessageId =
-          result.index > -1 ? channel.state.messages[result.index + 1]?.id : undefined;
-      } else {
-        const lastReadTimestamp = channelUnreadUiState.last_read.getTime();
-        const { index: lastReadMessageIndex, target: lastReadMessage } = findInMsgSetByDate(
-          channelUnreadUiState.last_read,
-          channel.state.messages,
-          true,
-        );
-
-        if (lastReadMessage) {
-          firstUnreadMessageId = channel.state.messages[lastReadMessageIndex + 1]?.id;
-          isInCurrentMessageSet = !!firstUnreadMessageId;
-          lastReadMessageId = lastReadMessage.id;
-        } else {
+        if (!isInCurrentMessageSet) {
           dispatch({ loadingMore: true, type: 'setLoadingMore' });
-          let messages;
           try {
-            messages = (
-              await channel.query(
-                {
-                  messages: {
-                    created_at_around: channelUnreadUiState.last_read.toISOString(),
-                    limit: queryMessageLimit,
-                  },
-                },
-                'new',
-              )
-            ).messages;
+            const targetId = (firstUnreadMessageId ?? lastReadMessageId) as string;
+            await channel.state.loadMessageIntoState(
+              targetId,
+              undefined,
+              queryMessageLimit,
+            );
+            /**
+             * if the index of the last read message on the page is beyond the half of the page,
+             * we have arrived to the oldest page of the channel
+             */
+            const indexOfTarget = channel.state.messages.findIndex(
+              (message) => message.id === targetId,
+            ) as number;
+            loadMoreFinished(
+              channel.state.messagePagination.hasPrev,
+              channel.state.messages,
+            );
+            firstUnreadMessageId =
+              firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
           } catch (e) {
             addNotification(t('Failed to jump to the first unread message'), 'error');
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-            return;
-          }
-
-          const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
-          if (!firstMessageWithCreationDate) {
-            addNotification(t('Failed to jump to the first unread message'), 'error');
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+            loadMoreFinished(
+              channel.state.messagePagination.hasPrev,
+              channel.state.messages,
+            );
             return;
           }
-          const firstMessageTimestamp = new Date(
-            firstMessageWithCreationDate.created_at as string,
-          ).getTime();
-          if (lastReadTimestamp < firstMessageTimestamp) {
-            // whole channel is unread
-            firstUnreadMessageId = firstMessageWithCreationDate.id;
-          } else {
-            const result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
-            lastReadMessageId = result.target?.id;
-          }
-          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
         }
-      }
 
-      if (!firstUnreadMessageId && !lastReadMessageId) {
-        addNotification(t('Failed to jump to the first unread message'), 'error');
-        return;
-      }
-
-      if (!isInCurrentMessageSet) {
-        dispatch({ loadingMore: true, type: 'setLoadingMore' });
-        try {
-          const targetId = (firstUnreadMessageId ?? lastReadMessageId) as string;
-          await channel.state.loadMessageIntoState(targetId, undefined, queryMessageLimit);
-          /**
-           * if the index of the last read message on the page is beyond the half of the page,
-           * we have arrived to the oldest page of the channel
-           */
-          const indexOfTarget = channel.state.messages.findIndex(
-            (message) => message.id === targetId,
-          ) as number;
-          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-          firstUnreadMessageId =
-            firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1]?.id;
-        } catch (e) {
+        if (!firstUnreadMessageId) {
           addNotification(t('Failed to jump to the first unread message'), 'error');
-          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
           return;
         }
-      }
+        if (!channelUnreadUiState.first_unread_message_id)
+          _setChannelUnreadUiState({
+            ...channelUnreadUiState,
+            first_unread_message_id: firstUnreadMessageId,
+            last_read_message_id: lastReadMessageId,
+          });
 
-      if (!firstUnreadMessageId) {
-        addNotification(t('Failed to jump to the first unread message'), 'error');
-        return;
-      }
-      if (!channelUnreadUiState.first_unread_message_id)
-        _setChannelUnreadUiState({
-          ...channelUnreadUiState,
-          first_unread_message_id: firstUnreadMessageId,
-          last_read_message_id: lastReadMessageId,
+        dispatch({
+          hasMoreNewer: channel.state.messagePagination.hasNext,
+          highlightedMessageId: firstUnreadMessageId,
+          type: 'jumpToMessageFinished',
         });
 
-      dispatch({
-        hasMoreNewer: channel.state.messagePagination.hasNext,
-        highlightedMessageId: firstUnreadMessageId,
-        type: 'jumpToMessageFinished',
-      });
-
-      if (clearHighlightedMessageTimeoutId.current) {
-        clearTimeout(clearHighlightedMessageTimeoutId.current);
-      }
+        if (clearHighlightedMessageTimeoutId.current) {
+          clearTimeout(clearHighlightedMessageTimeoutId.current);
+        }
 
-      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-        clearHighlightedMessageTimeoutId.current = null;
-        dispatch({ type: 'clearHighlightedMessage' });
-      }, highlightDuration);
-    },
-    [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
-  );
+        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+          clearHighlightedMessageTimeoutId.current = null;
+          dispatch({ type: 'clearHighlightedMessage' });
+        }, highlightDuration);
+      },
+      [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
+    );
 
   const deleteMessage = useCallback(
     async (
@@ -911,7 +958,10 @@ const ChannelInner = <
     updatedMessage: MessageToSend<StreamChatGenerics> | StreamMessage<StreamChatGenerics>,
   ) => {
     // add the message to the local channel state
-    channel.state.addMessageSorted(updatedMessage as MessageResponse<StreamChatGenerics>, true);
+    channel.state.addMessageSorted(
+      updatedMessage as MessageResponse<StreamChatGenerics>,
+      true,
+    );
 
     dispatch({
       channel,
@@ -937,7 +987,8 @@ const ChannelInner = <
       id,
       mentioned_users: mentions,
       parent_id,
-      quoted_message_id: parent_id === quotedMessage?.parent_id ? quotedMessage?.id : undefined,
+      quoted_message_id:
+        parent_id === quotedMessage?.parent_id ? quotedMessage?.id : undefined,
       text,
       ...customMessageData,
     } as Message<StreamChatGenerics>;
@@ -960,7 +1011,9 @@ const ChannelInner = <
         }
       }
 
-      const responseTimestamp = new Date(messageResponse?.message?.updated_at || 0).getTime();
+      const responseTimestamp = new Date(
+        messageResponse?.message?.updated_at || 0,
+      ).getTime();
       const existingMessageTimestamp = existingMessage?.updated_at?.getTime() || 0;
       const responseIsTheNewest = responseTimestamp > existingMessageTimestamp;
 
@@ -977,13 +1030,14 @@ const ChannelInner = <
         });
       }
 
-      if (quotedMessage && parent_id === quotedMessage?.parent_id) setQuotedMessage(undefined);
+      if (quotedMessage && parent_id === quotedMessage?.parent_id)
+        setQuotedMessage(undefined);
     } catch (error) {
       // error response isn't usable so needs to be stringified then parsed
       const stringError = JSON.stringify(error);
-      const parsedError = (stringError
-        ? JSON.parse(stringError)
-        : {}) as ErrorFromResponse<APIErrorResponse>;
+      const parsedError = (
+        stringError ? JSON.parse(stringError) : {}
+      ) as ErrorFromResponse<APIErrorResponse>;
 
       // Handle the case where the message already exists
       // (typically, when retrying to send a message).
@@ -1067,7 +1121,9 @@ const ChannelInner = <
 
     if (message.attachments) {
       // remove scraped attachments added during the message composition in MessageInput to prevent sync issues
-      message.attachments = message.attachments.filter((attachment) => !attachment.og_scrape_url);
+      message.attachments = message.attachments.filter(
+        (attachment) => !attachment.og_scrape_url,
+      );
     }
 
     await doSendMessage(message);
@@ -1110,7 +1166,9 @@ const ChannelInner = <
     debounce(
       (
         threadHasMore: boolean,
-        threadMessages: Array<ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>>,
+        threadMessages: Array<
+          ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
+        >,
       ) => {
         dispatch({
           threadHasMore,
@@ -1144,7 +1202,10 @@ const ChannelInner = <
         limit,
       });
 
-      const threadHasMoreMessages = hasMoreMessagesProbably(queryResponse.messages.length, limit);
+      const threadHasMoreMessages = hasMoreMessagesProbably(
+        queryResponse.messages.length,
+        limit,
+      );
       const newThreadMessages = channel.state.threads[parentId] || [];
 
       // next set loadingMore to false so we can start asking for more data
@@ -1172,7 +1233,8 @@ const ChannelInner = <
     enrichURLForPreview: props.enrichURLForPreview,
     findURLFn: enrichURLForPreviewConfig?.findURLFn,
     giphyVersion: props.giphyVersion || 'fixed_height',
-    imageAttachmentSizeHandler: props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
+    imageAttachmentSizeHandler:
+      props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
     maxNumberOfFiles,
     multipleUploads,
     mutes,
@@ -1180,51 +1242,53 @@ const ChannelInner = <
     onLinkPreviewDismissed: enrichURLForPreviewConfig?.onLinkPreviewDismissed,
     quotedMessage,
     shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail || true,
-    videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
+    videoAttachmentSizeHandler:
+      props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
     watcher_count: state.watcherCount,
   });
 
-  const channelActionContextValue: ChannelActionContextValue<StreamChatGenerics> = useMemo(
-    () => ({
-      addNotification,
-      closeThread,
-      deleteMessage,
-      dispatch,
-      editMessage,
-      jumpToFirstUnreadMessage,
-      jumpToLatestMessage,
-      jumpToMessage,
-      loadMore,
-      loadMoreNewer,
-      loadMoreThread,
-      markRead,
-      onMentionsClick: onMentionsHoverOrClick,
-      onMentionsHover: onMentionsHoverOrClick,
-      openThread,
-      removeMessage,
-      retrySendMessage,
-      sendMessage,
-      setChannelUnreadUiState,
-      setQuotedMessage,
-      skipMessageDataMemoization,
-      updateMessage,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      channel.cid,
-      deleteMessage,
-      enrichURLForPreviewConfig?.findURLFn,
-      enrichURLForPreviewConfig?.onLinkPreviewDismissed,
-      loadMore,
-      loadMoreNewer,
-      markRead,
-      quotedMessage,
-      jumpToFirstUnreadMessage,
-      jumpToMessage,
-      jumpToLatestMessage,
-      setChannelUnreadUiState,
-    ],
-  );
+  const channelActionContextValue: ChannelActionContextValue<StreamChatGenerics> =
+    useMemo(
+      () => ({
+        addNotification,
+        closeThread,
+        deleteMessage,
+        dispatch,
+        editMessage,
+        jumpToFirstUnreadMessage,
+        jumpToLatestMessage,
+        jumpToMessage,
+        loadMore,
+        loadMoreNewer,
+        loadMoreThread,
+        markRead,
+        onMentionsClick: onMentionsHoverOrClick,
+        onMentionsHover: onMentionsHoverOrClick,
+        openThread,
+        removeMessage,
+        retrySendMessage,
+        sendMessage,
+        setChannelUnreadUiState,
+        setQuotedMessage,
+        skipMessageDataMemoization,
+        updateMessage,
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        channel.cid,
+        deleteMessage,
+        enrichURLForPreviewConfig?.findURLFn,
+        enrichURLForPreviewConfig?.onLinkPreviewDismissed,
+        loadMore,
+        loadMoreNewer,
+        markRead,
+        quotedMessage,
+        jumpToFirstUnreadMessage,
+        jumpToMessage,
+        jumpToLatestMessage,
+        setChannelUnreadUiState,
+      ],
+    );
 
   // @ts-expect-error message type mismatch
   const componentContextValue: Partial<ComponentContextValue> = useMemo(
@@ -1232,7 +1296,8 @@ const ChannelInner = <
       Attachment: props.Attachment,
       AttachmentPreviewList: props.AttachmentPreviewList,
       AttachmentSelector: props.AttachmentSelector,
-      AttachmentSelectorInitiationButtonContents: props.AttachmentSelectorInitiationButtonContents,
+      AttachmentSelectorInitiationButtonContents:
+        props.AttachmentSelectorInitiationButtonContents,
       AudioRecorder: props.AudioRecorder,
       AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
       AutocompleteSuggestionList: props.AutocompleteSuggestionList,
@@ -1388,7 +1453,9 @@ const ChannelInner = <
             <TypingProvider value={typingContextValue}>
               <div className={`${chatContainerClass}`}>
                 {dragAndDropWindow && (
-                  <DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
+                  <DropzoneProvider {...optionalMessageInputProps}>
+                    {children}
+                  </DropzoneProvider>
                 )}
                 {!dragAndDropWindow && <>{children}</>}
               </div>
diff --git a/src/components/Channel/__tests__/Channel.test.js b/src/components/Channel/__tests__/Channel.test.js
index 95603ea10..f107077fc 100644
--- a/src/components/Channel/__tests__/Channel.test.js
+++ b/src/components/Channel/__tests__/Channel.test.js
@@ -97,7 +97,11 @@ const messages = Array.from({ length: 25 }, (_, i) =>
 const pinnedMessages = [generateMessage({ pinned: true, user })];
 
 const renderComponent = async (props = {}, callback = () => {}) => {
-  const { channel: channelFromProps, chatClient: chatClientFromProps, ...channelProps } = props;
+  const {
+    channel: channelFromProps,
+    chatClient: chatClientFromProps,
+    ...channelProps
+  } = props;
   let result;
   await act(() => {
     result = render(
@@ -133,7 +137,8 @@ describe('Channel', () => {
     const { messages: channelMessages } = useChannelStateContext();
 
     return channelMessages.map(
-      ({ id, status, text }) => status !== 'failed' && <div key={id || nanoid()}>{text}</div>,
+      ({ id, status, text }) =>
+        status !== 'failed' && <div key={id || nanoid()}>{text}</div>,
     );
   };
 
@@ -259,7 +264,9 @@ describe('Channel', () => {
           },
         }}
       >
-        <Channel LoadingIndicator={() => <div>{loadingText}</div>}>{childrenContent}</Channel>
+        <Channel LoadingIndicator={() => <div>{loadingText}</div>}>
+          {childrenContent}
+        </Channel>
       </ChatProvider>,
     );
     await waitFor(() => expect(screen.getByText(loadingText)).toBeInTheDocument());
@@ -315,7 +322,9 @@ describe('Channel', () => {
 
   it('should set hasMore state to false if the initial channel query returns less messages than the default initial page size', async () => {
     const { channel, chatClient } = await initClient();
-    useMockedApis(chatClient, [queryChannelWithNewMessages([generateMessage()], channel)]);
+    useMockedApis(chatClient, [
+      queryChannelWithNewMessages([generateMessage()], channel),
+    ]);
     let hasMore;
     await renderComponent({ channel, chatClient }, ({ hasMore: contextHasMore }) => {
       hasMore = contextHasMore;
@@ -365,7 +374,9 @@ describe('Channel', () => {
 
   it('should set hasMore state to false if the initial channel query returns less messages than the custom query channels options message limit', async () => {
     const { channel, chatClient } = await initClient();
-    useMockedApis(chatClient, [queryChannelWithNewMessages([generateMessage()], channel)]);
+    useMockedApis(chatClient, [
+      queryChannelWithNewMessages([generateMessage()], channel),
+    ]);
     let hasMore;
     const channelQueryOptions = {
       messages: { limit: 10 },
@@ -386,7 +397,10 @@ describe('Channel', () => {
     const { channel, chatClient } = await initClient();
     const equalCount = 10;
     useMockedApis(chatClient, [
-      queryChannelWithNewMessages(Array.from({ length: equalCount }, generateMessage), channel),
+      queryChannelWithNewMessages(
+        Array.from({ length: equalCount }, generateMessage),
+        channel,
+      ),
     ]);
     let hasMore;
     const channelQueryOptions = {
@@ -478,7 +492,10 @@ describe('Channel', () => {
     await renderComponent({ channel, chatClient });
 
     await waitFor(() =>
-      expect(clientOnSpy).toHaveBeenCalledWith('connection.recovered', expect.any(Function)),
+      expect(clientOnSpy).toHaveBeenCalledWith(
+        'connection.recovered',
+        expect.any(Function),
+      ),
     );
   });
 
@@ -636,22 +653,25 @@ describe('Channel', () => {
       const threadMessage = messages[0];
 
       let threadHasAlreadyBeenOpened = false;
-      await renderComponent({ channel, chatClient }, ({ closeThread, openThread, thread }) => {
-        if (!thread) {
-          // if there is no open thread
-          if (!threadHasAlreadyBeenOpened) {
-            // and we haven't opened one before, open a thread
-            openThread(threadMessage, { preventDefault: () => null });
-            threadHasAlreadyBeenOpened = true;
+      await renderComponent(
+        { channel, chatClient },
+        ({ closeThread, openThread, thread }) => {
+          if (!thread) {
+            // if there is no open thread
+            if (!threadHasAlreadyBeenOpened) {
+              // and we haven't opened one before, open a thread
+              openThread(threadMessage, { preventDefault: () => null });
+              threadHasAlreadyBeenOpened = true;
+            } else {
+              // if we opened it ourselves before, it means the thread was successfully closed
+              threadHasClosed = true;
+            }
           } else {
-            // if we opened it ourselves before, it means the thread was successfully closed
-            threadHasClosed = true;
+            // if a thread is open, close it.
+            closeThread({ preventDefault: () => null });
           }
-        } else {
-          // if a thread is open, close it.
-          closeThread({ preventDefault: () => null });
-        }
-      });
+        },
+      );
 
       await waitFor(() => expect(threadHasClosed).toBe(true));
     });
@@ -734,7 +754,9 @@ describe('Channel', () => {
           ({ loadMore, messages: contextMessages }) => {
             if (!contextMessages.find((message) => message.id === newMessages[0].id)) {
               // Our new message is not yet passed as part of channel context. Call loadMore and mock API response to include it.
-              useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages, channel)]);
+              useMockedApis(chatClient, [
+                queryChannelWithNewMessages(newMessages, channel),
+              ]);
               loadMore(limit);
             } else {
               // If message has been added, update checker so we can verify it happened.
@@ -767,7 +789,9 @@ describe('Channel', () => {
           ({ hasMore, loadMore, messages: contextMessages }) => {
             if (!contextMessages.find((message) => message.id === newMessages[0].id)) {
               // Our new message is not yet passed as part of channel context. Call loadMore and mock API response to include it.
-              useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages, channel)]);
+              useMockedApis(chatClient, [
+                queryChannelWithNewMessages(newMessages, channel),
+              ]);
               loadMore(limit);
             } else {
               // If message has been added, set our checker variable, so we can verify if hasMore is false.
@@ -790,7 +814,9 @@ describe('Channel', () => {
           ({ hasMore, loadMore, messages: contextMessages }) => {
             if (!contextMessages.some((message) => message.id === newMessages[0].id)) {
               // Our new messages are not yet passed as part of channel context. Call loadMore and mock API response to include it.
-              useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages, channel)]);
+              useMockedApis(chatClient, [
+                queryChannelWithNewMessages(newMessages, channel),
+              ]);
               loadMore(limit);
             } else {
               // If message has been added, set our checker variable so we can verify if hasMore is true.
@@ -819,7 +845,9 @@ describe('Channel', () => {
       it('should not load the second page, if the previous query has returned less then default limit messages', async () => {
         const { channel, chatClient } = await initClient();
         const firstPageOfMessages = [generateMessage()];
-        useMockedApis(chatClient, [queryChannelWithNewMessages(firstPageOfMessages, channel)]);
+        useMockedApis(chatClient, [
+          queryChannelWithNewMessages(firstPageOfMessages, channel),
+        ]);
         let queryNextPageSpy;
         let contextMessageCount;
         await renderComponent(
@@ -835,7 +863,12 @@ describe('Channel', () => {
           expect(queryNextPageSpy).not.toHaveBeenCalled();
           expect(chatClient.axiosInstance.post).toHaveBeenCalledTimes(1);
           expect(chatClient.axiosInstance.post.mock.calls[0][1]).toMatchObject(
-            expect.objectContaining({ data: {}, presence: false, state: true, watch: false }),
+            expect.objectContaining({
+              data: {},
+              presence: false,
+              state: true,
+              watch: false,
+            }),
           );
           expect(contextMessageCount).toBe(firstPageOfMessages.length);
         });
@@ -849,7 +882,9 @@ describe('Channel', () => {
         const secondPageMessages = Array.from({ length: 15 }, (_, i) =>
           generateMessage({ created_at: new Date((i + 1) * 100000) }),
         );
-        useMockedApis(chatClient, [queryChannelWithNewMessages(firstPageMessages, channel)]);
+        useMockedApis(chatClient, [
+          queryChannelWithNewMessages(firstPageMessages, channel),
+        ]);
         let queryNextPageSpy;
         let contextMessageCount;
         await renderComponent(
@@ -857,7 +892,9 @@ describe('Channel', () => {
           ({ loadMore, messages: contextMessages }) => {
             queryNextPageSpy = jest.spyOn(channel, 'query');
             contextMessageCount = contextMessages.length;
-            useMockedApis(chatClient, [queryChannelWithNewMessages(secondPageMessages, channel)]);
+            useMockedApis(chatClient, [
+              queryChannelWithNewMessages(secondPageMessages, channel),
+            ]);
             loadMore();
           },
         );
@@ -879,7 +916,9 @@ describe('Channel', () => {
               watchers: { limit: 100 },
             }),
           );
-          expect(contextMessageCount).toBe(firstPageMessages.length + secondPageMessages.length);
+          expect(contextMessageCount).toBe(
+            firstPageMessages.length + secondPageMessages.length,
+          );
         });
       });
       it('should not load the second page, if the previous query has returned less then custom limit messages', async () => {
@@ -888,7 +927,9 @@ describe('Channel', () => {
           messages: { limit: 10 },
         };
         const firstPageOfMessages = [generateMessage()];
-        useMockedApis(chatClient, [queryChannelWithNewMessages(firstPageOfMessages, channel)]);
+        useMockedApis(chatClient, [
+          queryChannelWithNewMessages(firstPageOfMessages, channel),
+        ]);
         let queryNextPageSpy;
         let contextMessageCount;
         await renderComponent(
@@ -927,7 +968,9 @@ describe('Channel', () => {
         const secondPageMessages = Array.from({ length: equalCount - 1 }, (_, i) =>
           generateMessage({ created_at: new Date((i + 1) * 100000) }),
         );
-        useMockedApis(chatClient, [queryChannelWithNewMessages(firstPageMessages, channel)]);
+        useMockedApis(chatClient, [
+          queryChannelWithNewMessages(firstPageMessages, channel),
+        ]);
         let queryNextPageSpy;
         let contextMessageCount;
 
@@ -936,7 +979,9 @@ describe('Channel', () => {
           ({ loadMore, messages: contextMessages }) => {
             queryNextPageSpy = jest.spyOn(channel, 'query');
             contextMessageCount = contextMessages.length;
-            useMockedApis(chatClient, [queryChannelWithNewMessages(secondPageMessages, channel)]);
+            useMockedApis(chatClient, [
+              queryChannelWithNewMessages(secondPageMessages, channel),
+            ]);
             loadMore(channelQueryOptions.messages.limit);
           },
         );
@@ -964,7 +1009,9 @@ describe('Channel', () => {
               watchers: { limit: channelQueryOptions.messages.limit },
             }),
           );
-          expect(contextMessageCount).toBe(firstPageMessages.length + secondPageMessages.length);
+          expect(contextMessageCount).toBe(
+            firstPageMessages.length + secondPageMessages.length,
+          );
         });
       });
     });
@@ -974,18 +1021,27 @@ describe('Channel', () => {
       const last_read = new Date(1000);
       const last_read_message_id = 'X';
       const first_unread_message_id = 'Y';
-      const lastReadMessage = generateMessage({ created_at: last_read, id: last_read_message_id });
+      const lastReadMessage = generateMessage({
+        created_at: last_read,
+        id: last_read_message_id,
+      });
       const firstUnreadMessage = generateMessage({ id: first_unread_message_id });
       const currentMessageSetLastReadLoadedFirstUnreadNotLoaded = [
         generateMessage({ created_at: new Date(100) }),
         lastReadMessage,
       ];
-      const currentMessageSetLastReadFirstUnreadLoaded = [lastReadMessage, firstUnreadMessage];
+      const currentMessageSetLastReadFirstUnreadLoaded = [
+        lastReadMessage,
+        firstUnreadMessage,
+      ];
       const currentMessageSetLastReadNotLoadedFirstUnreadLoaded = [
         firstUnreadMessage,
         generateMessage(),
       ];
-      const currentMessageSetFirstUnreadLastReadNotLoaded = [generateMessage(), generateMessage()];
+      const currentMessageSetFirstUnreadLastReadNotLoaded = [
+        generateMessage(),
+        generateMessage(),
+      ];
       const errorNotificationText = 'Failed to jump to the first unread message';
       const ownReadStateBase = {
         last_read,
@@ -1046,7 +1102,10 @@ describe('Channel', () => {
         let highlightedMessageId;
         await renderComponent(
           { channel, chatClient },
-          ({ highlightedMessageId: highlightedMessageIdContext, jumpToFirstUnreadMessage }) => {
+          ({
+            highlightedMessageId: highlightedMessageIdContext,
+            jumpToFirstUnreadMessage,
+          }) => {
             if (hasJumped) {
               highlightedMessageId = highlightedMessageIdContext;
               return;
@@ -1341,7 +1400,9 @@ describe('Channel', () => {
                 return;
               }
               if (!channelUnreadUiState) return;
-              useMockedApis(chatClient, [queryChannelWithNewMessages(jumpToPage, channel)]);
+              useMockedApis(chatClient, [
+                queryChannelWithNewMessages(jumpToPage, channel),
+              ]);
               jumpToFirstUnreadMessage(jumpToPage.length);
               hasJumped = true;
             },
@@ -1384,7 +1445,9 @@ describe('Channel', () => {
             children: <MockMessageList />,
           },
           ({ sendMessage }) => {
-            jest.spyOn(channel, 'sendMessage').mockImplementationOnce(() => new Promise(() => {}));
+            jest
+              .spyOn(channel, 'sendMessage')
+              .mockImplementationOnce(() => new Promise(() => {}));
             if (!hasSent) sendMessage({ text: messageText });
             hasSent = true;
           },
@@ -1507,7 +1570,9 @@ describe('Channel', () => {
           await renderComponent({ channel, chatClient }, ({ deleteMessage }) => {
             deleteMessage(message);
           });
-          await waitFor(() => expect(clientDeleteMessageSpy).toHaveBeenCalledWith(message.id));
+          await waitFor(() =>
+            expect(clientDeleteMessageSpy).toHaveBeenCalledWith(message.id),
+          );
         });
 
         it('should throw error instead of calling custom doDeleteMessageRequest function', async () => {
@@ -1564,7 +1629,11 @@ describe('Channel', () => {
           editMessage(updatedMessage);
         });
         await waitFor(() =>
-          expect(clientUpdateMessageSpy).toHaveBeenCalledWith(updatedMessage, undefined, undefined),
+          expect(clientUpdateMessageSpy).toHaveBeenCalledWith(
+            updatedMessage,
+            undefined,
+            undefined,
+          ),
         );
       });
 
@@ -1580,7 +1649,11 @@ describe('Channel', () => {
         );
 
         await waitFor(() =>
-          expect(doUpdateMessageRequest).toHaveBeenCalledWith(channel.cid, messages[0], undefined),
+          expect(doUpdateMessageRequest).toHaveBeenCalledWith(
+            channel.cid,
+            messages[0],
+            undefined,
+          ),
         );
       });
 
@@ -1614,10 +1687,15 @@ describe('Channel', () => {
           { channel, chatClient, children: <MockMessageList /> },
           ({ messages: contextMessages, retrySendMessage, sendMessage }) => {
             if (!hasSent) {
-              jest.spyOn(channel, 'sendMessage').mockImplementationOnce(() => Promise.reject());
+              jest
+                .spyOn(channel, 'sendMessage')
+                .mockImplementationOnce(() => Promise.reject());
               sendMessage(messageObject);
               hasSent = true;
-            } else if (!hasRetried && contextMessages.some(({ status }) => status === 'failed')) {
+            } else if (
+              !hasRetried &&
+              contextMessages.some(({ status }) => status === 'failed')
+            ) {
               // retry
               useMockedApis(chatClient, [sendMessageApi(messageObject)]);
               retrySendMessage(messageObject);
@@ -1648,7 +1726,10 @@ describe('Channel', () => {
             if (!hasSent) {
               sendMessage(messageObject);
               hasSent = true;
-            } else if (!hasRetried && contextMessages.some(({ status }) => status === 'failed')) {
+            } else if (
+              !hasRetried &&
+              contextMessages.some(({ status }) => status === 'failed')
+            ) {
               // retry
               useMockedApis(chatClient, [sendMessageApi(generateMessage(messageObject))]);
               retrySendMessage(messageObject);
@@ -1704,7 +1785,12 @@ describe('Channel', () => {
         };
       };
 
-      const createChannelEventDispatcher = (body, client, channel, type = 'message.new') =>
+      const createChannelEventDispatcher = (
+        body,
+        client,
+        channel,
+        type = 'message.new',
+      ) =>
         createOneTimeEventDispatcher(
           {
             type,
@@ -1717,7 +1803,11 @@ describe('Channel', () => {
       it('should eventually pass down a message when a message.new event is triggered on the channel', async () => {
         const { channel, chatClient } = await initClient();
         const message = generateMessage({ user });
-        const dispatchMessageEvent = createChannelEventDispatcher({ message }, chatClient, channel);
+        const dispatchMessageEvent = createChannelEventDispatcher(
+          { message },
+          chatClient,
+          channel,
+        );
 
         const { findByText } = await renderComponent(
           {
@@ -1788,8 +1878,12 @@ describe('Channel', () => {
         );
 
         await waitFor(async () => {
-          expect(await queryByText(oldText, undefined, { timeout: 100 })).not.toBeInTheDocument();
-          expect(await queryByText(newText, undefined, { timeout: 100 })).toBeInTheDocument();
+          expect(
+            await queryByText(oldText, undefined, { timeout: 100 }),
+          ).not.toBeInTheDocument();
+          expect(
+            await queryByText(newText, undefined, { timeout: 100 }),
+          ).toBeInTheDocument();
         });
       });
 
@@ -1820,8 +1914,12 @@ describe('Channel', () => {
         );
 
         await waitFor(async () => {
-          expect(await queryByText(oldText, undefined, { timeout: 100 })).not.toBeInTheDocument();
-          expect(await queryByText(newText, undefined, { timeout: 100 })).toBeInTheDocument();
+          expect(
+            await queryByText(oldText, undefined, { timeout: 100 }),
+          ).not.toBeInTheDocument();
+          expect(
+            await queryByText(newText, undefined, { timeout: 100 }),
+          ).toBeInTheDocument();
         });
       });
 
@@ -1830,7 +1928,11 @@ describe('Channel', () => {
         const markReadSpy = jest.spyOn(channel, 'markRead');
 
         const message = generateMessage({ user: generateUser() });
-        const dispatchMessageEvent = createChannelEventDispatcher({ message }, chatClient, channel);
+        const dispatchMessageEvent = createChannelEventDispatcher(
+          { message },
+          chatClient,
+          channel,
+        );
 
         await renderComponent({ channel, chatClient }, () => {
           dispatchMessageEvent();
@@ -1844,7 +1946,11 @@ describe('Channel', () => {
         const markReadSpy = jest.spyOn(channel, 'markRead');
 
         const message = generateMessage({ user: generateUser() });
-        const dispatchMessageEvent = createChannelEventDispatcher({ message }, chatClient, channel);
+        const dispatchMessageEvent = createChannelEventDispatcher(
+          { message },
+          chatClient,
+          channel,
+        );
 
         await renderComponent({ channel, chatClient }, () => {
           dispatchMessageEvent();
@@ -1862,7 +1968,11 @@ describe('Channel', () => {
         });
         jest.spyOn(channel, 'countUnread').mockImplementation(() => unreadAmount);
         const message = generateMessage({ user: generateUser() });
-        const dispatchMessageEvent = createChannelEventDispatcher({ message }, chatClient, channel);
+        const dispatchMessageEvent = createChannelEventDispatcher(
+          { message },
+          chatClient,
+          channel,
+        );
 
         await renderComponent({ channel, chatClient }, () => {
           dispatchMessageEvent();
@@ -1912,18 +2022,21 @@ describe('Channel', () => {
           channel,
         );
         let newThreadMessageWasAdded = false;
-        await renderComponent({ channel, chatClient }, ({ openThread, thread, threadMessages }) => {
-          if (!thread) {
-            // first, open thread
-            openThread(threadMessage, { preventDefault: () => null });
-          } else if (!threadMessages.some(({ id }) => id === newThreadMessage.id)) {
-            // then, add new thread message
-            // FIXME: dispatch event needs to be queued on event loop now
-            setTimeout(() => dispatchNewThreadMessageEvent(), 0);
-          } else {
-            newThreadMessageWasAdded = true;
-          }
-        });
+        await renderComponent(
+          { channel, chatClient },
+          ({ openThread, thread, threadMessages }) => {
+            if (!thread) {
+              // first, open thread
+              openThread(threadMessage, { preventDefault: () => null });
+            } else if (!threadMessages.some(({ id }) => id === newThreadMessage.id)) {
+              // then, add new thread message
+              // FIXME: dispatch event needs to be queued on event loop now
+              setTimeout(() => dispatchNewThreadMessageEvent(), 0);
+            } else {
+              newThreadMessageWasAdded = true;
+            }
+          },
+        );
 
         await waitFor(() => expect(newThreadMessageWasAdded).toBe(true));
       });
@@ -1938,9 +2051,11 @@ describe('Channel', () => {
           name: 'MessageList',
         },
         {
-          callback: (message) => ({ openThread, thread }) => {
-            if (!thread) openThread(message, { preventDefault: () => null });
-          },
+          callback:
+            (message) =>
+            ({ openThread, thread }) => {
+              if (!thread) openThread(message, { preventDefault: () => null });
+            },
           component: Thread,
           getFirstMessageAvatar: () => {
             // the first avatar is that of the ThreadHeader
@@ -1958,7 +2073,11 @@ describe('Channel', () => {
           const dispatchUserUpdatedEvent = createChannelEventDispatcher(
             {
               type: 'user.updated',
-              user: { ...user, ...updatedAttribute, updated_at: new Date().toISOString() },
+              user: {
+                ...user,
+                ...updatedAttribute,
+                updated_at: new Date().toISOString(),
+              },
             },
             chatClient,
             channel,
@@ -2068,7 +2187,11 @@ describe('Channel', () => {
           };
 
           await act(async () => {
-            await renderComponent({ channel: activeChannel, chatClient, children: <Component /> });
+            await renderComponent({
+              channel: activeChannel,
+              chatClient,
+              children: <Component />,
+            });
           });
 
           expect(screen.queryByText(UNREAD_TEXT)).toBeInTheDocument();
diff --git a/src/components/Channel/channelState.ts b/src/components/Channel/channelState.ts
index 686722efd..b0d77ea3a 100644
--- a/src/components/Channel/channelState.ts
+++ b/src/components/Channel/channelState.ts
@@ -1,11 +1,15 @@
-import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
+import type {
+  Channel,
+  MessageResponse,
+  ChannelState as StreamChannelState,
+} from 'stream-chat';
 
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelStateReducerAction<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > =
   | {
       type: 'closeThread';
@@ -44,7 +48,9 @@ export type ChannelStateReducerAction<
     }
   | {
       threadHasMore: boolean;
-      threadMessages: Array<ReturnType<StreamChannelState<StreamChatGenerics>['formatMessage']>>;
+      threadMessages: Array<
+        ReturnType<StreamChannelState<StreamChatGenerics>['formatMessage']>
+      >;
       type: 'loadMoreThreadFinished';
     }
   | {
@@ -84,183 +90,189 @@ export type ChannelStateReducerAction<
       type: 'jumpToLatestMessage';
     };
 
-export const makeChannelReducer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->() => (
-  state: ChannelState<StreamChatGenerics>,
-  action: ChannelStateReducerAction<StreamChatGenerics>,
-) => {
-  switch (action.type) {
-    case 'closeThread': {
-      return {
-        ...state,
-        thread: null,
-        threadLoadingMore: false,
-        threadMessages: [],
-      };
-    }
+export const makeChannelReducer =
+  <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() =>
+  (
+    state: ChannelState<StreamChatGenerics>,
+    action: ChannelStateReducerAction<StreamChatGenerics>,
+  ) => {
+    switch (action.type) {
+      case 'closeThread': {
+        return {
+          ...state,
+          thread: null,
+          threadLoadingMore: false,
+          threadMessages: [],
+        };
+      }
 
-    case 'copyMessagesFromChannel': {
-      const { channel, parentId } = action;
-      return {
-        ...state,
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        // copying messages from channel happens with new message - this resets the suppressAutoscroll
-        suppressAutoscroll: false,
-        threadMessages: parentId
-          ? { ...channel.state.threads }[parentId] || []
-          : state.threadMessages,
-      };
-    }
+      case 'copyMessagesFromChannel': {
+        const { channel, parentId } = action;
+        return {
+          ...state,
+          messages: [...channel.state.messages],
+          pinnedMessages: [...channel.state.pinnedMessages],
+          // copying messages from channel happens with new message - this resets the suppressAutoscroll
+          suppressAutoscroll: false,
+          threadMessages: parentId
+            ? { ...channel.state.threads }[parentId] || []
+            : state.threadMessages,
+        };
+      }
 
-    case 'copyStateFromChannelOnEvent': {
-      const { channel } = action;
-      return {
-        ...state,
-        members: { ...channel.state.members },
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        read: { ...channel.state.read },
-        watcherCount: channel.state.watcher_count,
-        watchers: { ...channel.state.watchers },
-      };
-    }
+      case 'copyStateFromChannelOnEvent': {
+        const { channel } = action;
+        return {
+          ...state,
+          members: { ...channel.state.members },
+          messages: [...channel.state.messages],
+          pinnedMessages: [...channel.state.pinnedMessages],
+          read: { ...channel.state.read },
+          watcherCount: channel.state.watcher_count,
+          watchers: { ...channel.state.watchers },
+        };
+      }
 
-    case 'initStateFromChannel': {
-      const { channel, hasMore } = action;
-      return {
-        ...state,
-        hasMore,
-        loading: false,
-        members: { ...channel.state.members },
-        messages: [...channel.state.messages],
-        pinnedMessages: [...channel.state.pinnedMessages],
-        read: { ...channel.state.read },
-        watcherCount: channel.state.watcher_count,
-        watchers: { ...channel.state.watchers },
-      };
-    }
+      case 'initStateFromChannel': {
+        const { channel, hasMore } = action;
+        return {
+          ...state,
+          hasMore,
+          loading: false,
+          members: { ...channel.state.members },
+          messages: [...channel.state.messages],
+          pinnedMessages: [...channel.state.pinnedMessages],
+          read: { ...channel.state.read },
+          watcherCount: channel.state.watcher_count,
+          watchers: { ...channel.state.watchers },
+        };
+      }
 
-    case 'jumpToLatestMessage': {
-      return {
-        ...state,
-        hasMoreNewer: false,
-        highlightedMessageId: undefined,
-        loading: false,
-        suppressAutoscroll: false,
-      };
-    }
+      case 'jumpToLatestMessage': {
+        return {
+          ...state,
+          hasMoreNewer: false,
+          highlightedMessageId: undefined,
+          loading: false,
+          suppressAutoscroll: false,
+        };
+      }
 
-    case 'jumpToMessageFinished': {
-      return {
-        ...state,
-        hasMoreNewer: action.hasMoreNewer,
-        highlightedMessageId: action.highlightedMessageId,
-      };
-    }
+      case 'jumpToMessageFinished': {
+        return {
+          ...state,
+          hasMoreNewer: action.hasMoreNewer,
+          highlightedMessageId: action.highlightedMessageId,
+        };
+      }
 
-    case 'clearHighlightedMessage': {
-      return {
-        ...state,
-        highlightedMessageId: undefined,
-      };
-    }
+      case 'clearHighlightedMessage': {
+        return {
+          ...state,
+          highlightedMessageId: undefined,
+        };
+      }
 
-    case 'loadMoreFinished': {
-      const { hasMore, messages } = action;
-      return {
-        ...state,
-        hasMore,
-        loadingMore: false,
-        messages,
-        suppressAutoscroll: false,
-      };
-    }
+      case 'loadMoreFinished': {
+        const { hasMore, messages } = action;
+        return {
+          ...state,
+          hasMore,
+          loadingMore: false,
+          messages,
+          suppressAutoscroll: false,
+        };
+      }
 
-    case 'loadMoreNewerFinished': {
-      const { hasMoreNewer, messages } = action;
-      return {
-        ...state,
-        hasMoreNewer,
-        loadingMoreNewer: false,
-        messages,
-      };
-    }
+      case 'loadMoreNewerFinished': {
+        const { hasMoreNewer, messages } = action;
+        return {
+          ...state,
+          hasMoreNewer,
+          loadingMoreNewer: false,
+          messages,
+        };
+      }
 
-    case 'loadMoreThreadFinished': {
-      const { threadHasMore, threadMessages } = action;
-      return {
-        ...state,
-        threadHasMore,
-        threadLoadingMore: false,
-        threadMessages,
-      };
-    }
+      case 'loadMoreThreadFinished': {
+        const { threadHasMore, threadMessages } = action;
+        return {
+          ...state,
+          threadHasMore,
+          threadLoadingMore: false,
+          threadMessages,
+        };
+      }
 
-    case 'openThread': {
-      const { channel, message } = action;
-      return {
-        ...state,
-        thread: message,
-        threadHasMore: true,
-        threadMessages: message.id ? { ...channel.state.threads }[message.id] || [] : [],
-        threadSuppressAutoscroll: false,
-      };
-    }
+      case 'openThread': {
+        const { channel, message } = action;
+        return {
+          ...state,
+          thread: message,
+          threadHasMore: true,
+          threadMessages: message.id
+            ? { ...channel.state.threads }[message.id] || []
+            : [],
+          threadSuppressAutoscroll: false,
+        };
+      }
 
-    case 'setError': {
-      const { error } = action;
-      return { ...state, error };
-    }
+      case 'setError': {
+        const { error } = action;
+        return { ...state, error };
+      }
 
-    case 'setLoadingMore': {
-      const { loadingMore } = action;
-      // suppress the autoscroll behavior
-      return { ...state, loadingMore, suppressAutoscroll: loadingMore };
-    }
+      case 'setLoadingMore': {
+        const { loadingMore } = action;
+        // suppress the autoscroll behavior
+        return { ...state, loadingMore, suppressAutoscroll: loadingMore };
+      }
 
-    case 'setLoadingMoreNewer': {
-      const { loadingMoreNewer } = action;
-      return { ...state, loadingMoreNewer };
-    }
+      case 'setLoadingMoreNewer': {
+        const { loadingMoreNewer } = action;
+        return { ...state, loadingMoreNewer };
+      }
 
-    case 'setThread': {
-      const { message } = action;
-      return { ...state, thread: message };
-    }
+      case 'setThread': {
+        const { message } = action;
+        return { ...state, thread: message };
+      }
 
-    case 'setTyping': {
-      const { channel } = action;
-      return {
-        ...state,
-        typing: { ...channel.state.typing },
-      };
-    }
+      case 'setTyping': {
+        const { channel } = action;
+        return {
+          ...state,
+          typing: { ...channel.state.typing },
+        };
+      }
 
-    case 'startLoadingThread': {
-      return {
-        ...state,
-        threadLoadingMore: true,
-        threadSuppressAutoscroll: true,
-      };
-    }
+      case 'startLoadingThread': {
+        return {
+          ...state,
+          threadLoadingMore: true,
+          threadSuppressAutoscroll: true,
+        };
+      }
 
-    case 'updateThreadOnEvent': {
-      const { channel, message } = action;
-      if (!state.thread) return state;
-      return {
-        ...state,
-        thread:
-          message?.id === state.thread.id ? channel.state.formatMessage(message) : state.thread,
-        threadMessages: state.thread?.id ? { ...channel.state.threads }[state.thread.id] || [] : [],
-      };
-    }
+      case 'updateThreadOnEvent': {
+        const { channel, message } = action;
+        if (!state.thread) return state;
+        return {
+          ...state,
+          thread:
+            message?.id === state.thread.id
+              ? channel.state.formatMessage(message)
+              : state.thread,
+          threadMessages: state.thread?.id
+            ? { ...channel.state.threads }[state.thread.id] || []
+            : [],
+        };
+      }
 
-    default:
-      return state;
-  }
-};
+      default:
+        return state;
+    }
+  };
 
 export const initialState = {
   error: null,
diff --git a/src/components/Channel/hooks/useChannelContainerClasses.ts b/src/components/Channel/hooks/useChannelContainerClasses.ts
index f3d847735..7a04dd808 100644
--- a/src/components/Channel/hooks/useChannelContainerClasses.ts
+++ b/src/components/Channel/hooks/useChannelContainerClasses.ts
@@ -4,7 +4,7 @@ import { useChatContext } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useImageFlagEmojisOnWindowsClass = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const { useImageFlagEmojisOnWindows } = useChatContext<StreamChatGenerics>('Channel');
   return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
@@ -12,10 +12,11 @@ export const useImageFlagEmojisOnWindowsClass = <
     : '';
 };
 
-export const getChatContainerClass = (customClass?: string) => customClass ?? 'str-chat__container';
+export const getChatContainerClass = (customClass?: string) =>
+  customClass ?? 'str-chat__container';
 
 export const useChannelContainerClasses = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   customClasses,
 }: Pick<ChatContextValue, 'customClasses'>) => {
diff --git a/src/components/Channel/hooks/useCreateChannelStateContext.ts b/src/components/Channel/hooks/useCreateChannelStateContext.ts
index 114b95cf3..97625703d 100644
--- a/src/components/Channel/hooks/useCreateChannelStateContext.ts
+++ b/src/components/Channel/hooks/useCreateChannelStateContext.ts
@@ -7,7 +7,7 @@ import type { ChannelStateContextValue } from '../../../context/ChannelStateCont
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateChannelStateContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   value: Omit<ChannelStateContextValue<StreamChatGenerics>, 'channelCapabilities'> & {
     channelCapabilitiesArray: string[];
@@ -19,17 +19,17 @@ export const useCreateChannelStateContext = <
     channel,
     channelCapabilitiesArray = [],
     channelConfig,
+    channelUnreadUiState,
     debounceURLEnrichmentMs,
     dragAndDropWindow,
     enrichURLForPreview,
-    giphyVersion,
     error,
     findURLFn,
+    giphyVersion,
     hasMore,
     hasMoreNewer,
-    imageAttachmentSizeHandler,
-    suppressAutoscroll,
     highlightedMessageId,
+    imageAttachmentSizeHandler,
     loading,
     loadingMore,
     maxNumberOfFiles,
@@ -44,14 +44,14 @@ export const useCreateChannelStateContext = <
     read = {},
     shouldGenerateVideoThumbnail,
     skipMessageDataMemoization,
+    suppressAutoscroll,
     thread,
     threadHasMore,
     threadLoadingMore,
     threadMessages = [],
-    channelUnreadUiState,
     videoAttachmentSizeHandler,
-    watcherCount,
     watcher_count,
+    watcherCount,
     watchers,
   } = value;
 
@@ -61,7 +61,9 @@ export const useCreateChannelStateContext = <
   const notificationsLength = notifications.length;
   const readUsers = Object.values(read);
   const readUsersLength = readUsers.length;
-  const readUsersLastReads = readUsers.map(({ last_read }) => last_read.toISOString()).join();
+  const readUsersLastReads = readUsers
+    .map(({ last_read }) => last_read.toISOString())
+    .join();
   const threadMessagesLength = threadMessages?.length;
 
   const channelCapabilities: Record<string, boolean> = {};
@@ -74,7 +76,15 @@ export const useCreateChannelStateContext = <
     ? messages
     : messages
         .map(
-          ({ deleted_at, latest_reactions, pinned, reply_count, status, updated_at, user }) =>
+          ({
+            deleted_at,
+            latest_reactions,
+            pinned,
+            reply_count,
+            status,
+            updated_at,
+            user,
+          }) =>
             `${deleted_at}${
               latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
             }${pinned}${reply_count}${status}${
diff --git a/src/components/Channel/hooks/useCreateTypingContext.ts b/src/components/Channel/hooks/useCreateTypingContext.ts
index ee55dfe04..726156fee 100644
--- a/src/components/Channel/hooks/useCreateTypingContext.ts
+++ b/src/components/Channel/hooks/useCreateTypingContext.ts
@@ -4,7 +4,7 @@ import type { TypingContextValue } from '../../../context/TypingContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateTypingContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   value: TypingContextValue<StreamChatGenerics>,
 ) => {
diff --git a/src/components/Channel/hooks/useEditMessageHandler.ts b/src/components/Channel/hooks/useEditMessageHandler.ts
index f5067e887..1776d7494 100644
--- a/src/components/Channel/hooks/useEditMessageHandler.ts
+++ b/src/components/Channel/hooks/useEditMessageHandler.ts
@@ -2,10 +2,13 @@ import { useChatContext } from '../../../context/ChatContext';
 
 import type { StreamChat, UpdatedMessage } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics, UpdateMessageOptions } from '../../../types/types';
+import type {
+  DefaultStreamChatGenerics,
+  UpdateMessageOptions,
+} from '../../../types/types';
 
 type UpdateHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (
   cid: string,
   updatedMessage: UpdatedMessage<StreamChatGenerics>,
@@ -13,15 +16,20 @@ type UpdateHandler<
 ) => ReturnType<StreamChat<StreamChatGenerics>['updateMessage']>;
 
 export const useEditMessageHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   doUpdateMessageRequest?: UpdateHandler<StreamChatGenerics>,
 ) => {
   const { channel, client } = useChatContext<StreamChatGenerics>('useEditMessageHandler');
 
-  return (updatedMessage: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => {
+  return (
+    updatedMessage: UpdatedMessage<StreamChatGenerics>,
+    options?: UpdateMessageOptions,
+  ) => {
     if (doUpdateMessageRequest && channel) {
-      return Promise.resolve(doUpdateMessageRequest(channel.cid, updatedMessage, options));
+      return Promise.resolve(
+        doUpdateMessageRequest(channel.cid, updatedMessage, options),
+      );
     }
     return client.updateMessage(updatedMessage, undefined, options);
   };
diff --git a/src/components/Channel/hooks/useMentionsHandlers.ts b/src/components/Channel/hooks/useMentionsHandlers.ts
index ea42f6fab..af0cc4f26 100644
--- a/src/components/Channel/hooks/useMentionsHandlers.ts
+++ b/src/components/Channel/hooks/useMentionsHandlers.ts
@@ -5,18 +5,24 @@ import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type OnMentionAction<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (event: React.BaseSyntheticEvent, user?: UserResponse<StreamChatGenerics>) => void;
 
 export const useMentionsHandlers = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   onMentionsHover?: OnMentionAction<StreamChatGenerics>,
   onMentionsClick?: OnMentionAction<StreamChatGenerics>,
 ) =>
   useCallback(
-    (event: React.BaseSyntheticEvent, mentioned_users: UserResponse<StreamChatGenerics>[]) => {
-      if ((!onMentionsHover && !onMentionsClick) || !(event.target instanceof HTMLElement)) {
+    (
+      event: React.BaseSyntheticEvent,
+      mentioned_users: UserResponse<StreamChatGenerics>[],
+    ) => {
+      if (
+        (!onMentionsHover && !onMentionsClick) ||
+        !(event.target instanceof HTMLElement)
+      ) {
         return;
       }
 
@@ -25,7 +31,9 @@ export const useMentionsHandlers = <
 
       if (textContent[0] === '@') {
         const userName = textContent.replace('@', '');
-        const user = mentioned_users?.find(({ id, name }) => name === userName || id === userName);
+        const user = mentioned_users?.find(
+          ({ id, name }) => name === userName || id === userName,
+        );
 
         if (
           onMentionsHover &&
@@ -35,7 +43,11 @@ export const useMentionsHandlers = <
           onMentionsHover(event, user);
         }
 
-        if (onMentionsClick && event.type === 'click' && typeof onMentionsClick === 'function') {
+        if (
+          onMentionsClick &&
+          event.type === 'click' &&
+          typeof onMentionsClick === 'function'
+        ) {
           onMentionsClick(event, user);
         }
       }
diff --git a/src/components/Channel/utils.ts b/src/components/Channel/utils.ts
index aa7b6af1b..76af600a1 100644
--- a/src/components/Channel/utils.ts
+++ b/src/components/Channel/utils.ts
@@ -4,28 +4,30 @@ import type { ChannelState, MessageResponse } from 'stream-chat';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types';
 
-export const makeAddNotifications = (
-  setNotifications: Dispatch<SetStateAction<ChannelNotifications>>,
-  notificationTimeouts: NodeJS.Timeout[],
-) => (text: string, type: 'success' | 'error') => {
-  if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
-    return;
-  }
+export const makeAddNotifications =
+  (
+    setNotifications: Dispatch<SetStateAction<ChannelNotifications>>,
+    notificationTimeouts: NodeJS.Timeout[],
+  ) =>
+  (text: string, type: 'success' | 'error') => {
+    if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
+      return;
+    }
 
-  const id = nanoid();
+    const id = nanoid();
 
-  setNotifications((prevNotifications) => [...prevNotifications, { id, text, type }]);
+    setNotifications((prevNotifications) => [...prevNotifications, { id, text, type }]);
 
-  const timeout = setTimeout(
-    () =>
-      setNotifications((prevNotifications) =>
-        prevNotifications.filter((notification) => notification.id !== id),
-      ),
-    5000,
-  );
+    const timeout = setTimeout(
+      () =>
+        setNotifications((prevNotifications) =>
+          prevNotifications.filter((notification) => notification.id !== id),
+        ),
+      5000,
+    );
 
-  notificationTimeouts.push(timeout);
-};
+    notificationTimeouts.push(timeout);
+  };
 
 /**
  * Utility function for jumpToFirstUnreadMessage
@@ -33,7 +35,7 @@ export const makeAddNotifications = (
  * @param msgSet
  */
 export const findInMsgSetById = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   targetId: string,
   msgSet: ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>[],
@@ -59,7 +61,7 @@ export const findInMsgSetById = <
  * @param exact
  */
 export const findInMsgSetByDate = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   targetDate: Date,
   msgSet:
@@ -73,7 +75,9 @@ export const findInMsgSetByDate = <
   let right = msgSet.length - 1;
   while (left <= right) {
     middle = Math.floor((right + left) / 2);
-    const middleTimestamp = new Date(msgSet[middle].created_at as string | Date).getTime();
+    const middleTimestamp = new Date(
+      msgSet[middle].created_at as string | Date,
+    ).getTime();
     const middleLeftTimestamp =
       msgSet[middle - 1]?.created_at &&
       new Date(msgSet[middle - 1].created_at as string | Date).getTime();
@@ -93,7 +97,10 @@ export const findInMsgSetByDate = <
     else right = middle - 1;
   }
 
-  if (!exact || new Date(msgSet[left].created_at as string | Date).getTime() === targetTimestamp) {
+  if (
+    !exact ||
+    new Date(msgSet[left].created_at as string | Date).getTime() === targetTimestamp
+  ) {
     return { index: left, target: msgSet[left] };
   }
   return { index: -1 };
diff --git a/src/components/ChannelHeader/ChannelHeader.tsx b/src/components/ChannelHeader/ChannelHeader.tsx
index 05e56d9d9..e76c81a32 100644
--- a/src/components/ChannelHeader/ChannelHeader.tsx
+++ b/src/components/ChannelHeader/ChannelHeader.tsx
@@ -28,19 +28,20 @@ export type ChannelHeaderProps = {
  * The ChannelHeader component renders some basic information about a Channel.
  */
 export const ChannelHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelHeaderProps,
 ) => {
   const {
     Avatar = DefaultAvatar,
-    MenuIcon = DefaultMenuIcon,
     image: overrideImage,
     live,
+    MenuIcon = DefaultMenuIcon,
     title: overrideTitle,
   } = props;
 
-  const { channel, watcher_count } = useChannelStateContext<StreamChatGenerics>('ChannelHeader');
+  const { channel, watcher_count } =
+    useChannelStateContext<StreamChatGenerics>('ChannelHeader');
   const { openMobileNav } = useChatContext<StreamChatGenerics>('ChannelHeader');
   const { t } = useTranslationContext('ChannelHeader');
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
@@ -70,7 +71,9 @@ export const ChannelHeader = <
         <p className='str-chat__channel-header-title'>
           {displayTitle}{' '}
           {live && (
-            <span className='str-chat__header-livestream-livelabel'>{t<string>('live')}</span>
+            <span className='str-chat__header-livestream-livelabel'>
+              {t<string>('live')}
+            </span>
           )}
         </p>
         {subtitle && <p className='str-chat__channel-header-subtitle'>{subtitle}</p>}
diff --git a/src/components/ChannelHeader/__tests__/ChannelHeader.test.js b/src/components/ChannelHeader/__tests__/ChannelHeader.test.js
index b6d10b749..ab09f9ee1 100644
--- a/src/components/ChannelHeader/__tests__/ChannelHeader.test.js
+++ b/src/components/ChannelHeader/__tests__/ChannelHeader.test.js
@@ -59,7 +59,7 @@ async function renderComponent(props, channelData, channelType = 'messaging') {
   return renderComponentBase({ channel, client, props });
 }
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('ChannelHeader', () => {
   it('should display live label when prop live is true', async () => {
@@ -69,7 +69,9 @@ describe('ChannelHeader', () => {
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
-    expect(container.querySelector('.str-chat__header-livestream-livelabel')).toBeInTheDocument();
+    expect(
+      container.querySelector('.str-chat__header-livestream-livelabel'),
+    ).toBeInTheDocument();
   });
 
   it("should display avatar with fallback image only if other user's name is available", async () => {
@@ -170,7 +172,9 @@ describe('ChannelHeader', () => {
     const updatedAttribute = { name: 'new-name' };
     await renderComponent();
 
-    await waitFor(() => expect(screen.queryByText(updatedAttribute.name)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.queryByText(updatedAttribute.name)).not.toBeInTheDocument(),
+    );
     act(() => {
       dispatchUserUpdatedEvent(client, { ...user2, ...updatedAttribute });
     });
@@ -190,7 +194,10 @@ describe('ChannelHeader', () => {
       dispatchUserUpdatedEvent(client, { ...user2, ...updatedAttribute });
     });
     await waitFor(() =>
-      expect(screen.getByTestId('avatar-img')).toHaveAttribute('src', updatedAttribute.image),
+      expect(screen.getByTestId('avatar-img')).toHaveAttribute(
+        'src',
+        updatedAttribute.image,
+      ),
     );
   });
 
@@ -273,8 +280,14 @@ describe('ChannelHeader', () => {
         const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
         expect(avatarImages).toHaveLength(3);
         expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-        expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-        expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+        expect(avatarImages[1]).toHaveAttribute(
+          'src',
+          channelState.members[1].user.image,
+        );
+        expect(avatarImages[2]).toHaveAttribute(
+          'src',
+          channelState.members[2].user.image,
+        );
       });
 
       act(() => {
@@ -284,8 +297,14 @@ describe('ChannelHeader', () => {
       await waitFor(() => {
         const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
         expect(avatarImages[0]).toHaveAttribute('src', updatedAttribute.image);
-        expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-        expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+        expect(avatarImages[1]).toHaveAttribute(
+          'src',
+          channelState.members[1].user.image,
+        );
+        expect(avatarImages[2]).toHaveAttribute(
+          'src',
+          channelState.members[2].user.image,
+        );
       });
     });
 
@@ -305,8 +324,14 @@ describe('ChannelHeader', () => {
         const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
         expect(avatarImages).toHaveLength(3);
         expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-        expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-        expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+        expect(avatarImages[1]).toHaveAttribute(
+          'src',
+          channelState.members[1].user.image,
+        );
+        expect(avatarImages[2]).toHaveAttribute(
+          'src',
+          channelState.members[2].user.image,
+        );
       });
 
       act(() => {
@@ -316,7 +341,10 @@ describe('ChannelHeader', () => {
       await waitFor(() => {
         const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
         expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-        expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
+        expect(avatarImages[1]).toHaveAttribute(
+          'src',
+          channelState.members[1].user.image,
+        );
         expect(avatarImages[2]).toHaveAttribute('src', updatedAttribute.image);
       });
     });
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
index dd60c6f42..3b63f2ddc 100644
--- a/src/components/ChannelList/ChannelList.tsx
+++ b/src/components/ChannelList/ChannelList.tsx
@@ -4,11 +4,17 @@ import clsx from 'clsx';
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
 import { useMobileNavigation } from './hooks/useMobileNavigation';
-import { CustomQueryChannelsFn, usePaginatedChannels } from './hooks/usePaginatedChannels';
+import {
+  CustomQueryChannelsFn,
+  usePaginatedChannels,
+} from './hooks/usePaginatedChannels';
 import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils';
 
 import { Avatar as DefaultAvatar } from '../Avatar';
-import { ChannelPreview, ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
+import {
+  ChannelPreview,
+  ChannelPreviewUIComponentProps,
+} from '../ChannelPreview/ChannelPreview';
 import {
   ChannelSearchProps,
   ChannelSearch as DefaultChannelSearch,
@@ -24,21 +30,33 @@ import { NullComponent } from '../UtilityComponents';
 import { ChannelListContextProvider, ChatContextValue } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
+import type {
+  Channel,
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  Event,
+} from 'stream-chat';
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
-import { useChannelListShape, usePrepareShapeHandlers } from './hooks/useChannelListShape';
+import {
+  useChannelListShape,
+  usePrepareShapeHandlers,
+} from './hooks/useChannelListShape';
 
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 
 export type ChannelListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
-  additionalChannelSearchProps?: Omit<ChannelSearchProps<StreamChatGenerics>, 'setChannels'>;
+  additionalChannelSearchProps?: Omit<
+    ChannelSearchProps<StreamChatGenerics>,
+    'setChannels'
+  >;
   /**
    * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically
    * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from
@@ -153,13 +171,15 @@ export type ChannelListProps<
   watchers?: { limit?: number; offset?: number };
 };
 
-const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+const UnMemoizedChannelList = <
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
   props: ChannelListProps<SCG>,
 ) => {
   const {
     additionalChannelSearchProps,
-    Avatar = DefaultAvatar,
     allowNewMessagesFromUnfilteredChannels = true,
+    Avatar = DefaultAvatar,
     channelRenderFilterFn,
     ChannelSearch = DefaultChannelSearch,
     customActiveChannel,
@@ -167,9 +187,9 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     EmptyStateIndicator = DefaultEmptyStateIndicator,
     filters = {},
     getLatestMessagePreview,
+    List = ChannelListMessenger,
     LoadingErrorIndicator = NullComponent,
     LoadingIndicator = LoadingChannels,
-    List = ChannelListMessenger,
     lockChannelOrder = false,
     onAddedToChannel,
     onChannelDeleted,
@@ -215,17 +235,24 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     channels: Array<Channel<SCG>>,
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel<SCG>>>>,
   ) => {
-    if (!channels.length || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
+    if (
+      !channels.length ||
+      channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)
+    ) {
       return;
     }
 
     if (customActiveChannel) {
       // FIXME: this is wrong...
-      let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
+      let customActiveChannelObject = channels.find(
+        (chan) => chan.id === customActiveChannel,
+      );
 
       if (!customActiveChannelObject) {
-        //@ts-expect-error
-        [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
+        //@ts-expect-error valid query
+        [customActiveChannelObject] = await client.queryChannels({
+          id: customActiveChannel,
+        });
       }
 
       if (customActiveChannelObject) {
@@ -277,7 +304,9 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     customQueryChannels,
   );
 
-  const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
+  const loadedChannels = channelRenderFilterFn
+    ? channelRenderFilterFn(channels)
+    : channels;
 
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
@@ -345,7 +374,8 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
     theme,
     customClasses?.channelList ?? `${baseClass} ${baseClass}-react`,
     {
-      'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
+      'str-chat--windows-flags':
+        useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
       [`${baseClass}--open`]: navOpen,
     },
   );
@@ -397,4 +427,6 @@ const UnMemoizedChannelList = <SCG extends DefaultStreamChatGenerics = DefaultSt
 /**
  * Renders a preview list of Channels, allowing you to select the Channel you want to open
  */
-export const ChannelList = React.memo(UnMemoizedChannelList) as typeof UnMemoizedChannelList;
+export const ChannelList = React.memo(
+  UnMemoizedChannelList,
+) as typeof UnMemoizedChannelList;
diff --git a/src/components/ChannelList/ChannelListMessenger.tsx b/src/components/ChannelList/ChannelListMessenger.tsx
index 234222bcc..fab76f40a 100644
--- a/src/components/ChannelList/ChannelListMessenger.tsx
+++ b/src/components/ChannelList/ChannelListMessenger.tsx
@@ -8,7 +8,7 @@ import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelListMessengerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Whether the channel query request returned an errored response */
   error: ErrorFromResponse<APIErrorResponse> | null;
@@ -28,7 +28,7 @@ export type ChannelListMessengerProps<
  * A preview list of channels, allowing you to select the channel you want to open
  */
 export const ChannelListMessenger = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: PropsWithChildren<ChannelListMessengerProps<StreamChatGenerics>>,
 ) => {
diff --git a/src/components/ChannelList/__tests__/ChannelList.test.js b/src/components/ChannelList/__tests__/ChannelList.test.js
index a7f048b1c..87c40982f 100644
--- a/src/components/ChannelList/__tests__/ChannelList.test.js
+++ b/src/components/ChannelList/__tests__/ChannelList.test.js
@@ -60,7 +60,11 @@ const channelsQueryStateMock = {
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug then.
  */
-const ChannelPreviewComponent = ({ channel, channelUpdateCount, latestMessagePreview }) => (
+const ChannelPreviewComponent = ({
+  channel,
+  channelUpdateCount,
+  latestMessagePreview,
+}) => (
   <div data-testid={channel.id} role='listitem'>
     <div data-testid='channelUpdateCount'>{channelUpdateCount}</div>
     <div>{channel.data.name}</div>
@@ -219,7 +223,9 @@ describe('ChannelList', () => {
         }),
       filters: {},
     };
-    const queryChannelsMock = jest.spyOn(client, 'queryChannels').mockImplementationOnce();
+    const queryChannelsMock = jest
+      .spyOn(client, 'queryChannels')
+      .mockImplementationOnce();
 
     const { rerender } = render(
       <Chat client={client}>
@@ -294,7 +300,7 @@ describe('ChannelList', () => {
     // Wait for list of channels to load in DOM.
     await waitFor(() => {
       expect(getByRole('list')).toBeInTheDocument();
-      // eslint-disable-next-line jest-dom/prefer-in-document
+
       expect(queryAllByRole('listitem')).toHaveLength(1);
     });
     const results = await axe(container);
@@ -408,7 +414,9 @@ describe('ChannelList', () => {
   it('when queryChannels api returns no channels, `EmptyStateIndicator` should be rendered', async () => {
     useMockedApis(chatClient, [queryChannelsApi([])]);
 
-    const EmptyStateIndicator = () => <div data-testid='empty-state-indicator' role='listitem' />;
+    const EmptyStateIndicator = () => (
+      <div data-testid='empty-state-indicator' role='listitem' />
+    );
 
     const { container, getByTestId } = render(
       <Chat client={chatClient}>
@@ -430,7 +438,9 @@ describe('ChannelList', () => {
 
   it('should show unique channels', async () => {
     useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2])]);
-    const ChannelPreview = (props) => <div data-testid={props.channel.id} role='listitem' />;
+    const ChannelPreview = (props) => (
+      <div data-testid={props.channel.id} role='listitem' />
+    );
     render(
       <Chat client={chatClient}>
         <ChannelList filters={{}} options={{ limit: 2 }} Preview={ChannelPreview} />
@@ -620,7 +630,7 @@ describe('ChannelList', () => {
       let channel;
       beforeEach(async () => {
         client = await getTestClientWithUser({ id: user1.id });
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+
         useMockedApis(client, [getOrCreateChannelApi(mockedChannels[0])]);
         channel = client.channel('messaging', mockedChannels[0].id);
         await channel.watch();
@@ -661,7 +671,9 @@ describe('ChannelList', () => {
         });
 
         await waitFor(() => {
-          expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).not.toBeInTheDocument();
+          expect(
+            container.querySelector(SEARCH_RESULT_LIST_SELECTOR),
+          ).not.toBeInTheDocument();
           expect(screen.queryByLabelText('Channel list')).toBeInTheDocument();
         });
       });
@@ -737,9 +749,13 @@ describe('ChannelList', () => {
 
           await waitFor(() => {
             if (clearSearchOnClickOutside) {
-              expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).not.toBeInTheDocument();
+              expect(
+                container.querySelector(SEARCH_RESULT_LIST_SELECTOR),
+              ).not.toBeInTheDocument();
             } else {
-              expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).toBeInTheDocument();
+              expect(
+                container.querySelector(SEARCH_RESULT_LIST_SELECTOR),
+              ).toBeInTheDocument();
             }
           });
           jest.useRealTimers();
@@ -763,7 +779,9 @@ describe('ChannelList', () => {
           await fireEvent.click(clearButton);
         });
         await waitFor(() => {
-          expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).not.toBeInTheDocument();
+          expect(
+            container.querySelector(SEARCH_RESULT_LIST_SELECTOR),
+          ).not.toBeInTheDocument();
           expect(container.querySelector(CHANNEL_LIST_SELECTOR)).toBeInTheDocument();
           expect(input).toHaveValue('');
           expect(input).toHaveFocus();
@@ -789,7 +807,9 @@ describe('ChannelList', () => {
           await fireEvent.click(returnIcon);
         });
         await waitFor(() => {
-          expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).not.toBeInTheDocument();
+          expect(
+            container.querySelector(SEARCH_RESULT_LIST_SELECTOR),
+          ).not.toBeInTheDocument();
           expect(input).not.toHaveFocus();
           expect(input).toHaveValue('');
           expect(returnIcon).not.toBeInTheDocument();
@@ -817,10 +837,14 @@ describe('ChannelList', () => {
 
         await waitFor(() => {
           expect(screen.queryAllByRole('option')).toHaveLength(3);
-          expect(screen.queryByText(channelNotInTheList.channel.name)).not.toBeInTheDocument();
+          expect(
+            screen.queryByText(channelNotInTheList.channel.name),
+          ).not.toBeInTheDocument();
         });
 
-        useMockedApis(client, [queryChannelsApi([channelNotInTheList, ...mockedChannels])]);
+        useMockedApis(client, [
+          queryChannelsApi([channelNotInTheList, ...mockedChannels]),
+        ]);
         const input = screen.queryByTestId('search-input');
         await act(() => {
           input.focus();
@@ -841,7 +865,9 @@ describe('ChannelList', () => {
         });
 
         await waitFor(() => {
-          expect(screen.queryByText(channelNotInTheList.channel.name)).toBeInTheDocument();
+          expect(
+            screen.queryByText(channelNotInTheList.channel.name),
+          ).toBeInTheDocument();
           expect(screen.queryByTestId('return-icon')).not.toBeInTheDocument();
         });
         jest.useRealTimers();
@@ -895,7 +921,9 @@ describe('ChannelList', () => {
       };
 
       beforeEach(() => {
-        useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2, testChannel3])]);
+        useMockedApis(chatClient, [
+          queryChannelsApi([testChannel1, testChannel2, testChannel3]),
+        ]);
       });
 
       it('should move channel to top of the list', async () => {
@@ -918,7 +946,9 @@ describe('ChannelList', () => {
         const items = getAllByRole('listitem');
 
         // Get the closes listitem to the channel that received new message.
-        const channelPreview = getByText(newMessage.text).closest(ROLE_LIST_ITEM_SELECTOR);
+        const channelPreview = getByText(newMessage.text).closest(
+          ROLE_LIST_ITEM_SELECTOR,
+        );
         expect(channelPreview.isEqualNode(items[0])).toBe(true);
         const results = await axe(container);
         expect(results).toHaveNoViolations();
@@ -945,7 +975,9 @@ describe('ChannelList', () => {
         const items = getAllByRole('listitem');
 
         // Get the closes listitem to the channel that received new message.
-        const channelPreview = getByText(newMessage.text).closest(ROLE_LIST_ITEM_SELECTOR);
+        const channelPreview = getByText(newMessage.text).closest(
+          ROLE_LIST_ITEM_SELECTOR,
+        );
         expect(channelPreview.isEqualNode(items[2])).toBe(true);
         const results = await axe(container);
         expect(results).toHaveNoViolations();
@@ -1072,7 +1104,9 @@ describe('ChannelList', () => {
 
         useMockedApis(chatClient, [getOrCreateChannelApi(testChannel3)]);
 
-        act(() => dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel));
+        act(() =>
+          dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel),
+        );
 
         await waitFor(() => {
           expect(getByTestId(testChannel3.channel.id)).toBeInTheDocument();
@@ -1100,7 +1134,9 @@ describe('ChannelList', () => {
           expect(getByRole('list')).toBeInTheDocument();
         });
 
-        act(() => dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel));
+        act(() =>
+          dispatchNotificationAddedToChannelEvent(chatClient, testChannel3.channel),
+        );
 
         await waitFor(() => {
           expect(onAddedToChannel).toHaveBeenCalledTimes(1);
@@ -1118,7 +1154,9 @@ describe('ChannelList', () => {
       };
 
       beforeEach(() => {
-        useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2, testChannel3])]);
+        useMockedApis(chatClient, [
+          queryChannelsApi([testChannel1, testChannel2, testChannel3]),
+        ]);
       });
 
       it('should remove the channel from list by default', async () => {
@@ -1133,7 +1171,9 @@ describe('ChannelList', () => {
         });
         const nodeToBeRemoved = getByTestId(testChannel3.channel.id);
 
-        act(() => dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel));
+        act(() =>
+          dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel),
+        );
 
         await waitFor(() => {
           expect(nodeToBeRemoved).not.toBeInTheDocument();
@@ -1146,7 +1186,10 @@ describe('ChannelList', () => {
         const onRemovedFromChannel = jest.fn();
         const { container, getByRole } = await render(
           <Chat client={chatClient}>
-            <ChannelList {...channelListProps} onRemovedFromChannel={onRemovedFromChannel} />
+            <ChannelList
+              {...channelListProps}
+              onRemovedFromChannel={onRemovedFromChannel}
+            />
           </Chat>,
         );
         // Wait for list of channels to load in DOM.
@@ -1154,7 +1197,9 @@ describe('ChannelList', () => {
           expect(getByRole('list')).toBeInTheDocument();
         });
 
-        act(() => dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel));
+        act(() =>
+          dispatchNotificationRemovedFromChannel(chatClient, testChannel3.channel),
+        );
 
         await waitFor(() => {
           expect(onRemovedFromChannel).toHaveBeenCalledTimes(1);
@@ -1480,7 +1525,9 @@ describe('ChannelList', () => {
         act(() => dispatchConnectionRecoveredEvent(chatClient));
 
         await waitFor(() => {
-          expect(parseInt(getByTestId('channelUpdateCount').textContent, 10)).toBe(updateCount + 1);
+          expect(parseInt(getByTestId('channelUpdateCount').textContent, 10)).toBe(
+            updateCount + 1,
+          );
         });
         const results = await axe(container);
         expect(results).toHaveNoViolations();
@@ -1669,7 +1716,8 @@ describe('ChannelList', () => {
       const channelsToBeLoaded = Array.from({ length: 5 }, generateChannel);
       const channelsToBeSet = Array.from({ length: 5 }, generateChannel);
       const channelsToIdString = (channels) => channels.map(({ id }) => id).join();
-      const channelsDataToIdString = (channels) => channels.map(({ channel: { id } }) => id).join();
+      const channelsDataToIdString = (channels) =>
+        channels.map(({ channel: { id } }) => id).join();
 
       const ChannelListCustom = () => {
         const { channels, setChannels } = useChannelListContext();
@@ -1694,7 +1742,9 @@ describe('ChannelList', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText(channelsDataToIdString(channelsToBeLoaded))).toBeInTheDocument();
+        expect(
+          screen.getByText(channelsDataToIdString(channelsToBeLoaded)),
+        ).toBeInTheDocument();
       });
 
       await act(() => {
@@ -1705,7 +1755,9 @@ describe('ChannelList', () => {
         expect(
           screen.queryByText(channelsDataToIdString(channelsToBeLoaded)),
         ).not.toBeInTheDocument();
-        expect(screen.getByText(channelsDataToIdString(channelsToBeSet))).toBeInTheDocument();
+        expect(
+          screen.getByText(channelsDataToIdString(channelsToBeSet)),
+        ).toBeInTheDocument();
       });
     });
   });
diff --git a/src/components/ChannelList/hooks/useChannelDeletedListener.ts b/src/components/ChannelList/hooks/useChannelDeletedListener.ts
index 9e8db7527..f09b808e9 100644
--- a/src/components/ChannelList/hooks/useChannelDeletedListener.ts
+++ b/src/components/ChannelList/hooks/useChannelDeletedListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useChannelDeletedListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
diff --git a/src/components/ChannelList/hooks/useChannelHiddenListener.ts b/src/components/ChannelList/hooks/useChannelHiddenListener.ts
index e8b221a7d..4b159dc44 100644
--- a/src/components/ChannelList/hooks/useChannelHiddenListener.ts
+++ b/src/components/ChannelList/hooks/useChannelHiddenListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useChannelHiddenListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
diff --git a/src/components/ChannelList/hooks/useChannelListShape.ts b/src/components/ChannelList/hooks/useChannelListShape.ts
index 0a70bbb76..8ecfcb5d0 100644
--- a/src/components/ChannelList/hooks/useChannelListShape.ts
+++ b/src/components/ChannelList/hooks/useChannelListShape.ts
@@ -17,7 +17,9 @@ import { useChatContext } from '../../../context';
 import { getChannel } from '../../../utils';
 import { ChannelListProps } from '../ChannelList';
 
-type SetChannels<SCG extends ExtendableGenerics> = Dispatch<SetStateAction<Channel<SCG>[]>>;
+type SetChannels<SCG extends ExtendableGenerics> = Dispatch<
+  SetStateAction<Channel<SCG>[]>
+>;
 
 type BaseParameters<SCG extends ExtendableGenerics> = {
   event: Event<SCG>;
@@ -37,44 +39,45 @@ type HandleMessageNewParameters<SCG extends ExtendableGenerics> = BaseParameters
     lockChannelOrder: boolean;
   } & Required<Pick<ChannelListProps<SCG>, 'filters' | 'sort'>>;
 
-type HandleNotificationMessageNewParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
-  RepeatedParameters<SCG> & {
-    allowNewMessagesFromUnfilteredChannels: boolean;
+type HandleNotificationMessageNewParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> &
+    RepeatedParameters<SCG> & {
+      allowNewMessagesFromUnfilteredChannels: boolean;
+      lockChannelOrder: boolean;
+    } & Required<Pick<ChannelListProps<SCG>, 'filters' | 'sort'>>;
+
+type HandleNotificationRemovedFromChannelParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & RepeatedParameters<SCG>;
+
+type HandleNotificationAddedToChannelParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> &
+    RepeatedParameters<SCG> & {
+      allowNewMessagesFromUnfilteredChannels: boolean;
+      lockChannelOrder: boolean;
+    } & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
+
+type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & {
     lockChannelOrder: boolean;
-  } & Required<Pick<ChannelListProps<SCG>, 'filters' | 'sort'>>;
+  } & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
 
-type HandleNotificationRemovedFromChannelParameters<
-  SCG extends ExtendableGenerics
-> = BaseParameters<SCG> & RepeatedParameters<SCG>;
-
-type HandleNotificationAddedToChannelParameters<
-  SCG extends ExtendableGenerics
-> = BaseParameters<SCG> &
-  RepeatedParameters<SCG> & {
-    allowNewMessagesFromUnfilteredChannels: boolean;
-    lockChannelOrder: boolean;
-  } & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
-
-type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & {
-  lockChannelOrder: boolean;
-} & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
-
-type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
-  RepeatedParameters<SCG>;
+type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & RepeatedParameters<SCG>;
 
 type HandleChannelHiddenParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
   RepeatedParameters<SCG>;
 
-type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
-  RepeatedParameters<SCG>;
+type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & RepeatedParameters<SCG>;
 
-type HandleChannelTruncatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
-  RepeatedParameters<SCG>;
+type HandleChannelTruncatedParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & RepeatedParameters<SCG>;
 
-type HandleChannelUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> &
-  RepeatedParameters<SCG>;
+type HandleChannelUpdatedParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG> & RepeatedParameters<SCG>;
 
-type HandleUserPresenceChangedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG>;
+type HandleUserPresenceChangedParameters<SCG extends ExtendableGenerics> =
+  BaseParameters<SCG>;
 
 const shared = <SCG extends ExtendableGenerics>({
   customHandler,
@@ -218,13 +221,16 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
       const channel = await getChannel({
         client,
         id: event.channel.id,
-        members: event.channel.members?.reduce<string[]>((newMembers, { user, user_id }) => {
-          const userId = user_id || user?.id;
+        members: event.channel.members?.reduce<string[]>(
+          (newMembers, { user, user_id }) => {
+            const userId = user_id || user?.id;
 
-          if (userId) newMembers.push(userId);
+            if (userId) newMembers.push(userId);
 
-          return newMembers;
-        }, []),
+            return newMembers;
+          },
+          [],
+        ),
         type: event.channel.type,
       });
 
@@ -251,7 +257,9 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
         return customHandler(setChannels, event);
       }
 
-      setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
+      setChannels((channels) =>
+        channels.filter((channel) => channel.cid !== event.channel?.cid),
+      );
     },
     [],
   );
@@ -264,7 +272,11 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
       setChannels,
       sort,
     }: HandleMemberUpdatedParameters<SCG>) => {
-      if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
+      if (
+        !event.member?.user ||
+        event.member.user.id !== client.userID ||
+        !event.channel_type
+      ) {
         return;
       }
 
@@ -338,7 +350,11 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
   );
 
   const handleChannelVisible = useCallback(
-    async ({ customHandler, event, setChannels }: HandleChannelVisibleParameters<SCG>) => {
+    async ({
+      customHandler,
+      event,
+      setChannels,
+    }: HandleChannelVisibleParameters<SCG>) => {
       if (typeof customHandler === 'function') {
         return customHandler(setChannels, event);
       }
@@ -377,7 +393,9 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
       }
 
       setChannels((channels) => {
-        const channelIndex = channels.findIndex((channel) => channel.cid === event.channel?.cid);
+        const channelIndex = channels.findIndex(
+          (channel) => channel.cid === event.channel?.cid,
+        );
 
         if (channelIndex > -1 && event.channel) {
           const newChannels = channels;
@@ -385,7 +403,8 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
             ...event.channel,
             hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
             own_capabilities:
-              event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities,
+              event.channel?.own_capabilities ??
+              newChannels[channelIndex].data?.own_capabilities,
           };
 
           return [...newChannels];
@@ -452,32 +471,33 @@ export const useChannelListShapeDefaults = <SCG extends ExtendableGenerics>() =>
   );
 };
 
-type UseDefaultHandleChannelListShapeParameters<SCG extends ExtendableGenerics> = Required<
-  Pick<
-    ChannelListProps<SCG>,
-    'allowNewMessagesFromUnfilteredChannels' | 'lockChannelOrder' | 'filters' | 'sort'
-  >
-> &
-  Pick<
-    ChannelListProps<SCG>,
-    | 'onAddedToChannel'
-    | 'onChannelDeleted'
-    | 'onChannelHidden'
-    | 'onChannelTruncated'
-    | 'onChannelUpdated'
-    | 'onChannelVisible'
-    | 'onMessageNew'
-    | 'onMessageNewHandler'
-    | 'onRemovedFromChannel'
-  > & {
-    setChannels: SetChannels<SCG>;
-    customHandleChannelListShape?: (data: {
-      // can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
-      defaults: ReturnType<typeof useChannelListShapeDefaults>;
-      event: Event<SCG>;
+type UseDefaultHandleChannelListShapeParameters<SCG extends ExtendableGenerics> =
+  Required<
+    Pick<
+      ChannelListProps<SCG>,
+      'allowNewMessagesFromUnfilteredChannels' | 'lockChannelOrder' | 'filters' | 'sort'
+    >
+  > &
+    Pick<
+      ChannelListProps<SCG>,
+      | 'onAddedToChannel'
+      | 'onChannelDeleted'
+      | 'onChannelHidden'
+      | 'onChannelTruncated'
+      | 'onChannelUpdated'
+      | 'onChannelVisible'
+      | 'onMessageNew'
+      | 'onMessageNewHandler'
+      | 'onRemovedFromChannel'
+    > & {
       setChannels: SetChannels<SCG>;
-    }) => void;
-  };
+      customHandleChannelListShape?: (data: {
+        // can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
+        defaults: ReturnType<typeof useChannelListShapeDefaults>;
+        event: Event<SCG>;
+        setChannels: SetChannels<SCG>;
+      }) => void;
+    };
 
 export const usePrepareShapeHandlers = <SCG extends ExtendableGenerics>({
   allowNewMessagesFromUnfilteredChannels,
@@ -556,16 +576,32 @@ export const usePrepareShapeHandlers = <SCG extends ExtendableGenerics>({
         });
         break;
       case 'channel.hidden':
-        defaults.handleChannelHidden({ customHandler: onChannelHidden, event, setChannels });
+        defaults.handleChannelHidden({
+          customHandler: onChannelHidden,
+          event,
+          setChannels,
+        });
         break;
       case 'channel.visible':
-        defaults.handleChannelVisible({ customHandler: onChannelVisible, event, setChannels });
+        defaults.handleChannelVisible({
+          customHandler: onChannelVisible,
+          event,
+          setChannels,
+        });
         break;
       case 'channel.truncated':
-        defaults.handleChannelTruncated({ customHandler: onChannelTruncated, event, setChannels });
+        defaults.handleChannelTruncated({
+          customHandler: onChannelTruncated,
+          event,
+          setChannels,
+        });
         break;
       case 'channel.updated':
-        defaults.handleChannelUpdated({ customHandler: onChannelUpdated, event, setChannels });
+        defaults.handleChannelUpdated({
+          customHandler: onChannelUpdated,
+          event,
+          setChannels,
+        });
         break;
       case 'user.presence.changed':
         defaults.handleUserPresenceChanged({ event, setChannels });
diff --git a/src/components/ChannelList/hooks/useChannelMembershipState.ts b/src/components/ChannelList/hooks/useChannelMembershipState.ts
index fb80c0766..8f303fecd 100644
--- a/src/components/ChannelList/hooks/useChannelMembershipState.ts
+++ b/src/components/ChannelList/hooks/useChannelMembershipState.ts
@@ -1,4 +1,9 @@
-import type { Channel, ChannelMemberResponse, EventTypes, ExtendableGenerics } from 'stream-chat';
+import type {
+  Channel,
+  ChannelMemberResponse,
+  EventTypes,
+  ExtendableGenerics,
+} from 'stream-chat';
 import { useSelectedChannelState } from './useSelectedChannelState';
 
 const selector = <SCG extends ExtendableGenerics>(c: Channel<SCG>) => c.state.membership;
@@ -10,6 +15,8 @@ export function useChannelMembershipState<SCG extends ExtendableGenerics>(
 export function useChannelMembershipState<SCG extends ExtendableGenerics>(
   channel?: Channel<SCG> | undefined,
 ): ChannelMemberResponse<SCG> | undefined;
-export function useChannelMembershipState<SCG extends ExtendableGenerics>(channel?: Channel<SCG>) {
+export function useChannelMembershipState<SCG extends ExtendableGenerics>(
+  channel?: Channel<SCG>,
+) {
   return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
 }
diff --git a/src/components/ChannelList/hooks/useChannelTruncatedListener.ts b/src/components/ChannelList/hooks/useChannelTruncatedListener.ts
index 77e7c8b5d..295b05447 100644
--- a/src/components/ChannelList/hooks/useChannelTruncatedListener.ts
+++ b/src/components/ChannelList/hooks/useChannelTruncatedListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useChannelTruncatedListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
diff --git a/src/components/ChannelList/hooks/useChannelUpdatedListener.ts b/src/components/ChannelList/hooks/useChannelUpdatedListener.ts
index aa6fcfda8..9159a8568 100644
--- a/src/components/ChannelList/hooks/useChannelUpdatedListener.ts
+++ b/src/components/ChannelList/hooks/useChannelUpdatedListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useChannelUpdatedListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
@@ -21,7 +21,9 @@ export const useChannelUpdatedListener = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
-        const channelIndex = channels.findIndex((channel) => channel.cid === event.channel?.cid);
+        const channelIndex = channels.findIndex(
+          (channel) => channel.cid === event.channel?.cid,
+        );
 
         if (channelIndex > -1 && event.channel) {
           const newChannels = channels;
@@ -29,7 +31,8 @@ export const useChannelUpdatedListener = <
             ...event.channel,
             hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
             own_capabilities:
-              event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities,
+              event.channel?.own_capabilities ??
+              newChannels[channelIndex].data?.own_capabilities,
           };
 
           return [...newChannels];
diff --git a/src/components/ChannelList/hooks/useChannelVisibleListener.ts b/src/components/ChannelList/hooks/useChannelVisibleListener.ts
index cd7120292..8b4cd8c34 100644
--- a/src/components/ChannelList/hooks/useChannelVisibleListener.ts
+++ b/src/components/ChannelList/hooks/useChannelVisibleListener.ts
@@ -10,7 +10,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useChannelVisibleListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
diff --git a/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts b/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
index d54bcebc5..4e6543893 100644
--- a/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
+++ b/src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
@@ -5,7 +5,7 @@ import { useChatContext } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useConnectionRecoveredListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   forceUpdate?: () => void,
 ) => {
diff --git a/src/components/ChannelList/hooks/useMessageNewListener.ts b/src/components/ChannelList/hooks/useMessageNewListener.ts
index 548d5f22d..a8e1218ba 100644
--- a/src/components/ChannelList/hooks/useMessageNewListener.ts
+++ b/src/components/ChannelList/hooks/useMessageNewListener.ts
@@ -10,7 +10,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useMessageNewListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
@@ -28,9 +28,14 @@ export const useMessageNewListener = <
         customHandler(setChannels, event);
       } else {
         setChannels((channels) => {
-          const channelInList = channels.filter((channel) => channel.cid === event.cid).length > 0;
-
-          if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
+          const channelInList =
+            channels.filter((channel) => channel.cid === event.cid).length > 0;
+
+          if (
+            !channelInList &&
+            allowNewMessagesFromUnfilteredChannels &&
+            event.channel_type
+          ) {
             const channel = client.channel(event.channel_type, event.channel_id);
             return uniqBy([channel, ...channels], 'cid');
           }
diff --git a/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts b/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts
index 520d580ef..bc73978ed 100644
--- a/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts
+++ b/src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts
@@ -10,7 +10,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useNotificationAddedToChannelListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
@@ -19,7 +19,9 @@ export const useNotificationAddedToChannelListener = <
   ) => void,
   allowNewMessagesFromUnfilteredChannels = true,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>('useNotificationAddedToChannelListener');
+  const { client } = useChatContext<StreamChatGenerics>(
+    'useNotificationAddedToChannelListener',
+  );
 
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
diff --git a/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts b/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
index 6fd242b7d..274581247 100644
--- a/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
+++ b/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts
@@ -10,7 +10,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useNotificationMessageNewListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
@@ -19,7 +19,9 @@ export const useNotificationMessageNewListener = <
   ) => void,
   allowNewMessagesFromUnfilteredChannels = true,
 ) => {
-  const { client } = useChatContext<StreamChatGenerics>('useNotificationMessageNewListener');
+  const { client } = useChatContext<StreamChatGenerics>(
+    'useNotificationMessageNewListener',
+  );
 
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
diff --git a/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts b/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
index 00a5d3db2..478185572 100644
--- a/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
+++ b/src/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useNotificationRemovedFromChannelListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
   customHandler?: (
@@ -24,7 +24,9 @@ export const useNotificationRemovedFromChannelListener = <
       if (customHandler && typeof customHandler === 'function') {
         customHandler(setChannels, event);
       } else {
-        setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
+        setChannels((channels) =>
+          channels.filter((channel) => channel.cid !== event.channel?.cid),
+        );
       }
     };
 
diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts
index 6a27d0a30..7ee665627 100644
--- a/src/components/ChannelList/hooks/usePaginatedChannels.ts
+++ b/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -3,7 +3,13 @@ import uniqBy from 'lodash.uniqby';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, StreamChat } from 'stream-chat';
+import type {
+  Channel,
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  StreamChat,
+} from 'stream-chat';
 
 import { useChatContext } from '../../../context/ChatContext';
 
@@ -14,10 +20,13 @@ import { DEFAULT_INITIAL_CHANNEL_PAGE_SIZE } from '../../../constants/limits';
 const RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
 const MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
 
-type AllowedQueryType = Extract<ChannelsQueryState['queryInProgress'], 'reload' | 'load-more'>;
+type AllowedQueryType = Extract<
+  ChannelsQueryState['queryInProgress'],
+  'reload' | 'load-more'
+>;
 
 export type CustomQueryChannelParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   currentChannels: Array<Channel<StreamChatGenerics>>;
   queryType: AllowedQueryType;
@@ -26,11 +35,11 @@ export type CustomQueryChannelParams<
 };
 
 export type CustomQueryChannelsFn<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (params: CustomQueryChannelParams<StreamChatGenerics>) => Promise<void>;
 
 export const usePaginatedChannels = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   client: StreamChat<StreamChatGenerics>,
   filters: ChannelFilters<StreamChatGenerics>,
@@ -53,7 +62,7 @@ export const usePaginatedChannels = <
   const recoveryThrottleInterval =
     recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
       ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
-      : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
+      : (recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS);
   // memoize props
   const filterString = useMemo(() => JSON.stringify(filters), [filters]);
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
@@ -85,7 +94,11 @@ export const usePaginatedChannels = <
           ...options,
         };
 
-        const channelQueryResponse = await client.queryChannels(filters, sort || {}, newOptions);
+        const channelQueryResponse = await client.queryChannels(
+          filters,
+          sort || {},
+          newOptions,
+        );
 
         const newChannels =
           queryType === 'reload'
@@ -115,7 +128,11 @@ export const usePaginatedChannels = <
       ? now - lastRecoveryTimestamp.current
       : 0;
 
-    if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
+    if (
+      !isFirstRecovery &&
+      timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval &&
+      !error
+    ) {
       return;
     }
 
diff --git a/src/components/ChannelList/hooks/useSelectedChannelState.ts b/src/components/ChannelList/hooks/useSelectedChannelState.ts
index bf1e67730..3100e6ffa 100644
--- a/src/components/ChannelList/hooks/useSelectedChannelState.ts
+++ b/src/components/ChannelList/hooks/useSelectedChannelState.ts
@@ -17,8 +17,8 @@ export function useSelectedChannelState<SCG extends ExtendableGenerics, O>(_: {
 }): O | undefined;
 export function useSelectedChannelState<SCG extends ExtendableGenerics, O>({
   channel,
-  stateChangeEventKeys = ['all'],
   selector,
+  stateChangeEventKeys = ['all'],
 }: {
   selector: (channel: Channel<SCG>) => O;
   channel?: Channel<SCG>;
diff --git a/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts b/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts
index 771942caa..9d876f994 100644
--- a/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts
+++ b/src/components/ChannelList/hooks/useUserPresenceChangedListener.ts
@@ -7,7 +7,7 @@ import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useUserPresenceChangedListener = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>,
 ) => {
diff --git a/src/components/ChannelList/utils.ts b/src/components/ChannelList/utils.ts
index 5c3830109..2a867d2dd 100644
--- a/src/components/ChannelList/utils.ts
+++ b/src/components/ChannelList/utils.ts
@@ -1,12 +1,19 @@
 import uniqBy from 'lodash.uniqby';
-import type { Channel, ChannelSort, ChannelSortBase, ExtendableGenerics } from 'stream-chat';
+import type {
+  Channel,
+  ChannelSort,
+  ChannelSortBase,
+  ExtendableGenerics,
+} from 'stream-chat';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelListProps } from './ChannelList';
 
 export const MAX_QUERY_CHANNELS_LIMIT = 30;
 
-type MoveChannelUpParams<SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+type MoveChannelUpParams<
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   channels: Array<Channel<SCG>>;
   cid: string;
   activeChannel?: Channel<SCG>;
@@ -15,7 +22,9 @@ type MoveChannelUpParams<SCG extends DefaultStreamChatGenerics = DefaultStreamCh
 /**
  * @deprecated
  */
-export const moveChannelUp = <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
+export const moveChannelUp = <
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   activeChannel,
   channels,
   cid,
@@ -56,7 +65,9 @@ export function findLastPinnedChannelIndex<SCG extends ExtendableGenerics>({
   return lastPinnedChannelIndex;
 }
 
-type MoveChannelUpwardsParams<SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+type MoveChannelUpwardsParams<
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
   channels: Array<Channel<SCG>>;
   channelToMove: Channel<SCG>;
   sort: ChannelSort<SCG>;
@@ -68,7 +79,7 @@ type MoveChannelUpwardsParams<SCG extends DefaultStreamChatGenerics = DefaultStr
 };
 
 export const moveChannelUpwards = <
-  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channels,
   channelToMove,
@@ -181,7 +192,9 @@ export const shouldConsiderArchivedChannels = <SCG extends ExtendableGenerics>(
 /**
  * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
  */
-export const isChannelPinned = <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => {
+export const isChannelPinned = <SCG extends ExtendableGenerics>(
+  channel: Channel<SCG>,
+) => {
   if (!channel) return false;
 
   const membership = channel.state.membership;
@@ -192,7 +205,9 @@ export const isChannelPinned = <SCG extends ExtendableGenerics>(channel: Channel
 /**
  * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
  */
-export const isChannelArchived = <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => {
+export const isChannelArchived = <SCG extends ExtendableGenerics>(
+  channel: Channel<SCG>,
+) => {
   if (!channel) return false;
 
   const membership = channel.state.membership;
diff --git a/src/components/ChannelPreview/ChannelPreview.tsx b/src/components/ChannelPreview/ChannelPreview.tsx
index a25bd333e..b6bc89738 100644
--- a/src/components/ChannelPreview/ChannelPreview.tsx
+++ b/src/components/ChannelPreview/ChannelPreview.tsx
@@ -8,7 +8,10 @@ import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './uti
 
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { MessageDeliveryStatus, useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
+import {
+  MessageDeliveryStatus,
+  useMessageDeliveryStatus,
+} from './hooks/useMessageDeliveryStatus';
 
 import type { Channel, Event } from 'stream-chat';
 
@@ -19,7 +22,7 @@ import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelPreviewUIComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ChannelPreviewProps<StreamChatGenerics> & {
   /** If the component's channel is the active (selected) Channel */
   active?: boolean;
@@ -42,7 +45,7 @@ export type ChannelPreviewUIComponentProps<
 };
 
 export type ChannelPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
   channel: Channel<StreamChatGenerics>;
@@ -72,15 +75,15 @@ export type ChannelPreviewProps<
 };
 
 export const ChannelPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelPreviewProps<StreamChatGenerics>,
 ) => {
   const {
     channel,
-    Preview = ChannelPreviewMessenger,
     channelUpdateCount,
     getLatestMessagePreview = defaultGetLatestMessagePreview,
+    Preview = ChannelPreviewMessenger,
   } = props;
   const {
     channel: activeChannel,
@@ -144,7 +147,9 @@ export const ChannelPreview = <
     refreshUnreadCount();
 
     const handleEvent = () => {
-      setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
+      setLastMessage(
+        channel.state.latestMessages[channel.state.latestMessages.length - 1],
+      );
       refreshUnreadCount();
     };
 
diff --git a/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
index ed93d7585..389c7bd14 100644
--- a/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
+++ b/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
@@ -8,7 +8,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 
 const UnMemoizedChannelPreviewMessenger = <
-  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelPreviewUIComponentProps<SCG>,
 ) => {
@@ -27,9 +27,8 @@ const UnMemoizedChannelPreviewMessenger = <
     watchers,
   } = props;
 
-  const {
-    ChannelPreviewActionButtons = DefaultChannelPreviewActionButtons,
-  } = useComponentContext<SCG>();
+  const { ChannelPreviewActionButtons = DefaultChannelPreviewActionButtons } =
+    useComponentContext<SCG>();
 
   const channelPreviewButton = useRef<HTMLButtonElement | null>(null);
 
@@ -78,7 +77,10 @@ const UnMemoizedChannelPreviewMessenger = <
               <span>{displayTitle}</span>
             </div>
             {!!unread && (
-              <div className='str-chat__channel-preview-unread-badge' data-testid='unread-badge'>
+              <div
+                className='str-chat__channel-preview-unread-badge'
+                data-testid='unread-badge'
+              >
                 {unread}
               </div>
             )}
diff --git a/src/components/ChannelPreview/__tests__/ChannelPreview.test.js b/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
index 035ac4bb5..5380279d0 100644
--- a/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
+++ b/src/components/ChannelPreview/__tests__/ChannelPreview.test.js
@@ -98,7 +98,6 @@ describe('ChannelPreview', () => {
     [c0, c1] = await client.queryChannels({}, {});
   });
 
-  // eslint-disable-next-line jest/expect-expect
   it('should mark channel as read, when set as active channel', async () => {
     // Mock the countUnread function on channel, to return 10.
     c0.countUnread = () => 10;
@@ -670,8 +669,14 @@ describe('ChannelPreview', () => {
           const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
           expect(avatarImages).toHaveLength(3);
           expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-          expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-          expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+          expect(avatarImages[1]).toHaveAttribute(
+            'src',
+            channelState.members[1].user.image,
+          );
+          expect(avatarImages[2]).toHaveAttribute(
+            'src',
+            channelState.members[2].user.image,
+          );
         });
 
         act(() => {
@@ -681,8 +686,14 @@ describe('ChannelPreview', () => {
         await waitFor(() => {
           const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
           expect(avatarImages[0]).toHaveAttribute('src', updatedAttribute.image);
-          expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-          expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+          expect(avatarImages[1]).toHaveAttribute(
+            'src',
+            channelState.members[1].user.image,
+          );
+          expect(avatarImages[2]).toHaveAttribute(
+            'src',
+            channelState.members[2].user.image,
+          );
         });
       });
 
@@ -702,8 +713,14 @@ describe('ChannelPreview', () => {
           const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
           expect(avatarImages).toHaveLength(3);
           expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-          expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
-          expect(avatarImages[2]).toHaveAttribute('src', channelState.members[2].user.image);
+          expect(avatarImages[1]).toHaveAttribute(
+            'src',
+            channelState.members[1].user.image,
+          );
+          expect(avatarImages[2]).toHaveAttribute(
+            'src',
+            channelState.members[2].user.image,
+          );
         });
 
         act(() => {
@@ -713,7 +730,10 @@ describe('ChannelPreview', () => {
         await waitFor(() => {
           const avatarImages = screen.getAllByTestId(AVATAR_IMG_TEST_ID);
           expect(avatarImages[0]).toHaveAttribute('src', ownUser.image);
-          expect(avatarImages[1]).toHaveAttribute('src', channelState.members[1].user.image);
+          expect(avatarImages[1]).toHaveAttribute(
+            'src',
+            channelState.members[1].user.image,
+          );
           expect(avatarImages[2]).toHaveAttribute('src', updatedAttribute.image);
         });
       });
diff --git a/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js b/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
index c523e1edc..6dfcda5d7 100644
--- a/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
+++ b/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
@@ -74,7 +74,6 @@ describe('ChannelPreviewMessenger', () => {
     fireEvent.click(getByTestId(PREVIEW_TEST_ID));
 
     await waitFor(() => {
-      // eslint-disable-next-line jest/prefer-called-with
       expect(setActiveChannel).toHaveBeenCalledTimes(1);
       expect(setActiveChannel).toHaveBeenCalledWith(channel, {});
     });
diff --git a/src/components/ChannelPreview/__tests__/utils.test.js b/src/components/ChannelPreview/__tests__/utils.test.js
index f254cb811..fb2722d33 100644
--- a/src/components/ChannelPreview/__tests__/utils.test.js
+++ b/src/components/ChannelPreview/__tests__/utils.test.js
@@ -60,7 +60,9 @@ describe('ChannelPreview utils', () => {
   describe('getDisplayTitle', () => {
     it('should return channel name, if it exists', async () => {
       const name = nanoid();
-      const channel = await getQueriedChannelInstance(generateChannel({ channel: { name } }));
+      const channel = await getQueriedChannelInstance(
+        generateChannel({ channel: { name } }),
+      );
 
       expect(getDisplayTitle(channel, chatClient.user)).toBe(name);
     });
@@ -69,7 +71,10 @@ describe('ChannelPreview utils', () => {
       const otherUser = generateUser();
       const channel = await getQueriedChannelInstance(
         generateChannel({
-          members: [generateMember({ user: otherUser }), generateMember({ user: clientUser })],
+          members: [
+            generateMember({ user: otherUser }),
+            generateMember({ user: clientUser }),
+          ],
         }),
       );
       expect(getDisplayTitle(channel, chatClient.user)).toBe(otherUser.name);
@@ -79,7 +84,9 @@ describe('ChannelPreview utils', () => {
   describe('getDisplayImage', () => {
     it('should return channel image, if it exists', async () => {
       const image = nanoid();
-      const channel = await getQueriedChannelInstance(generateChannel({ channel: { image } }));
+      const channel = await getQueriedChannelInstance(
+        generateChannel({ channel: { image } }),
+      );
 
       expect(getDisplayImage(channel, chatClient.user)).toBe(image);
     });
@@ -88,7 +95,10 @@ describe('ChannelPreview utils', () => {
       const otherUser = generateUser();
       const channel = await getQueriedChannelInstance(
         generateChannel({
-          members: [generateMember({ user: otherUser }), generateMember({ user: clientUser })],
+          members: [
+            generateMember({ user: otherUser }),
+            generateMember({ user: clientUser }),
+          ],
         }),
       );
       expect(getDisplayImage(channel, chatClient.user)).toBe(otherUser.image);
diff --git a/src/components/ChannelPreview/hooks/__tests__/useMessageDeliveryStatus.test.js b/src/components/ChannelPreview/hooks/__tests__/useMessageDeliveryStatus.test.js
index 94a44f8b1..c716fa492 100644
--- a/src/components/ChannelPreview/hooks/__tests__/useMessageDeliveryStatus.test.js
+++ b/src/components/ChannelPreview/hooks/__tests__/useMessageDeliveryStatus.test.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../useMessageDeliveryStatus';
+import {
+  MessageDeliveryStatus,
+  useMessageDeliveryStatus,
+} from '../useMessageDeliveryStatus';
 import { ChatContext } from '../../../../context';
 import {
   dispatchMessageDeletedEvent,
@@ -44,7 +47,9 @@ const renderComponent = ({ channel, client, lastMessage }) => {
     <ChatContext.Provider value={{ client }}>{children}</ChatContext.Provider>
   );
 
-  return renderHook(() => useMessageDeliveryStatus({ channel, lastMessage }), { wrapper });
+  return renderHook(() => useMessageDeliveryStatus({ channel, lastMessage }), {
+    wrapper,
+  });
 };
 
 describe('Message delivery status', () => {
diff --git a/src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts b/src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
index 336b7eb76..f1fbb80cc 100644
--- a/src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
+++ b/src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
@@ -6,7 +6,9 @@ import { useChatContext } from '../../../context';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export type ChannelPreviewInfoParams<StreamChatGenerics extends DefaultStreamChatGenerics> = {
+export type ChannelPreviewInfoParams<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+> = {
   channel: Channel<StreamChatGenerics>;
   /** Manually set the image to render, defaults to the Channel image */
   overrideImage?: string;
@@ -15,7 +17,7 @@ export type ChannelPreviewInfoParams<StreamChatGenerics extends DefaultStreamCha
 };
 
 export const useChannelPreviewInfo = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelPreviewInfoParams<StreamChatGenerics>,
 ) => {
diff --git a/src/components/ChannelPreview/hooks/useIsChannelMuted.ts b/src/components/ChannelPreview/hooks/useIsChannelMuted.ts
index cda462f77..2e9c47197 100644
--- a/src/components/ChannelPreview/hooks/useIsChannelMuted.ts
+++ b/src/components/ChannelPreview/hooks/useIsChannelMuted.ts
@@ -7,7 +7,7 @@ import type { Channel } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useIsChannelMuted = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
 ) => {
diff --git a/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts b/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
index d7c63aa34..8d8e3c3f7 100644
--- a/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
+++ b/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts
@@ -12,7 +12,7 @@ export enum MessageDeliveryStatus {
 }
 
 type UseMessageStatusParamsChannelPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   channel: Channel<StreamChatGenerics>;
   /** The last message received in a channel */
@@ -20,7 +20,7 @@ type UseMessageStatusParamsChannelPreviewProps<
 };
 
 export const useMessageDeliveryStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   lastMessage,
@@ -45,12 +45,12 @@ export const useMessageDeliveryStatus = <
         ? new Date(lastMessage.created_at)
         : lastMessage.created_at;
 
-    const channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(
-      ({ last_read: channelLastMarkedReadDate, user }) => {
-        const ignoreOwnReadStatus = client.user && user.id !== client.user.id;
-        return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
-      },
-    );
+    const channelReadByOthersAfterLastMessageUpdate = Object.values(
+      channel.state.read,
+    ).some(({ last_read: channelLastMarkedReadDate, user }) => {
+      const ignoreOwnReadStatus = client.user && user.id !== client.user.id;
+      return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
+    });
 
     setMessageDeliveryStatus(
       channelReadByOthersAfterLastMessageUpdate
@@ -79,7 +79,8 @@ export const useMessageDeliveryStatus = <
   useEffect(() => {
     if (!isOwnMessage(lastMessage)) return;
     const handleMarkRead = (event: Event<StreamChatGenerics>) => {
-      if (event.user?.id !== client.user?.id) setMessageDeliveryStatus(MessageDeliveryStatus.READ);
+      if (event.user?.id !== client.user?.id)
+        setMessageDeliveryStatus(MessageDeliveryStatus.READ);
     };
     channel.on('message.read', handleMarkRead);
 
diff --git a/src/components/ChannelPreview/icons.tsx b/src/components/ChannelPreview/icons.tsx
index 7ef798b1c..04507fdaa 100644
--- a/src/components/ChannelPreview/icons.tsx
+++ b/src/components/ChannelPreview/icons.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
diff --git a/src/components/ChannelPreview/utils.tsx b/src/components/ChannelPreview/utils.tsx
index 4b79ddd0b..492b4293f 100644
--- a/src/components/ChannelPreview/utils.tsx
+++ b/src/components/ChannelPreview/utils.tsx
@@ -9,17 +9,20 @@ import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ChatContextValue } from '../../context';
 
-export const renderPreviewText = (text: string) => <ReactMarkdown skipHtml>{text}</ReactMarkdown>;
+export const renderPreviewText = (text: string) => (
+  <ReactMarkdown skipHtml>{text}</ReactMarkdown>
+);
 
 const getLatestPollVote = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   latestVotesByOption: Record<string, PollVote<StreamChatGenerics>[]>,
 ) => {
   let latestVote: PollVote<StreamChatGenerics> | undefined;
   for (const optionVotes of Object.values(latestVotesByOption)) {
     optionVotes.forEach((vote) => {
-      if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at)) return;
+      if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at))
+        return;
       latestVote = vote;
     });
   }
@@ -28,14 +31,15 @@ const getLatestPollVote = <
 };
 
 export const getLatestMessagePreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
   t: TranslationContextValue['t'],
   userLanguage: TranslationContextValue['userLanguage'] = 'en',
   isMessageAIGenerated?: ChatContextValue<StreamChatGenerics>['isMessageAIGenerated'],
 ): string | JSX.Element => {
-  const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
+  const latestMessage =
+    channel.state.latestMessages[channel.state.latestMessages.length - 1];
 
   const previewTextToRender =
     latestMessage?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
@@ -55,7 +59,7 @@ export const getLatestMessagePreview = <
       const createdBy =
         poll.created_by?.id === channel.getClient().userID
           ? t<string>('You')
-          : poll.created_by?.name ?? t<string>('Poll');
+          : (poll.created_by?.name ?? t<string>('Poll'));
       return t<string>('📊 {{createdBy}} created: {{ pollName}}', {
         createdBy,
         pollName: poll.name,
@@ -64,7 +68,8 @@ export const getLatestMessagePreview = <
       const latestVote = getLatestPollVote<StreamChatGenerics>(
         poll.latest_votes_by_option as Record<string, PollVote<StreamChatGenerics>[]>,
       );
-      const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
+      const option =
+        latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
 
       if (option && latestVote) {
         return t<string>('📊 {{votedBy}} voted: {{pollOptionText}}', {
@@ -72,7 +77,7 @@ export const getLatestMessagePreview = <
           votedBy:
             latestVote?.user?.id === channel.getClient().userID
               ? t<string>('You')
-              : latestVote.user?.name ?? t<string>('Poll'),
+              : (latestVote.user?.name ?? t<string>('Poll')),
         });
       }
     }
@@ -98,7 +103,7 @@ export const getLatestMessagePreview = <
 export type GroupChannelDisplayInfo = { image?: string; name?: string }[];
 
 export const getGroupChannelDisplayInfo = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
 ): GroupChannelDisplayInfo | undefined => {
@@ -116,7 +121,7 @@ export const getGroupChannelDisplayInfo = <
 };
 
 const getChannelDisplayInfo = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   info: 'name' | 'image',
   channel: Channel<StreamChatGenerics>,
@@ -130,14 +135,14 @@ const getChannelDisplayInfo = <
 };
 
 export const getDisplayTitle = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
   currentUser?: UserResponse<StreamChatGenerics>,
 ) => getChannelDisplayInfo('name', channel, currentUser);
 
 export const getDisplayImage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
   currentUser?: UserResponse<StreamChatGenerics>,
diff --git a/src/components/ChannelSearch/ChannelSearch.tsx b/src/components/ChannelSearch/ChannelSearch.tsx
index d6229db6f..24b6a3be3 100644
--- a/src/components/ChannelSearch/ChannelSearch.tsx
+++ b/src/components/ChannelSearch/ChannelSearch.tsx
@@ -1,7 +1,10 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { ChannelSearchControllerParams, useChannelSearch } from './hooks/useChannelSearch';
+import {
+  ChannelSearchControllerParams,
+  useChannelSearch,
+} from './hooks/useChannelSearch';
 
 import type { AdditionalSearchBarProps, SearchBarProps } from './SearchBar';
 import { SearchBar as DefaultSearchBar } from './SearchBar';
@@ -22,7 +25,7 @@ export type AdditionalChannelSearchProps = {
 };
 
 export type ChannelSearchProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = AdditionalSearchBarProps &
   AdditionalSearchInputProps &
   AdditionalSearchResultsProps<StreamChatGenerics> &
@@ -30,7 +33,7 @@ export type ChannelSearchProps<
   ChannelSearchControllerParams<StreamChatGenerics>;
 
 const UnMemoizedChannelSearch = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ChannelSearchProps<StreamChatGenerics>,
 ) => {
@@ -44,11 +47,11 @@ const UnMemoizedChannelSearch = <
     SearchBar = DefaultSearchBar,
     SearchEmpty,
     SearchInput = DefaultSearchInput,
-    SearchLoading,
     SearchInputIcon,
+    SearchLoading,
     SearchResultItem,
-    SearchResultsList,
     SearchResultsHeader,
+    SearchResultsList,
     ...channelSearchParams
   } = props;
 
@@ -70,7 +73,9 @@ const UnMemoizedChannelSearch = <
     <div
       className={clsx(
         'str-chat__channel-search',
-        popupResults ? 'str-chat__channel-search--popup' : 'str-chat__channel-search--inline',
+        popupResults
+          ? 'str-chat__channel-search--popup'
+          : 'str-chat__channel-search--inline',
         {
           'str-chat__channel-search--with-results': results.length > 0,
         },
@@ -118,4 +123,6 @@ const UnMemoizedChannelSearch = <
  * Clicking on a list item will navigate you into a channel with the selected user. It can be used
  * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
  */
-export const ChannelSearch = React.memo(UnMemoizedChannelSearch) as typeof UnMemoizedChannelSearch;
+export const ChannelSearch = React.memo(
+  UnMemoizedChannelSearch,
+) as typeof UnMemoizedChannelSearch;
diff --git a/src/components/ChannelSearch/SearchBar.tsx b/src/components/ChannelSearch/SearchBar.tsx
index 0451a4c38..735ae91a6 100644
--- a/src/components/ChannelSearch/SearchBar.tsx
+++ b/src/components/ChannelSearch/SearchBar.tsx
@@ -65,7 +65,9 @@ export type AdditionalSearchBarProps = {
   SearchInputIcon?: React.ComponentType;
 };
 
-export type SearchBarProps = AdditionalSearchBarProps & SearchBarController & SearchInputProps;
+export type SearchBarProps = AdditionalSearchBarProps &
+  SearchBarController &
+  SearchInputProps;
 
 // todo: add context menu control logic
 export const SearchBar = (props: SearchBarProps) => {
@@ -142,7 +144,11 @@ export const SearchBar = (props: SearchBarProps) => {
   const closeAppMenu = useCallback(() => setMenuIsOpen(false), []);
 
   return (
-    <div className='str-chat__channel-search-bar' data-testid='search-bar' ref={searchBarRef}>
+    <div
+      className='str-chat__channel-search-bar'
+      data-testid='search-bar'
+      ref={searchBarRef}
+    >
       {inputIsFocused ? (
         <SearchBarButton
           className='str-chat__channel-search-bar-button--exit-search'
diff --git a/src/components/ChannelSearch/SearchResults.tsx b/src/components/ChannelSearch/SearchResults.tsx
index ea03d8246..19c150ced 100644
--- a/src/components/ChannelSearch/SearchResults.tsx
+++ b/src/components/ChannelSearch/SearchResults.tsx
@@ -21,11 +21,11 @@ const DefaultSearchEmpty = () => {
 };
 
 export type SearchResultsHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SearchResultsProps<StreamChatGenerics>, 'results'>;
 
 const DefaultSearchResultsHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   results,
 }: SearchResultsHeaderProps<StreamChatGenerics>) => {
@@ -43,15 +43,18 @@ const DefaultSearchResultsHeader = <
 };
 
 export type SearchResultsListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Required<
-  Pick<SearchResultsProps<StreamChatGenerics>, 'results' | 'SearchResultItem' | 'selectResult'>
+  Pick<
+    SearchResultsProps<StreamChatGenerics>,
+    'results' | 'SearchResultItem' | 'selectResult'
+  >
 > & {
   focusedUser?: number;
 };
 
 const DefaultSearchResultsList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: SearchResultsListProps<StreamChatGenerics>,
 ) => {
@@ -73,7 +76,7 @@ const DefaultSearchResultsList = <
 };
 
 export type SearchResultItemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SearchResultsProps<StreamChatGenerics>, 'selectResult'> & {
   index: number;
   result: ChannelOrUserResponse<StreamChatGenerics>;
@@ -81,7 +84,7 @@ export type SearchResultItemProps<
 };
 
 const DefaultSearchResultItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: SearchResultItemProps<StreamChatGenerics>,
 ) => {
@@ -135,7 +138,10 @@ const ResultsContainer = ({
   return (
     <div
       aria-label={t('aria/Channel search results')}
-      className={clsx(`str-chat__channel-search-result-list`, popupResults ? 'popup' : 'inline')}
+      className={clsx(
+        `str-chat__channel-search-result-list`,
+        popupResults ? 'popup' : 'inline',
+      )}
     >
       {children}
     </div>
@@ -143,15 +149,17 @@ const ResultsContainer = ({
 };
 
 export type SearchResultsController<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   results: Array<ChannelOrUserResponse<StreamChatGenerics>>;
   searching: boolean;
-  selectResult: (result: ChannelOrUserResponse<StreamChatGenerics>) => Promise<void> | void;
+  selectResult: (
+    result: ChannelOrUserResponse<StreamChatGenerics>,
+  ) => Promise<void> | void;
 };
 
 export type AdditionalSearchResultsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Display search results as an absolutely positioned popup, defaults to false and shows inline */
   popupResults?: boolean;
@@ -168,22 +176,23 @@ export type AdditionalSearchResultsProps<
 };
 
 export type SearchResultsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = AdditionalSearchResultsProps<StreamChatGenerics> & SearchResultsController<StreamChatGenerics>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AdditionalSearchResultsProps<StreamChatGenerics> &
+  SearchResultsController<StreamChatGenerics>;
 
 export const SearchResults = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: SearchResultsProps<StreamChatGenerics>,
 ) => {
   const {
     popupResults,
     results,
-    searching,
     SearchEmpty = DefaultSearchEmpty,
-    SearchResultsHeader = DefaultSearchResultsHeader,
+    searching,
     SearchLoading,
     SearchResultItem = DefaultSearchResultItem,
+    SearchResultsHeader = DefaultSearchResultsHeader,
     SearchResultsList = DefaultSearchResultsList,
     selectResult,
   } = props;
diff --git a/src/components/ChannelSearch/__tests__/ChannelSearch.test.js b/src/components/ChannelSearch/__tests__/ChannelSearch.test.js
index dacbe5048..55fa3bf69 100644
--- a/src/components/ChannelSearch/__tests__/ChannelSearch.test.js
+++ b/src/components/ChannelSearch/__tests__/ChannelSearch.test.js
@@ -85,7 +85,9 @@ describe('ChannelSearch', () => {
 
   it('starts with "searching" flag disabled', async () => {
     await renderSearch();
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).not.toBeInTheDocument();
   });
 
   it('sets "searching" flag on first typing stroke', async () => {
@@ -93,7 +95,9 @@ describe('ChannelSearch', () => {
     await act(() => {
       typeText(typedText);
     });
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).toBeInTheDocument();
   });
 
   it('removes "searching" flag upon deleting the last character', async () => {
@@ -101,11 +105,15 @@ describe('ChannelSearch', () => {
     await act(() => {
       typeText(typedText);
     });
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).toBeInTheDocument();
     await act(() => {
       typeText('');
     });
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).not.toBeInTheDocument();
   });
 
   it('removes "searching" flag upon setting search results', async () => {
@@ -116,14 +124,18 @@ describe('ChannelSearch', () => {
     await act(() => {
       typeText(typedText);
     });
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).toBeInTheDocument();
 
     await act(() => {
       jest.advanceTimersByTime(1000);
     });
 
     await waitFor(() => {
-      expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+      ).not.toBeInTheDocument();
     });
     jest.useRealTimers();
   });
@@ -146,7 +158,10 @@ describe('ChannelSearch', () => {
 
     expect(client.queryUsers).toHaveBeenCalledWith(
       expect.objectContaining({
-        $or: [{ id: { $autocomplete: typedText } }, { name: { $autocomplete: typedText } }],
+        $or: [
+          { id: { $autocomplete: typedText } },
+          { name: { $autocomplete: typedText } },
+        ],
       }),
       { id: 1 },
       { limit },
@@ -169,7 +184,10 @@ describe('ChannelSearch', () => {
     jest.spyOn(client, 'queryUsers').mockResolvedValue({ users: [...otherUsers, user] });
     jest.spyOn(client, 'queryChannels').mockResolvedValue([channelResponseData]);
 
-    const { typeText } = await renderSearch({ client, props: { searchForChannels: true } });
+    const { typeText } = await renderSearch({
+      client,
+      props: { searchForChannels: true },
+    });
     await act(() => {
       typeText(typedText);
     });
@@ -226,8 +244,12 @@ describe('ChannelSearch', () => {
     });
 
     expect(client.queryUsers).toHaveBeenCalledTimes(1);
-    expect(screen.queryByTestId(TEST_ID.CHANNEL_SEARCH_RESULTS_HEADER)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.CHANNEL_SEARCH_RESULTS_HEADER),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
 
@@ -250,8 +272,12 @@ describe('ChannelSearch', () => {
     });
 
     expect(client.queryUsers).toHaveBeenCalledTimes(1);
-    expect(screen.queryByTestId(TEST_ID.CHANNEL_SEARCH_RESULTS_HEADER)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.CHANNEL_SEARCH_RESULTS_HEADER),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(TEST_ID.SEARCH_IN_PROGRESS_INDICATOR),
+    ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
 
@@ -283,7 +309,10 @@ describe('ChannelSearch', () => {
     expect(client.queryUsers).toHaveBeenCalledTimes(1);
     expect(client.queryUsers).toHaveBeenCalledWith(
       expect.objectContaining({
-        $or: [{ id: { $autocomplete: textToQuery } }, { name: { $autocomplete: textToQuery } }],
+        $or: [
+          { id: { $autocomplete: textToQuery } },
+          { name: { $autocomplete: textToQuery } },
+        ],
       }),
       { id: 1 },
       { limit: 8 },
@@ -323,7 +352,10 @@ describe('ChannelSearch', () => {
     expect(client.queryUsers).toHaveBeenCalledTimes(1);
     expect(client.queryUsers).toHaveBeenCalledWith(
       expect.objectContaining({
-        $or: [{ id: { $autocomplete: textToQuery } }, { name: { $autocomplete: textToQuery } }],
+        $or: [
+          { id: { $autocomplete: textToQuery } },
+          { name: { $autocomplete: textToQuery } },
+        ],
       }),
       { id: 1 },
       { limit: 8 },
diff --git a/src/components/ChannelSearch/__tests__/SearchBar.test.js b/src/components/ChannelSearch/__tests__/SearchBar.test.js
index ad23f7107..f434333ee 100644
--- a/src/components/ChannelSearch/__tests__/SearchBar.test.js
+++ b/src/components/ChannelSearch/__tests__/SearchBar.test.js
@@ -43,7 +43,7 @@ describe('SearchBar', () => {
   beforeEach(async () => {
     const user = generateUser();
     client = await getTestClientWithUser({ id: user.id });
-    useMockedApis(client, [queryUsersApi([user])]); // eslint-disable-line react-hooks/rules-of-hooks
+    useMockedApis(client, [queryUsersApi([user])]);
   });
 
   it.each([
diff --git a/src/components/ChannelSearch/__tests__/SearchResults.test.js b/src/components/ChannelSearch/__tests__/SearchResults.test.js
index 47bf988b1..85152b8e0 100644
--- a/src/components/ChannelSearch/__tests__/SearchResults.test.js
+++ b/src/components/ChannelSearch/__tests__/SearchResults.test.js
@@ -6,7 +6,11 @@ import { SearchResults } from '../SearchResults';
 
 import { ChatProvider } from '../../../context/ChatContext';
 
-import { createClientWithChannel, generateChannel, generateUser } from '../../../mock-builders';
+import {
+  createClientWithChannel,
+  generateChannel,
+  generateUser,
+} from '../../../mock-builders';
 
 const SEARCH_RESULT_LIST_SELECTOR = '.str-chat__channel-search-result-list';
 
diff --git a/src/components/ChannelSearch/hooks/useChannelSearch.ts b/src/components/ChannelSearch/hooks/useChannelSearch.ts
index c6014b940..608f9bec8 100644
--- a/src/components/ChannelSearch/hooks/useChannelSearch.ts
+++ b/src/components/ChannelSearch/hooks/useChannelSearch.ts
@@ -22,19 +22,23 @@ import type { SearchResultsController } from '../SearchResults';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type ChannelSearchFunctionParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   setQuery: React.Dispatch<React.SetStateAction<string>>;
-  setResults: React.Dispatch<React.SetStateAction<ChannelOrUserResponse<StreamChatGenerics>[]>>;
+  setResults: React.Dispatch<
+    React.SetStateAction<ChannelOrUserResponse<StreamChatGenerics>[]>
+  >;
   setSearching: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export type SearchController<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = SearchInputController & SearchBarController & SearchResultsController<StreamChatGenerics>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = SearchInputController &
+  SearchBarController &
+  SearchResultsController<StreamChatGenerics>;
 
 export type SearchQueryParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   channelFilters?: {
     filters?: ChannelFilters<StreamChatGenerics>;
@@ -51,7 +55,7 @@ export type SearchQueryParams<
 };
 
 export type ChannelSearchParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The type of channel to create on user result select, defaults to `messaging` */
   channelType?: string;
@@ -82,14 +86,14 @@ export type ChannelSearchParams<
 };
 
 export type ChannelSearchControllerParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ChannelSearchParams<StreamChatGenerics> & {
   /** Set the array of channels displayed in the ChannelList */
   setChannels?: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>;
 };
 
 export const useChannelSearch = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channelType = 'messaging',
   clearSearchOnClickOutside = true,
@@ -103,11 +107,14 @@ export const useChannelSearch = <
   searchQueryParams,
   setChannels,
 }: ChannelSearchControllerParams<StreamChatGenerics>): SearchController<StreamChatGenerics> => {
-  const { client, setActiveChannel } = useChatContext<StreamChatGenerics>('useChannelSearch');
+  const { client, setActiveChannel } =
+    useChatContext<StreamChatGenerics>('useChannelSearch');
 
   const [inputIsFocused, setInputIsFocused] = useState(false);
   const [query, setQuery] = useState('');
-  const [results, setResults] = useState<Array<ChannelOrUserResponse<StreamChatGenerics>>>([]);
+  const [results, setResults] = useState<
+    Array<ChannelOrUserResponse<StreamChatGenerics>>
+  >([]);
   const [searching, setSearching] = useState(false);
 
   const searchQueryPromiseInProgress = useRef<
@@ -156,7 +163,6 @@ export const useChannelSearch = <
 
     document.addEventListener('click', clickListener);
     return () => document.removeEventListener('click', clickListener);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
 
   useEffect(() => {
@@ -193,7 +199,9 @@ export const useChannelSearch = <
         setActiveChannel(result);
         selectedChannel = result;
       } else {
-        const newChannel = client.channel(channelType, { members: [client.userID, result.id] });
+        const newChannel = client.channel(channelType, {
+          members: [client.userID, result.id],
+        });
         await newChannel.watch();
 
         setActiveChannel(newChannel);
@@ -205,7 +213,14 @@ export const useChannelSearch = <
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels],
+    [
+      clearSearchOnClickOutside,
+      client,
+      exitSearch,
+      onSelectResult,
+      setActiveChannel,
+      setChannels,
+    ],
   );
 
   const getChannels = useCallback(
@@ -213,7 +228,7 @@ export const useChannelSearch = <
       let results: ChannelOrUserResponse<StreamChatGenerics>[] = [];
       try {
         const userQueryPromise = client.queryUsers(
-          // @ts-expect-error
+          // @ts-expect-error valid query
           {
             $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
             ...searchQueryParams?.userFilters?.filters,
@@ -228,7 +243,7 @@ export const useChannelSearch = <
           results = users.filter((u) => u.id !== client.user?.id);
         } else {
           const channelQueryPromise = client.queryChannels(
-            // @ts-expect-error
+            // @ts-expect-error valid query
             {
               name: { $autocomplete: text },
               ...searchQueryParams?.channelFilters?.filters,
@@ -263,10 +278,10 @@ export const useChannelSearch = <
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [
-    getChannels,
-    searchDebounceIntervalMs,
-  ]);
+  const scheduleGetChannels = useCallback(
+    debounce(getChannels, searchDebounceIntervalMs),
+    [getChannels, searchDebounceIntervalMs],
+  );
 
   const onSearch = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/components/ChannelSearch/icons.tsx b/src/components/ChannelSearch/icons.tsx
index 20fab9a29..d841b79ef 100644
--- a/src/components/ChannelSearch/icons.tsx
+++ b/src/components/ChannelSearch/icons.tsx
@@ -36,7 +36,13 @@ export const ReturnIcon = () => (
 );
 
 export const XIcon = () => (
-  <svg fill='none' height='14' viewBox='0 0 14 14' width='14' xmlns='http://www.w3.org/2000/svg'>
+  <svg
+    fill='none'
+    height='14'
+    viewBox='0 0 14 14'
+    width='14'
+    xmlns='http://www.w3.org/2000/svg'
+  >
     <path
       d='M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z'
       fill='#747881'
diff --git a/src/components/ChannelSearch/index.ts b/src/components/ChannelSearch/index.ts
index 951f123d5..716d76b7a 100644
--- a/src/components/ChannelSearch/index.ts
+++ b/src/components/ChannelSearch/index.ts
@@ -3,4 +3,7 @@ export * from './SearchBar';
 export * from './SearchInput';
 export * from './SearchResults';
 export * from './utils';
-export type { ChannelSearchFunctionParams, ChannelSearchParams } from './hooks/useChannelSearch';
+export type {
+  ChannelSearchFunctionParams,
+  ChannelSearchParams,
+} from './hooks/useChannelSearch';
diff --git a/src/components/ChannelSearch/utils.ts b/src/components/ChannelSearch/utils.ts
index 31409f92e..d9eec5c78 100644
--- a/src/components/ChannelSearch/utils.ts
+++ b/src/components/ChannelSearch/utils.ts
@@ -3,11 +3,12 @@ import type { Channel, UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelOrUserResponse<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Channel<StreamChatGenerics> | UserResponse<StreamChatGenerics>;
 
 export const isChannel = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   output: ChannelOrUserResponse<StreamChatGenerics>,
-): output is Channel<StreamChatGenerics> => (output as Channel<StreamChatGenerics>).cid != null;
+): output is Channel<StreamChatGenerics> =>
+  (output as Channel<StreamChatGenerics>).cid != null;
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index b908ee47b..f65b6a1ff 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -15,7 +15,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { MessageContextValue } from '../../context';
 
 export type ChatProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The StreamChat client object */
   client: StreamChat<StreamChatGenerics>;
@@ -44,7 +44,7 @@ export type ChatProps<
  * as it provides the ChatContext.
  */
 export const Chat = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
diff --git a/src/components/Chat/hooks/useChannelsQueryState.ts b/src/components/Chat/hooks/useChannelsQueryState.ts
index 46329978c..0a7fc6fb7 100644
--- a/src/components/Chat/hooks/useChannelsQueryState.ts
+++ b/src/components/Chat/hooks/useChannelsQueryState.ts
@@ -16,7 +16,8 @@ export interface ChannelsQueryState {
 
 export const useChannelsQueryState = (): ChannelsQueryState => {
   const [error, setError] = useState<ErrorFromResponse<APIErrorResponse> | null>(null);
-  const [queryInProgress, setQueryInProgress] = useState<ChannelQueryState>('uninitialized');
+  const [queryInProgress, setQueryInProgress] =
+    useState<ChannelQueryState>('uninitialized');
 
   return {
     error,
diff --git a/src/components/Chat/hooks/useChat.ts b/src/components/Chat/hooks/useChat.ts
index 168c4c76e..d7fcedaea 100644
--- a/src/components/Chat/hooks/useChat.ts
+++ b/src/components/Chat/hooks/useChat.ts
@@ -8,12 +8,18 @@ import {
   SupportedTranslations,
 } from '../../../i18n';
 
-import type { AppSettingsAPIResponse, Channel, Event, Mute, StreamChat } from 'stream-chat';
+import type {
+  AppSettingsAPIResponse,
+  Channel,
+  Event,
+  Mute,
+  StreamChat,
+} from 'stream-chat';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type UseChatParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   client: StreamChat<StreamChatGenerics>;
   defaultLanguage?: SupportedTranslations;
@@ -22,7 +28,7 @@ export type UseChatParams<
 };
 
 export const useChat = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   client,
   defaultLanguage = 'en',
@@ -45,7 +51,9 @@ export const useChat = <
   const closeMobileNav = () => setNavOpen(false);
   const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
 
-  const appSettings = useRef<Promise<AppSettingsAPIResponse<StreamChatGenerics>> | null>(null);
+  const appSettings = useRef<Promise<AppSettingsAPIResponse<StreamChatGenerics>> | null>(
+    null,
+  );
 
   const getAppSettings = () => {
     if (appSettings.current) {
@@ -91,7 +99,9 @@ export const useChat = <
 
     if (!userLanguage) {
       const browserLanguage = window.navigator.language.slice(0, 2); // just get language code, not country-specific version
-      userLanguage = isLanguageSupported(browserLanguage) ? browserLanguage : defaultLanguage;
+      userLanguage = isLanguageSupported(browserLanguage)
+        ? browserLanguage
+        : defaultLanguage;
     }
 
     const streami18n = i18nInstance || new Streami18n({ language: userLanguage });
diff --git a/src/components/Chat/hooks/useCreateChatClient.ts b/src/components/Chat/hooks/useCreateChatClient.ts
index f98af175a..cefc95fe6 100644
--- a/src/components/Chat/hooks/useCreateChatClient.ts
+++ b/src/components/Chat/hooks/useCreateChatClient.ts
@@ -38,9 +38,11 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
     const client = new StreamChat<SCG>(apiKey, undefined, cachedOptions);
     let didUserConnectInterrupt = false;
 
-    const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
-      if (!didUserConnectInterrupt) setChatClient(client);
-    });
+    const connectionPromise = client
+      .connectUser(cachedUserData, tokenOrProvider)
+      .then(() => {
+        if (!didUserConnectInterrupt) setChatClient(client);
+      });
 
     return () => {
       didUserConnectInterrupt = true;
diff --git a/src/components/Chat/hooks/useCreateChatContext.ts b/src/components/Chat/hooks/useCreateChatContext.ts
index d9cec2b0b..542362847 100644
--- a/src/components/Chat/hooks/useCreateChatContext.ts
+++ b/src/components/Chat/hooks/useCreateChatContext.ts
@@ -4,7 +4,7 @@ import type { ChatContextValue } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateChatContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   value: ChatContextValue<StreamChatGenerics>,
 ) => {
diff --git a/src/components/ChatAutoComplete/ChatAutoComplete.tsx b/src/components/ChatAutoComplete/ChatAutoComplete.tsx
index 7c5f2c512..eab63c1aa 100644
--- a/src/components/ChatAutoComplete/ChatAutoComplete.tsx
+++ b/src/components/ChatAutoComplete/ChatAutoComplete.tsx
@@ -10,30 +10,38 @@ import { useComponentContext } from '../../context/ComponentContext';
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
 import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';
-import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type {
+  CustomTrigger,
+  DefaultStreamChatGenerics,
+  UnknownType,
+} from '../../types/types';
 import { EmojiSearchIndex, EmojiSearchIndexResult } from '../MessageInput';
 
 type ObjectUnion<T> = T[keyof T];
 
 export type SuggestionCommand<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = CommandResponse<StreamChatGenerics>;
 
 export type SuggestionUser<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = UserResponse<StreamChatGenerics>;
 
-export type SuggestionEmoji<T extends UnknownType = UnknownType> = EmojiSearchIndexResult & T;
+export type SuggestionEmoji<T extends UnknownType = UnknownType> =
+  EmojiSearchIndexResult & T;
 
 export type SuggestionItem<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  T extends UnknownType = UnknownType
-> = SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics> | SuggestionEmoji<T>;
+  T extends UnknownType = UnknownType,
+> =
+  | SuggestionUser<StreamChatGenerics>
+  | SuggestionCommand<StreamChatGenerics>
+  | SuggestionEmoji<T>;
 
 // FIXME: entity type is wrong, fix
 export type SuggestionItemProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  T extends UnknownType = UnknownType
+  T extends UnknownType = UnknownType,
 > = {
   className: string;
   component: React.ComponentType<{
@@ -59,41 +67,41 @@ export interface SuggestionHeaderProps {
 
 export type SuggestionListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
-> = ObjectUnion<
-  {
-    [key in keyof TriggerSettings<StreamChatGenerics, V>]: {
-      component: TriggerSettings<StreamChatGenerics, V>[key]['component'];
-      currentTrigger: string;
-      dropdownScroll: (element: HTMLDivElement) => void;
-      getSelectedItem:
-        | ((item: Parameters<TriggerSettings<StreamChatGenerics, V>[key]['output']>[0]) => void)
-        | null;
-      getTextToReplace: (
-        item: Parameters<TriggerSettings<StreamChatGenerics, V>[key]['output']>[0],
-      ) => {
-        caretPosition: 'start' | 'end' | 'next' | number;
-        text: string;
-        key?: string;
-      };
-      Header: React.ComponentType<SuggestionHeaderProps>;
-      onSelect: (newToken: {
-        caretPosition: 'start' | 'end' | 'next' | number;
-        text: string;
-      }) => void;
-      selectionEnd: number;
-      SuggestionItem: React.ComponentType<SuggestionItemProps>;
-      values: Parameters<
-        Parameters<TriggerSettings<StreamChatGenerics, V>[key]['dataProvider']>[2]
-      >[0];
-      className?: string;
-      itemClassName?: string;
-      itemStyle?: React.CSSProperties;
-      style?: React.CSSProperties;
-      value?: string;
+  V extends CustomTrigger = CustomTrigger,
+> = ObjectUnion<{
+  [key in keyof TriggerSettings<StreamChatGenerics, V>]: {
+    component: TriggerSettings<StreamChatGenerics, V>[key]['component'];
+    currentTrigger: string;
+    dropdownScroll: (element: HTMLDivElement) => void;
+    getSelectedItem:
+      | ((
+          item: Parameters<TriggerSettings<StreamChatGenerics, V>[key]['output']>[0],
+        ) => void)
+      | null;
+    getTextToReplace: (
+      item: Parameters<TriggerSettings<StreamChatGenerics, V>[key]['output']>[0],
+    ) => {
+      caretPosition: 'start' | 'end' | 'next' | number;
+      text: string;
+      key?: string;
     };
-  }
->;
+    Header: React.ComponentType<SuggestionHeaderProps>;
+    onSelect: (newToken: {
+      caretPosition: 'start' | 'end' | 'next' | number;
+      text: string;
+    }) => void;
+    selectionEnd: number;
+    SuggestionItem: React.ComponentType<SuggestionItemProps>;
+    values: Parameters<
+      Parameters<TriggerSettings<StreamChatGenerics, V>[key]['dataProvider']>[2]
+    >[0];
+    className?: string;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    value?: string;
+  };
+}>;
 
 export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
   /** Override the default disabled state of the underlying `textarea` component. */
@@ -120,7 +128,7 @@ export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
 
 const UnMemoizedChatAutoComplete = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: ChatAutoCompleteProps,
 ) => {
@@ -131,7 +139,12 @@ const UnMemoizedChatAutoComplete = <
   const { t } = useTranslationContext('ChatAutoComplete');
 
   const messageInput = useMessageInputContext<StreamChatGenerics, V>('ChatAutoComplete');
-  const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef } = messageInput;
+  const {
+    cooldownRemaining,
+    disabled,
+    emojiSearchIndex,
+    textareaRef: innerRef,
+  } = messageInput;
 
   const placeholder = props.placeholder || t('Type your message');
 
diff --git a/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js b/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js
index d5055a162..6d94894d3 100644
--- a/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js
+++ b/src/components/ChatAutoComplete/__tests__/ChatAutocomplete.test.js
@@ -52,7 +52,8 @@ const renderComponent = async (
   messageInputContextOverrides = {},
   activeChannel = channel,
 ) => {
-  const placeholderText = props.placeholder === null ? null : props.placeholder || 'placeholder';
+  const placeholderText =
+    props.placeholder === null ? null : props.placeholder || 'placeholder';
 
   const OverrideMessageInputContext = ({ children }) => {
     const currentContext = useMessageInputContext();
@@ -61,7 +62,9 @@ const renderComponent = async (
       ...messageInputContextOverrides,
     };
     return (
-      <MessageInputContextProvider value={withOverrides}>{children}</MessageInputContextProvider>
+      <MessageInputContextProvider value={withOverrides}>
+        {children}
+      </MessageInputContextProvider>
     );
   };
 
@@ -147,7 +150,10 @@ describe('ChatAutoComplete', () => {
   });
 
   it('should give preference to cooldown value over the prop disabled', async () => {
-    await renderComponent({ disabled: false, placeholder: null }, { cooldownRemaining: 10 });
+    await renderComponent(
+      { disabled: false, placeholder: null },
+      { cooldownRemaining: 10 },
+    );
     expect(screen.queryByPlaceholderText('Placeholder')).not.toBeInTheDocument();
     const textarea = screen.getByTestId('message-input');
     expect(textarea).toBeDisabled();
@@ -236,7 +242,6 @@ describe('ChatAutoComplete', () => {
     typeText(userAutocompleteText);
     const userText = await queryAllByText(user.name);
 
-    // eslint-disable-next-line jest-dom/prefer-in-document
     expect(userText).toHaveLength(0);
   });
 
diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx
index e04b1195d..014731c87 100644
--- a/src/components/ChatView/ChatView.tsx
+++ b/src/components/ChatView/ChatView.tsx
@@ -23,9 +23,8 @@ const ChatViewContext = createContext<ChatViewContextValue>({
 });
 
 export const ChatView = ({ children }: PropsWithChildren) => {
-  const [activeChatView, setActiveChatView] = useState<ChatViewContextValue['activeChatView']>(
-    'channels',
-  );
+  const [activeChatView, setActiveChatView] =
+    useState<ChatViewContextValue['activeChatView']>('channels');
 
   const { theme } = useChatContext();
 
@@ -60,9 +59,8 @@ export const useThreadsViewContext = () => useContext(ThreadsViewContext);
 
 const ThreadsView = ({ children }: PropsWithChildren) => {
   const { activeChatView } = useContext(ChatViewContext);
-  const [activeThread, setActiveThread] = useState<ThreadsViewContextValue['activeThread']>(
-    undefined,
-  );
+  const [activeThread, setActiveThread] =
+    useState<ThreadsViewContextValue['activeThread']>(undefined);
 
   const value = useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);
 
diff --git a/src/components/CommandItem/CommandItem.tsx b/src/components/CommandItem/CommandItem.tsx
index 9b53eb7ef..08ad4b07b 100644
--- a/src/components/CommandItem/CommandItem.tsx
+++ b/src/components/CommandItem/CommandItem.tsx
@@ -25,4 +25,6 @@ const UnMemoizedCommandItem = (props: PropsWithChildren<CommandItemProps>) => {
   );
 };
 
-export const CommandItem = React.memo(UnMemoizedCommandItem) as typeof UnMemoizedCommandItem;
+export const CommandItem = React.memo(
+  UnMemoizedCommandItem,
+) as typeof UnMemoizedCommandItem;
diff --git a/src/components/CommandItem/__tests__/CommandItem.test.js b/src/components/CommandItem/__tests__/CommandItem.test.js
index 41f8195a2..df962b738 100644
--- a/src/components/CommandItem/__tests__/CommandItem.test.js
+++ b/src/components/CommandItem/__tests__/CommandItem.test.js
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 
 import { CommandItem } from '../CommandItem';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('commandItem', () => {
   it('should render component with empty entity', () => {
diff --git a/src/components/DateSeparator/DateSeparator.tsx b/src/components/DateSeparator/DateSeparator.tsx
index f4bbb3a50..daf75a6cb 100644
--- a/src/components/DateSeparator/DateSeparator.tsx
+++ b/src/components/DateSeparator/DateSeparator.tsx
@@ -56,4 +56,6 @@ const UnMemoizedDateSeparator = (props: DateSeparatorProps) => {
 /**
  * A simple date separator between messages.
  */
-export const DateSeparator = React.memo(UnMemoizedDateSeparator) as typeof UnMemoizedDateSeparator;
+export const DateSeparator = React.memo(
+  UnMemoizedDateSeparator,
+) as typeof UnMemoizedDateSeparator;
diff --git a/src/components/DateSeparator/__tests__/DateSeparator.test.js b/src/components/DateSeparator/__tests__/DateSeparator.test.js
index 22926d7af..e5669b48b 100644
--- a/src/components/DateSeparator/__tests__/DateSeparator.test.js
+++ b/src/components/DateSeparator/__tests__/DateSeparator.test.js
@@ -12,7 +12,7 @@ import { Streami18n } from '../../../i18n';
 
 Dayjs.extend(calendar);
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 const DATE_SEPARATOR_TEST_ID = 'date-separator';
 const dateMock = 'the date';
@@ -106,7 +106,8 @@ describe('DateSeparator', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/DateSeparator': '{{ timestamp | timestampFormatter(calendar: false) }}',
+            'timestamp/DateSeparator':
+              '{{ timestamp | timestampFormatter(calendar: false) }}',
           },
         }),
       },
@@ -144,7 +145,8 @@ describe('DateSeparator', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/DateSeparator': '{{ timestamp | timestampFormatter(calendar: false) }}',
+            'timestamp/DateSeparator':
+              '{{ timestamp | timestampFormatter(calendar: false) }}',
           },
         }),
       },
diff --git a/src/components/Dialog/DialogManager.ts b/src/components/Dialog/DialogManager.ts
index caa14e7f3..5ec28036b 100644
--- a/src/components/Dialog/DialogManager.ts
+++ b/src/components/Dialog/DialogManager.ts
@@ -47,10 +47,13 @@ export class DialogManager {
   }
 
   get openDialogCount() {
-    return Object.values(this.state.getLatestValue().dialogsById).reduce((count, dialog) => {
-      if (dialog.isOpen) return count + 1;
-      return count;
-    }, 0);
+    return Object.values(this.state.getLatestValue().dialogsById).reduce(
+      (count, dialog) => {
+        if (dialog.isOpen) return count + 1;
+        return count;
+      },
+      0,
+    );
   }
 
   getOrCreate({ id }: GetOrCreateDialogParams) {
@@ -120,7 +123,9 @@ export class DialogManager {
   }
 
   closeAll() {
-    Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) => dialog.close());
+    Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) =>
+      dialog.close(),
+    );
   }
 
   toggle(params: GetOrCreateDialogParams, closeAll = false) {
diff --git a/src/components/Dialog/DialogMenu.tsx b/src/components/Dialog/DialogMenu.tsx
index 9fe04f998..33f7fcf09 100644
--- a/src/components/Dialog/DialogMenu.tsx
+++ b/src/components/Dialog/DialogMenu.tsx
@@ -3,7 +3,11 @@ import clsx from 'clsx';
 
 export type DialogMenuButtonProps = ComponentProps<'button'>;
 
-export const DialogMenuButton = ({ children, className, ...props }: DialogMenuButtonProps) => (
+export const DialogMenuButton = ({
+  children,
+  className,
+  ...props
+}: DialogMenuButtonProps) => (
   <button className={clsx('str-chat__dialog-menu__button', className)} {...props}>
     <div className='str-chat__dialog-menu__button-icon' />
     <div className='str-chat__dialog-menu__button-text'>{children}</div>
diff --git a/src/components/Dialog/FormDialog.tsx b/src/components/Dialog/FormDialog.tsx
index d9eacd9d3..9908b7301 100644
--- a/src/components/Dialog/FormDialog.tsx
+++ b/src/components/Dialog/FormDialog.tsx
@@ -36,7 +36,9 @@ type FormValue<F extends Record<FieldId, FieldConfig>> = {
 };
 
 export const FormDialog = <
-  F extends FormValue<Record<FieldId, FieldConfig>> = FormValue<Record<FieldId, FieldConfig>>
+  F extends FormValue<Record<FieldId, FieldConfig>> = FormValue<
+    Record<FieldId, FieldConfig>
+  >,
 >({
   className,
   close,
@@ -55,7 +57,9 @@ export const FormDialog = <
     return acc as F;
   });
 
-  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>>(
+  const handleChange = useCallback<
+    ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  >(
     (event) => {
       const fieldId = event.target.id;
       const fieldConfig = fields[fieldId];
@@ -113,7 +117,9 @@ export const FormDialog = <
             <div className='str-chat__dialog__field' key={`dialog-field-${id}`}>
               {fieldConfig.label && (
                 <label
-                  className={clsx(`str-chat__dialog__title str-chat__dialog__title--${id}`)}
+                  className={clsx(
+                    `str-chat__dialog__title str-chat__dialog__title--${id}`,
+                  )}
                   htmlFor={id}
                 >
                   {fieldConfig.label}
@@ -139,7 +145,9 @@ export const FormDialog = <
         </button>
         <button
           className='str-chat__dialog__controls-button str-chat__dialog__controls-button--submit'
-          disabled={Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value)}
+          disabled={
+            Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value)
+          }
           onClick={handleSubmit}
           type='submit'
         >
diff --git a/src/components/Dialog/PromptDialog.tsx b/src/components/Dialog/PromptDialog.tsx
index c916fb5a8..28ff54cf8 100644
--- a/src/components/Dialog/PromptDialog.tsx
+++ b/src/components/Dialog/PromptDialog.tsx
@@ -8,7 +8,12 @@ export type ConfirmationDialogProps = {
   title?: string;
 };
 
-export const PromptDialog = ({ actions, className, prompt, title }: ConfirmationDialogProps) => (
+export const PromptDialog = ({
+  actions,
+  className,
+  prompt,
+  title,
+}: ConfirmationDialogProps) => (
   <div className={clsx('str-chat__dialog str-chat__dialog--prompt', className)}>
     <div className='str-chat__dialog__body'>
       {title && <div className='str-chat__dialog__title'>{title}</div>}
diff --git a/src/components/Dialog/__tests__/DialogsManager.test.js b/src/components/Dialog/__tests__/DialogsManager.test.js
index 1c684abd1..98c658045 100644
--- a/src/components/Dialog/__tests__/DialogsManager.test.js
+++ b/src/components/Dialog/__tests__/DialogsManager.test.js
@@ -63,7 +63,9 @@ describe('DialogManager', () => {
     const dialogManager = new DialogManager();
     dialogManager.getOrCreate({ id: dialogId });
     dialogManager.open({ id: dialogId });
-    expect(dialogManager.state.getLatestValue().dialogsById[dialogId].isOpen).toBeTruthy();
+    expect(
+      dialogManager.state.getLatestValue().dialogsById[dialogId].isOpen,
+    ).toBeTruthy();
     expect(dialogManager.openDialogCount).toBe(1);
   });
 
@@ -84,7 +86,9 @@ describe('DialogManager', () => {
     const dialogs = dialogManager.state.getLatestValue().dialogsById;
     expect(dialogs.xxx.isOpen).toBeFalsy();
     expect(dialogs.yyy.isOpen).toBeFalsy();
-    expect(dialogManager.state.getLatestValue().dialogsById[dialogId].isOpen).toBeTruthy();
+    expect(
+      dialogManager.state.getLatestValue().dialogsById[dialogId].isOpen,
+    ).toBeTruthy();
     expect(dialogManager.openDialogCount).toBe(1);
   });
 
diff --git a/src/components/DragAndDrop/DragAndDropContainer.tsx b/src/components/DragAndDrop/DragAndDropContainer.tsx
index fda1cbd90..0c5bd5cfd 100644
--- a/src/components/DragAndDrop/DragAndDropContainer.tsx
+++ b/src/components/DragAndDrop/DragAndDropContainer.tsx
@@ -22,8 +22,8 @@ export const DragAndDropContainer = ({
     dragStartIndex === null || dragOverIndex === null
       ? undefined
       : dragStartIndex <= dragOverIndex
-      ? 'down'
-      : 'up';
+        ? 'down'
+        : 'up';
 
   const childrenArray = React.Children.toArray(children);
 
@@ -115,7 +115,10 @@ export const DragAndDropContainer = ({
   }, [container, onSetNewOrder]);
 
   return (
-    <div className={clsx('str-chat__drag-and-drop-container', className)} ref={setContainer}>
+    <div
+      className={clsx('str-chat__drag-and-drop-container', className)}
+      ref={setContainer}
+    >
       {order.map((originalIndex, currentIndex) => {
         const child = childrenArray[originalIndex];
         return (
@@ -127,7 +130,9 @@ export const DragAndDropContainer = ({
                 moveDirection === 'down' && dragOverIndex === currentIndex,
             })}
             draggable={draggable}
-            key={React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}`}
+            key={
+              React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}`
+            }
           >
             {child}
           </div>
diff --git a/src/components/EmoticonItem/EmoticonItem.tsx b/src/components/EmoticonItem/EmoticonItem.tsx
index 402202b54..82b7c4c21 100644
--- a/src/components/EmoticonItem/EmoticonItem.tsx
+++ b/src/components/EmoticonItem/EmoticonItem.tsx
@@ -45,4 +45,6 @@ const UnMemoizedEmoticonItem = (props: EmoticonItemProps) => {
   );
 };
 
-export const EmoticonItem = React.memo(UnMemoizedEmoticonItem) as typeof UnMemoizedEmoticonItem;
+export const EmoticonItem = React.memo(
+  UnMemoizedEmoticonItem,
+) as typeof UnMemoizedEmoticonItem;
diff --git a/src/components/EmoticonItem/__tests__/EmoticonItem.test.js b/src/components/EmoticonItem/__tests__/EmoticonItem.test.js
index 05e78d283..d6d185a77 100644
--- a/src/components/EmoticonItem/__tests__/EmoticonItem.test.js
+++ b/src/components/EmoticonItem/__tests__/EmoticonItem.test.js
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 
 import { EmoticonItem } from '../EmoticonItem';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('EmoticonItem', () => {
   it('should render component with empty entity', () => {
diff --git a/src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js b/src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js
index 89cd56236..431298745 100644
--- a/src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js
+++ b/src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('EmptyStateIndicator', () => {
   it('should render with default props', () => {
diff --git a/src/components/EventComponent/EventComponent.tsx b/src/components/EventComponent/EventComponent.tsx
index ce09b8e21..d5bcb88ad 100644
--- a/src/components/EventComponent/EventComponent.tsx
+++ b/src/components/EventComponent/EventComponent.tsx
@@ -10,7 +10,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { TimestampFormatterOptions } from '../../i18n/types';
 
 export type EventComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = TimestampFormatterOptions & {
   /** Message object */
   message: StreamMessage<StreamChatGenerics>;
@@ -22,11 +22,11 @@ export type EventComponentProps<
  * Component to display system and channel event messages
  */
 const UnMemoizedEventComponent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: EventComponentProps<StreamChatGenerics>,
 ) => {
-  const { calendar, calendarFormats, format, Avatar = DefaultAvatar, message } = props;
+  const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message } = props;
 
   const { t, tDateTimeParser } = useTranslationContext('EventComponent');
   const { created_at = '', event, text, type } = message;
@@ -65,7 +65,9 @@ const UnMemoizedEventComponent = <
       <div className='str-chat__event-component__channel-event'>
         <Avatar image={event.user?.image} name={name} user={event.user} />
         <div className='str-chat__event-component__channel-event__content'>
-          <em className='str-chat__event-component__channel-event__sentence'>{sentence}</em>
+          <em className='str-chat__event-component__channel-event__sentence'>
+            {sentence}
+          </em>
           <div className='str-chat__event-component__channel-event__date'>
             {getDateString({ ...getDateOptions, format: 'LT' })}
           </div>
diff --git a/src/components/EventComponent/__tests__/EventComponent.test.js b/src/components/EventComponent/__tests__/EventComponent.test.js
index 90a5f65e5..fa6b270d1 100644
--- a/src/components/EventComponent/__tests__/EventComponent.test.js
+++ b/src/components/EventComponent/__tests__/EventComponent.test.js
@@ -79,7 +79,9 @@ describe('EventComponent', () => {
   describe('timestamp formatting', () => {
     it('should format date with default formatting rules provided by i18n service', async () => {
       await renderComponent();
-      expect(screen.getByTestId(SYSTEM_MSG_TEST_ID)).toHaveTextContent('Friday 03/13/2020');
+      expect(screen.getByTestId(SYSTEM_MSG_TEST_ID)).toHaveTextContent(
+        'Friday 03/13/2020',
+      );
     });
 
     it('should format date with custom formatting rules provided by i18n service', async () => {
@@ -87,7 +89,8 @@ describe('EventComponent', () => {
         chatProps: {
           i18nInstance: new Streami18n({
             translationsForLanguage: {
-              'timestamp/SystemMessage': '{{ timestamp | timestampFormatter(format: "YYYY") }}',
+              'timestamp/SystemMessage':
+                '{{ timestamp | timestampFormatter(format: "YYYY") }}',
             },
           }),
         },
@@ -100,7 +103,8 @@ describe('EventComponent', () => {
         chatProps: {
           i18nInstance: new Streami18n({
             translationsForLanguage: {
-              'timestamp/SystemMessage': '{{ timestamp | timestampFormatter(calendar: true) }}',
+              'timestamp/SystemMessage':
+                '{{ timestamp | timestampFormatter(calendar: true) }}',
             },
           }),
         },
@@ -140,7 +144,8 @@ describe('EventComponent', () => {
         chatProps: {
           i18nInstance: new Streami18n({
             translationsForLanguage: {
-              'timestamp/SystemMessage': '{{ timestamp | timestampFormatter(calendar: false) }}',
+              'timestamp/SystemMessage':
+                '{{ timestamp | timestampFormatter(calendar: false) }}',
             },
           }),
         },
@@ -172,7 +177,9 @@ describe('EventComponent', () => {
           },
         },
       });
-      expect(screen.getByTestId(SYSTEM_MSG_TEST_ID)).toHaveTextContent('Friday 03/13/2020');
+      expect(screen.getByTestId(SYSTEM_MSG_TEST_ID)).toHaveTextContent(
+        'Friday 03/13/2020',
+      );
     });
   });
 
diff --git a/src/components/Form/SwitchField.tsx b/src/components/Form/SwitchField.tsx
index 3b6a6067a..ff2fdd21c 100644
--- a/src/components/Form/SwitchField.tsx
+++ b/src/components/Form/SwitchField.tsx
@@ -20,7 +20,9 @@ export const SwitchField = ({ children, ...props }: SwitchFieldProps) => {
   return (
     <div className='str-chat__form__field str-chat__form__switch-field'>
       <label>
-        <div className='str-chat__form__field str-chat__form__switch-field-content'>{children}</div>
+        <div className='str-chat__form__field str-chat__form__switch-field-content'>
+          {children}
+        </div>
         <input type='checkbox' {...props} ref={inputRef} />
         <div
           className={clsx('str-chat__form__switch-field__switch', {
@@ -42,6 +44,8 @@ export type SimpleSwitchFieldProps = ComponentProps<'input'> & {
 
 export const SimpleSwitchField = ({ labelText, ...props }: SimpleSwitchFieldProps) => (
   <SwitchField {...props}>
-    <div className='str-chat__form__field str-chat__form__switch-field__text'>{labelText}</div>
+    <div className='str-chat__form__field str-chat__form__switch-field__text'>
+      {labelText}
+    </div>
   </SwitchField>
 );
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 848a7d220..6bf0ff362 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -14,7 +14,7 @@ import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type GalleryProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   images: ((
     | {
@@ -27,7 +27,7 @@ export type GalleryProps<
 };
 
 const UnMemoizedGallery = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: GalleryProps<StreamChatGenerics>,
 ) => {
@@ -36,9 +36,8 @@ const UnMemoizedGallery = <
   const [index, setIndex] = useState(0);
   const [modalOpen, setModalOpen] = useState(false);
 
-  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext(
-    'Gallery',
-  );
+  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } =
+    useComponentContext('Gallery');
   const { t } = useTranslationContext('Gallery');
 
   const imageFallbackTitle = t('User uploaded content');
@@ -93,7 +92,9 @@ const UnMemoizedGallery = <
           alt={(image as Attachment<StreamChatGenerics>)?.fallback || imageFallbackTitle}
           src={sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url)}
           style={image.style}
-          title={(image as Attachment<StreamChatGenerics>)?.fallback || imageFallbackTitle}
+          title={
+            (image as Attachment<StreamChatGenerics>)?.fallback || imageFallbackTitle
+          }
           {...(innerRefs?.current && {
             ref: (r) => {
               innerRefs.current[i] = r;
diff --git a/src/components/Gallery/Image.tsx b/src/components/Gallery/Image.tsx
index d3d23f7fc..0713f6ccc 100644
--- a/src/components/Gallery/Image.tsx
+++ b/src/components/Gallery/Image.tsx
@@ -10,7 +10,7 @@ import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics, Dimensions } from '../../types/types';
 
 export type ImageProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   dimensions?: Dimensions;
   innerRef?: MutableRefObject<HTMLImageElement | null>;
@@ -32,16 +32,23 @@ export type ImageProps<
  * A simple component that displays an image.
  */
 export const ImageComponent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ImageProps<StreamChatGenerics>,
 ) => {
-  const { dimensions = {}, fallback, image_url, thumb_url, innerRef, previewUrl, style } = props;
+  const {
+    dimensions = {},
+    fallback,
+    image_url,
+    innerRef,
+    previewUrl,
+    style,
+    thumb_url,
+  } = props;
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
-  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext(
-    'ImageComponent',
-  );
+  const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } =
+    useComponentContext('ImageComponent');
 
   const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
 
diff --git a/src/components/Gallery/ModalGallery.tsx b/src/components/Gallery/ModalGallery.tsx
index 96812bf0d..924a9f443 100644
--- a/src/components/Gallery/ModalGallery.tsx
+++ b/src/components/Gallery/ModalGallery.tsx
@@ -7,7 +7,7 @@ import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ModalGalleryProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** The images for the Carousel component */
   images: Attachment<StreamChatGenerics>[];
@@ -22,11 +22,16 @@ const onError: React.ReactEventHandler<HTMLImageElement> = (e) => {
 };
 
 const renderItem = ({ original, originalAlt }: ReactImageGalleryItem) => (
-  <BaseImage alt={originalAlt} className='image-gallery-image' onError={onError} src={original} />
+  <BaseImage
+    alt={originalAlt}
+    className='image-gallery-image'
+    onError={onError}
+    src={original}
+  />
 );
 
 export const ModalGallery = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ModalGalleryProps<StreamChatGenerics>,
 ) => {
@@ -47,8 +52,7 @@ export const ModalGallery = <
   );
 
   return (
-    // ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
-    // @ts-expect-error
+    // @ts-expect-error ignore the TS error as react-image-gallery was on @types/react@18 while stream-chat-react being upgraded to React 19 (https://github.com/xiaolin/react-image-gallery/issues/809)
     <ImageGallery
       items={formattedArray}
       renderItem={renderItem}
diff --git a/src/components/Gallery/__tests__/Gallery.test.js b/src/components/Gallery/__tests__/Gallery.test.js
index 57cd66439..2e70659ad 100644
--- a/src/components/Gallery/__tests__/Gallery.test.js
+++ b/src/components/Gallery/__tests__/Gallery.test.js
@@ -161,7 +161,9 @@ describe('Gallery', () => {
       channels: [channel],
       client,
     } = await initClientWithChannels();
-    const CustomBaseImage = (props) => <img {...props} data-testid={'custom-base-image'} />;
+    const CustomBaseImage = (props) => (
+      <img {...props} data-testid={'custom-base-image'} />
+    );
     const images = Array.from({ length: 2 }, (_, i) => ({
       fallback: `fallback-${i}`,
       image_url: `image_url-${i}`,
diff --git a/src/components/Gallery/__tests__/Image.test.js b/src/components/Gallery/__tests__/Image.test.js
index 2964a7fb7..4f0421c4b 100644
--- a/src/components/Gallery/__tests__/Image.test.js
+++ b/src/components/Gallery/__tests__/Image.test.js
@@ -95,14 +95,20 @@ describe('Image', () => {
       channels: [channel],
       client,
     } = await initClientWithChannels();
-    const CustomBaseImage = (props) => <img {...props} data-testid={'custom-base-image'} />;
+    const CustomBaseImage = (props) => (
+      <img {...props} data-testid={'custom-base-image'} />
+    );
     let result;
     await act(() => {
       result = render(
         <Chat client={client}>
           <ActiveChannelSetter activeChannel={channel} />
           <Channel BaseImage={CustomBaseImage}>
-            <ImageComponent fallback='fallback' image_url='image_url' thumb_url='thumb_url' />
+            <ImageComponent
+              fallback='fallback'
+              image_url='image_url'
+              thumb_url='thumb_url'
+            />
           </Channel>
           ,
         </Chat>,
diff --git a/src/components/Gallery/__tests__/ModalGallery.test.js b/src/components/Gallery/__tests__/ModalGallery.test.js
index e3e97dd64..3d20a9d61 100644
--- a/src/components/Gallery/__tests__/ModalGallery.test.js
+++ b/src/components/Gallery/__tests__/ModalGallery.test.js
@@ -22,7 +22,9 @@ const renderComponent = (props = {}) =>
 describe('ModalGallery', () => {
   it('uses BaseImage component to display images', () => {
     const { container } = renderComponent({ images });
-    expect(container.querySelectorAll('.str-chat__base-image')).toHaveLength(images.length);
+    expect(container.querySelectorAll('.str-chat__base-image')).toHaveLength(
+      images.length,
+    );
   });
   it('displays image fallback on error', () => {
     const { container } = renderComponent({ images });
diff --git a/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx b/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
index da5f82623..30bdd1e93 100644
--- a/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
+++ b/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
@@ -97,7 +97,8 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const parentElement = element.parentElement!;
 
-    const offset = element.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
+    const offset =
+      element.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
     const reverseOffset = parentElement.scrollTop;
 
     if (listenToScroll) {
@@ -105,7 +106,10 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
     }
 
     if (isLoading) return;
-    if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+    if (
+      previousOffset.current === offset &&
+      previousReverseOffset.current === reverseOffset
+    )
       return;
     previousOffset.current = offset;
     previousReverseOffset.current = reverseOffset;
@@ -119,7 +123,11 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
       loadPreviousPageFn();
     }
 
-    if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
+    if (
+      offset < Number(threshold) &&
+      typeof loadNextPageFn === 'function' &&
+      hasNextPageFlag
+    ) {
       loadNextPageFn();
     }
   };
diff --git a/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx b/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
index b26b7168a..b91465c26 100644
--- a/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
+++ b/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
@@ -14,7 +14,11 @@ const mousewheelListener = (event: Event) => {
 };
 
 export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
-  listenToScroll?: (distanceFromBottom: number, distanceFromTop: number, threshold: number) => void;
+  listenToScroll?: (
+    distanceFromBottom: number,
+    distanceFromTop: number,
+    threshold: number,
+  ) => void;
   loadNextOnScrollToBottom?: () => void;
   loadNextOnScrollToTop?: () => void;
   /** Offset from when to start the loadNextPage call */
@@ -22,15 +26,17 @@ export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
   useCapture?: boolean;
 };
 
-export const InfiniteScrollPaginator = (props: PropsWithChildren<InfiniteScrollPaginatorProps>) => {
+export const InfiniteScrollPaginator = (
+  props: PropsWithChildren<InfiniteScrollPaginatorProps>,
+) => {
   const {
     children,
+    className,
     listenToScroll,
     loadNextOnScrollToBottom,
     loadNextOnScrollToTop,
     threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,
     useCapture = false,
-    className,
     ...componentProps
   } = props;
 
@@ -46,7 +52,8 @@ export const InfiniteScrollPaginator = (props: PropsWithChildren<InfiniteScrollP
           return;
         }
 
-        const distanceFromBottom = child.scrollHeight - root.scrollTop - root.clientHeight;
+        const distanceFromBottom =
+          child.scrollHeight - root.scrollTop - root.clientHeight;
         const distanceFromTop = root.scrollTop;
 
         if (listenToScroll) {
diff --git a/src/components/InfiniteScrollPaginator/__tests__/InfiniteScroll.test.js b/src/components/InfiniteScrollPaginator/__tests__/InfiniteScroll.test.js
index 8df5fd369..0586b21d6 100644
--- a/src/components/InfiniteScrollPaginator/__tests__/InfiniteScroll.test.js
+++ b/src/components/InfiniteScrollPaginator/__tests__/InfiniteScroll.test.js
@@ -14,7 +14,10 @@ describe('InfiniteScroll', () => {
   // not sure if there is a more 'narrow' way of capturing event listeners being added
   const divAddEventListenerSpy = jest.spyOn(HTMLDivElement.prototype, 'addEventListener');
 
-  const divRemoveEventListenerSpy = jest.spyOn(HTMLDivElement.prototype, 'addEventListener');
+  const divRemoveEventListenerSpy = jest.spyOn(
+    HTMLDivElement.prototype,
+    'addEventListener',
+  );
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -40,11 +43,19 @@ describe('InfiniteScroll', () => {
 
       const addEventListenerSpy = divAddEventListenerSpy;
 
-      expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function), useCapture);
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'scroll',
+        expect.any(Function),
+        useCapture,
+      );
       expect(addEventListenerSpy).toHaveBeenCalledWith('wheel', expect.any(Function), {
         passive: false,
       });
-      expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function), useCapture);
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'resize',
+        expect.any(Function),
+        useCapture,
+      );
     },
   );
 
@@ -104,7 +115,7 @@ describe('InfiniteScroll', () => {
       consoleWarnSpy.mockRestore();
 
       expect(oldLoaderSpy).not.toHaveBeenCalled();
-      // eslint-disable-next-line jest/prefer-called-with
+
       expect(newLoaderSpy).toHaveBeenCalled();
     },
   );
diff --git a/src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts b/src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts
index 68c1b4d63..6a2ec94bd 100644
--- a/src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts
+++ b/src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts
@@ -15,7 +15,10 @@ export type CursorPaginatorStateStore<T> = StateStore<CursorPaginatorState<T>>;
 
 export type PaginationFn<T> = (next?: string) => Promise<{ items: T[]; next?: string }>;
 
-export const useCursorPaginator = <T>(paginationFn: PaginationFn<T>, loadFirstPage?: boolean) => {
+export const useCursorPaginator = <T>(
+  paginationFn: PaginationFn<T>,
+  loadFirstPage?: boolean,
+) => {
   const cursorPaginatorState = useMemo(
     () =>
       new StateStore<CursorPaginatorState<T>>({
diff --git a/src/components/LoadMore/LoadMorePaginator.tsx b/src/components/LoadMore/LoadMorePaginator.tsx
index c789fa984..ec4349c89 100644
--- a/src/components/LoadMore/LoadMorePaginator.tsx
+++ b/src/components/LoadMore/LoadMorePaginator.tsx
@@ -1,6 +1,9 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 
-import { LoadMoreButton as DefaultLoadMoreButton, LoadMoreButtonProps } from './LoadMoreButton';
+import {
+  LoadMoreButton as DefaultLoadMoreButton,
+  LoadMoreButtonProps,
+} from './LoadMoreButton';
 import type { PaginatorProps } from '../../types/types';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 
@@ -11,7 +14,9 @@ export type LoadMorePaginatorProps = PaginatorProps & {
   reverse?: boolean;
 };
 
-export const UnMemoizedLoadMorePaginator = (props: PropsWithChildren<LoadMorePaginatorProps>) => {
+export const UnMemoizedLoadMorePaginator = (
+  props: PropsWithChildren<LoadMorePaginatorProps>,
+) => {
   const {
     children,
     hasNextPage,
@@ -24,7 +29,10 @@ export const UnMemoizedLoadMorePaginator = (props: PropsWithChildren<LoadMorePag
   const loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
 
   useEffect(() => {
-    deprecationAndReplacementWarning([[{ refreshing }, { isLoading }]], 'LoadMorePaginator');
+    deprecationAndReplacementWarning(
+      [[{ refreshing }, { isLoading }]],
+      'LoadMorePaginator',
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/src/components/LoadMore/__tests__/LoadMoreButton.test.js b/src/components/LoadMore/__tests__/LoadMoreButton.test.js
index a08494711..df0029b6e 100644
--- a/src/components/LoadMore/__tests__/LoadMoreButton.test.js
+++ b/src/components/LoadMore/__tests__/LoadMoreButton.test.js
@@ -34,7 +34,9 @@ describe('LoadMoreButton', () => {
 
   it('should trigger onClick function when clicked', () => {
     const onClickMock = jest.fn();
-    const { getByTestId } = render(<LoadMoreButton isLoading={false} onClick={onClickMock} />);
+    const { getByTestId } = render(
+      <LoadMoreButton isLoading={false} onClick={onClickMock} />,
+    );
 
     fireEvent.click(getByTestId('load-more-button'));
 
@@ -43,7 +45,9 @@ describe('LoadMoreButton', () => {
 
   it('should be disabled and show loading indicator when refreshing is true', () => {
     const onClickMock = jest.fn();
-    const { getByTestId } = render(<LoadMoreButton isLoading={true} onClick={onClickMock} />);
+    const { getByTestId } = render(
+      <LoadMoreButton isLoading={true} onClick={onClickMock} />,
+    );
     fireEvent.click(getByTestId('load-more-button'));
     expect(onClickMock).not.toHaveBeenCalledTimes(1);
     const loadingIndicator = getByTestId('load-more-button').querySelector(
diff --git a/src/components/Loading/LoadingErrorIndicator.tsx b/src/components/Loading/LoadingErrorIndicator.tsx
index fc0b635bb..887601c1b 100644
--- a/src/components/Loading/LoadingErrorIndicator.tsx
+++ b/src/components/Loading/LoadingErrorIndicator.tsx
@@ -16,9 +16,7 @@ const UnMemoizedLoadingErrorIndicator = ({ error }: LoadingErrorIndicatorProps)
   if (!error) return null;
 
   return (
-    <div>
-      {t<string>('Error: {{ errorMessage }}', { errorMessage: error.message })}
-    </div>
+    <div>{t<string>('Error: {{ errorMessage }}', { errorMessage: error.message })}</div>
   );
 };
 
diff --git a/src/components/Loading/LoadingIndicator.tsx b/src/components/Loading/LoadingIndicator.tsx
index 73b2314dc..92c9f85ce 100644
--- a/src/components/Loading/LoadingIndicator.tsx
+++ b/src/components/Loading/LoadingIndicator.tsx
@@ -17,7 +17,12 @@ const UnMemoizedLoadingIndicator = (props: LoadingIndicatorProps) => {
       data-testid='loading-indicator-wrapper'
       style={{ height: size, width: size }}
     >
-      <svg height={size} viewBox={`0 0 30 30`} width={size} xmlns='http://www.w3.org/2000/svg'>
+      <svg
+        height={size}
+        viewBox={`0 0 30 30`}
+        width={size}
+        xmlns='http://www.w3.org/2000/svg'
+      >
         <defs>
           <linearGradient id='a' x1='50%' x2='50%' y1='0%' y2='100%'>
             <stop offset='0%' stopColor='#FFF' stopOpacity='0' />
diff --git a/src/components/Loading/__tests__/LoadingChannels.test.js b/src/components/Loading/__tests__/LoadingChannels.test.js
index 08d2499e6..423c85fe4 100644
--- a/src/components/Loading/__tests__/LoadingChannels.test.js
+++ b/src/components/Loading/__tests__/LoadingChannels.test.js
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 
 import { LoadingChannels } from '../LoadingChannels';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('LoadingChannels', () => {
   it('should render component with default props', () => {
diff --git a/src/components/Loading/__tests__/LoadingErrorIndicator.test.js b/src/components/Loading/__tests__/LoadingErrorIndicator.test.js
index 450cc0c66..b5ca2f949 100644
--- a/src/components/Loading/__tests__/LoadingErrorIndicator.test.js
+++ b/src/components/Loading/__tests__/LoadingErrorIndicator.test.js
@@ -9,7 +9,7 @@ import { Chat } from '../../Chat';
 
 import { getTestClientWithUser } from '../../../mock-builders';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('LoadingErrorIndicator', () => {
   it('should return null if no error is provided', () => {
@@ -18,7 +18,9 @@ describe('LoadingErrorIndicator', () => {
   });
 
   it('should render when an error is passed', () => {
-    const { container } = render(<LoadingErrorIndicator error={{ message: 'this is an error' }} />);
+    const { container } = render(
+      <LoadingErrorIndicator error={{ message: 'this is an error' }} />,
+    );
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div>
diff --git a/src/components/Loading/__tests__/LoadingIndicator.test.js b/src/components/Loading/__tests__/LoadingIndicator.test.js
index c92caedc2..7f8571396 100644
--- a/src/components/Loading/__tests__/LoadingIndicator.test.js
+++ b/src/components/Loading/__tests__/LoadingIndicator.test.js
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 
 import { LoadingIndicator } from '../LoadingIndicator';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('LoadingIndicator', () => {
   it('should render with default props', () => {
diff --git a/src/components/MML/__tests__/MML.test.js b/src/components/MML/__tests__/MML.test.js
index 4ad8e88c5..60fdf4475 100644
--- a/src/components/MML/__tests__/MML.test.js
+++ b/src/components/MML/__tests__/MML.test.js
@@ -7,7 +7,7 @@ import { MML } from '../MML';
 import { ChatProvider } from '../../../context/ChatContext';
 import { MessageProvider } from '../../../context/MessageContext';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 const renderComponent = async ({ chatCtx = {}, messageCtx = {}, mmlProps }) => {
   let result;
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
index 776b78744..662696159 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
@@ -16,7 +16,8 @@ const AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }: WaveformProps) =>
 
   useEffect(() => {
     if (!recorder?.amplitudeRecorder) return;
-    const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
+    const amplitudesSubscription =
+      recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
     return () => {
       amplitudesSubscription.unsubscribe();
     };
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
index e131fccd5..47912e1e1 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
@@ -16,10 +16,11 @@ export const AudioRecordingPreview = ({
   waveformData,
   ...props
 }: AudioRecordingPlayerProps) => {
-  const { audioRef, isPlaying, progress, secondsElapsed, seek, togglePlay } = useAudioController({
-    durationSeconds,
-    mimeType,
-  });
+  const { audioRef, isPlaying, progress, secondsElapsed, seek, togglePlay } =
+    useAudioController({
+      durationSeconds,
+      mimeType,
+    });
 
   const displayedDuration = secondsElapsed || durationSeconds;
 
@@ -37,7 +38,11 @@ export const AudioRecordingPreview = ({
       </button>
       <RecordingTimer durationSeconds={displayedDuration} />
       <div className='str-chat__wave-progress-bar__track-container'>
-        <WaveProgressBar progress={progress} seek={seek} waveformData={waveformData || []} />
+        <WaveProgressBar
+          progress={progress}
+          seek={seek}
+          waveformData={waveformData || []}
+        />
       </div>
     </React.Fragment>
   );
diff --git a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js
index 1b60412cc..0bfb0c7d3 100644
--- a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js
+++ b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js
@@ -59,7 +59,9 @@ const DEFAULT_RENDER_PARAMS = {
 
 window.ResizeObserver = ResizeObserverMock;
 
-jest.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 120 });
+jest
+  .spyOn(HTMLDivElement.prototype, 'getBoundingClientRect')
+  .mockReturnValue({ width: 120 });
 
 const renderComponent = async ({
   channelActionCtx,
@@ -80,12 +82,18 @@ const renderComponent = async ({
           ...{ client, ...DEFAULT_RENDER_PARAMS.chatCtx, ...chatCtx },
         }}
       >
-        <ComponentProvider value={{ ...DEFAULT_RENDER_PARAMS.componentCtx, ...componentCtx }}>
+        <ComponentProvider
+          value={{ ...DEFAULT_RENDER_PARAMS.componentCtx, ...componentCtx }}
+        >
           <ChannelActionProvider
             value={{ ...DEFAULT_RENDER_PARAMS.channelActionCtx, ...channelActionCtx }}
           >
             <ChannelStateProvider
-              value={{ channel, ...DEFAULT_RENDER_PARAMS.channelStateCtx, ...channelStateCtx }}
+              value={{
+                channel,
+                ...DEFAULT_RENDER_PARAMS.channelStateCtx,
+                ...channelStateCtx,
+              }}
             >
               <MessageInput {...{ audioRecordingEnabled: true, ...props }} />
             </ChannelStateProvider>
@@ -116,13 +124,10 @@ window.navigator.permissions = {
   query: jest.fn(),
 };
 
-// eslint-disable-next-line
 window.MediaRecorder = MediaRecorderMock;
 
-// eslint-disable-next-line
 window.AudioContext = AudioContextMock;
 
-// eslint-disable-next-line
 window.AnalyserNode = AnalyserNodeMock;
 
 const fileObjectURL = 'fileObjectURL';
@@ -141,13 +146,17 @@ describe('MessageInput', () => {
 
   it('does not render start recording button if disabled', async () => {
     await renderComponent({ props: { audioRecordingEnabled: false } });
-    expect(screen.queryByTestId(START_RECORDING_AUDIO_BUTTON_TEST_ID)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(START_RECORDING_AUDIO_BUTTON_TEST_ID),
+    ).not.toBeInTheDocument();
   });
 
   it('does not render start recording button if navigator.mediaDevices is undefined', async () => {
     window.navigator.mediaDevices = undefined;
     await renderComponent();
-    expect(screen.queryByTestId(START_RECORDING_AUDIO_BUTTON_TEST_ID)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(START_RECORDING_AUDIO_BUTTON_TEST_ID),
+    ).not.toBeInTheDocument();
   });
 
   it('renders start recording button when enabled and message input is empty', async () => {
@@ -201,7 +210,11 @@ describe('MessageInput', () => {
     expect(screen.queryByTestId(AUDIO_RECORDER_TEST_ID)).toBeInTheDocument();
   });
 
-  it.each([MediaRecordingState.PAUSED, MediaRecordingState.RECORDING, MediaRecordingState.STOPPED])(
+  it.each([
+    MediaRecordingState.PAUSED,
+    MediaRecordingState.RECORDING,
+    MediaRecordingState.STOPPED,
+  ])(
     'renders message composer when recording cancelled while recording in state %s',
     async (state) => {
       const { container } = await renderComponent();
@@ -374,7 +387,9 @@ const renderAudioRecorder = (controller = {}) =>
   render(
     <ChannelActionProvider value={{}}>
       <MessageInputContextProvider
-        value={{ recordingController: { ...DEFAULT_RECORDING_CONTROLLER, ...controller } }}
+        value={{
+          recordingController: { ...DEFAULT_RECORDING_CONTROLLER, ...controller },
+        }}
       >
         <AudioRecorder />
       </MessageInputContextProvider>
@@ -426,7 +441,9 @@ describe('AudioRecorder', () => {
 
   it('renders loading indicators while recording being uploaded', async () => {
     await renderAudioRecorder({
-      recording: generateVoiceRecordingAttachment({ localMetadata: { uploadState: 'uploading' } }),
+      recording: generateVoiceRecordingAttachment({
+        localMetadata: { uploadState: 'uploading' },
+      }),
       recordingState: MediaRecordingState.STOPPED,
     });
     expect(screen.queryByTestId('loading-indicator')).toBeInTheDocument();
diff --git a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.js b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.js
index 66c618ec6..3f899b813 100644
--- a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.js
+++ b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.js
@@ -9,7 +9,8 @@ const PLAY_ICON_TEST_ID = 'str-chat__play-icon';
 const PAUSE_ICON_TEST_ID = 'str-chat__pause-icon';
 const WAVE_PROGRESS_BAR_TEST_ID = 'wave-progress-bar-track';
 const TIMER_CLASS_SELECTOR = '.str-chat__recording-timer';
-const WAVE_PROGRESS_BAR_INDICATOR_SELECTOR = '.str-chat__wave-progress-bar__progress-indicator';
+const WAVE_PROGRESS_BAR_INDICATOR_SELECTOR =
+  '.str-chat__wave-progress-bar__progress-indicator';
 
 const togglePlay = async () => {
   await act(async () => {
diff --git a/src/components/MediaRecorder/classes/AmplitudeRecorder.ts b/src/components/MediaRecorder/classes/AmplitudeRecorder.ts
index 181cacddf..db9da5b4b 100644
--- a/src/components/MediaRecorder/classes/AmplitudeRecorder.ts
+++ b/src/components/MediaRecorder/classes/AmplitudeRecorder.ts
@@ -28,7 +28,10 @@ const rootMeanSquare = (values: Uint8Array) =>
  * where 0 dB is the loudest possible sound, -10 dB is a 10th of that, etc.
  * The default value is -100 dB.
  */
-export type AmplitudeAnalyserConfig = Pick<AnalyserNode, 'fftSize' | 'maxDecibels' | 'minDecibels'>;
+export type AmplitudeAnalyserConfig = Pick<
+  AnalyserNode,
+  'fftSize' | 'maxDecibels' | 'minDecibels'
+>;
 export type AmplitudeRecorderConfig = {
   analyserConfig: AmplitudeAnalyserConfig;
   sampleCount: number;
@@ -96,7 +99,9 @@ export class AmplitudeRecorder {
   start = () => {
     if (this.state.value === AmplitudeRecorderState.CLOSED) return;
     if (!this.stream) {
-      throw new Error('Missing MediaStream instance. Cannot to start amplitude recording');
+      throw new Error(
+        'Missing MediaStream instance. Cannot to start amplitude recording',
+      );
     }
 
     if (this.state.value === AmplitudeRecorderState.RECORDING) this.stop();
@@ -109,7 +114,8 @@ export class AmplitudeRecorder {
     this.state.next(AmplitudeRecorderState.RECORDING);
 
     this.amplitudeSamplingInterval = setInterval(() => {
-      if (!(this.analyserNode && this.state.value === AmplitudeRecorderState.RECORDING)) return;
+      if (!(this.analyserNode && this.state.value === AmplitudeRecorderState.RECORDING))
+        return;
       const frequencyBins = new Uint8Array(this.analyserNode.frequencyBinCount);
       try {
         this.analyserNode.getByteFrequencyData(frequencyBins);
@@ -118,7 +124,8 @@ export class AmplitudeRecorder {
         this.error.next(e as Error);
         return;
       }
-      const normalizedSignalStrength = rootMeanSquare(frequencyBins) / MAX_FREQUENCY_AMPLITUDE;
+      const normalizedSignalStrength =
+        rootMeanSquare(frequencyBins) / MAX_FREQUENCY_AMPLITUDE;
       this.amplitudes.next([...this.amplitudes.value, normalizedSignalStrength]);
     }, this.config.samplingFrequencyMs);
   };
diff --git a/src/components/MediaRecorder/classes/BrowserPermission.ts b/src/components/MediaRecorder/classes/BrowserPermission.ts
index 749c2c117..0ecb702ae 100644
--- a/src/components/MediaRecorder/classes/BrowserPermission.ts
+++ b/src/components/MediaRecorder/classes/BrowserPermission.ts
@@ -42,7 +42,7 @@ export class BrowserPermission {
 
     const status = this.status.value;
     const handlePermissionChange = (e: Event) => {
-      const { state } = ((e as unknown) as ChangeEvent<PermissionStatus>).target;
+      const { state } = (e as unknown as ChangeEvent<PermissionStatus>).target;
       this.state.next(state);
     };
     status.addEventListener('change', handlePermissionChange);
@@ -67,7 +67,7 @@ export class BrowserPermission {
     let permissionState: PermissionState;
     try {
       const permissionStatus = await navigator.permissions.query({
-        name: (this.name as unknown) as PermissionName,
+        name: this.name as unknown as PermissionName,
       });
       permissionState = permissionStatus.state;
       this.status.next(permissionStatus);
diff --git a/src/components/MediaRecorder/classes/MediaRecorderController.ts b/src/components/MediaRecorder/classes/MediaRecorderController.ts
index 13533c52a..7b7c804db 100644
--- a/src/components/MediaRecorder/classes/MediaRecorderController.ts
+++ b/src/components/MediaRecorder/classes/MediaRecorderController.ts
@@ -80,7 +80,7 @@ export enum RecordingAttachmentType {
 }
 
 export class MediaRecorderController<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > {
   permission: BrowserPermission;
   mediaRecorder: MediaRecorder | undefined;
@@ -101,9 +101,9 @@ export class MediaRecorderController<
     | undefined;
 
   recordingState = new BehaviorSubject<MediaRecordingState | undefined>(undefined);
-  recording = new BehaviorSubject<LocalVoiceRecordingAttachment<StreamChatGenerics> | undefined>(
-    undefined,
-  );
+  recording = new BehaviorSubject<
+    LocalVoiceRecordingAttachment<StreamChatGenerics> | undefined
+  >(undefined);
   error = new Subject<Error | undefined>();
   notification = new Subject<{ text: string; type: 'success' | 'error' } | undefined>();
 
@@ -243,7 +243,10 @@ export class MediaRecorderController<
     this.amplitudeRecorder?.close();
     if (this.mediaRecorder) {
       disposeOfMediaStream(this.mediaRecorder.stream);
-      this.mediaRecorder.removeEventListener('dataavailable', this.handleDataavailableEvent);
+      this.mediaRecorder.removeEventListener(
+        'dataavailable',
+        this.handleDataavailableEvent,
+      );
       this.mediaRecorder.removeEventListener('error', this.handleErrorEvent);
     }
   };
@@ -349,9 +352,11 @@ export class MediaRecorderController<
       this.recordedChunkDurations.push(new Date().getTime() - this.startTime);
       this.startTime = undefined;
     }
-    const result = new Promise<LocalVoiceRecordingAttachment<StreamChatGenerics>>((res) => {
-      this.signalRecordingReady = res;
-    });
+    const result = new Promise<LocalVoiceRecordingAttachment<StreamChatGenerics>>(
+      (res) => {
+        this.signalRecordingReady = res;
+      },
+    );
     this.mediaRecorder?.stop();
     this.amplitudeRecorder?.stop();
     this.recordingState.next(MediaRecordingState.STOPPED);
diff --git a/src/components/MediaRecorder/classes/__tests__/AmplitudeRecorder.test.js b/src/components/MediaRecorder/classes/__tests__/AmplitudeRecorder.test.js
index 1cef13a0d..65f9fa34e 100644
--- a/src/components/MediaRecorder/classes/__tests__/AmplitudeRecorder.test.js
+++ b/src/components/MediaRecorder/classes/__tests__/AmplitudeRecorder.test.js
@@ -5,7 +5,6 @@ import {
 } from '../AmplitudeRecorder';
 import { AudioContextMock } from '../../../../mock-builders/browser';
 
-// eslint-disable-next-line
 window.AudioContext = AudioContextMock;
 
 const intervalID = 1;
@@ -14,7 +13,9 @@ jest.spyOn(window, 'setInterval').mockReturnValue(intervalID);
 describe('AmplitudeRecorder', () => {
   it('is initiated with defaults', () => {
     const ar = new AmplitudeRecorder({ stream: {} });
-    expect(ar.config).toStrictEqual(expect.objectContaining(DEFAULT_AMPLITUDE_RECORDER_CONFIG));
+    expect(ar.config).toStrictEqual(
+      expect.objectContaining(DEFAULT_AMPLITUDE_RECORDER_CONFIG),
+    );
   });
   it('is initiated with custom config', () => {
     const customConfig = {
@@ -35,7 +36,9 @@ describe('AmplitudeRecorder', () => {
 
     let ar = new AmplitudeRecorder({ config: customConfig });
     expect(ar.config).toStrictEqual(expect.objectContaining(customConfig));
-    ar = new AmplitudeRecorder({ config: { analyserConfig: customConfig.analyserConfig } });
+    ar = new AmplitudeRecorder({
+      config: { analyserConfig: customConfig.analyserConfig },
+    });
     expect(ar.config).toStrictEqual(expect.objectContaining(mixedConfig));
   });
 
@@ -43,7 +46,9 @@ describe('AmplitudeRecorder', () => {
     it('throws error if MediaStream is not available', () => {
       const ar = new AmplitudeRecorder({ stream: {} });
       ar.stream = undefined;
-      expect(ar.start).toThrow('Missing MediaStream instance. Cannot to start amplitude recording');
+      expect(ar.start).toThrow(
+        'Missing MediaStream instance. Cannot to start amplitude recording',
+      );
     });
 
     it('initiates the recorder state', () => {
diff --git a/src/components/MediaRecorder/classes/__tests__/MediaRecorderController.test.js b/src/components/MediaRecorder/classes/__tests__/MediaRecorderController.test.js
index ce89e1593..7d20432ac 100644
--- a/src/components/MediaRecorder/classes/__tests__/MediaRecorderController.test.js
+++ b/src/components/MediaRecorder/classes/__tests__/MediaRecorderController.test.js
@@ -8,7 +8,10 @@ import {
   MediaRecordingState,
   RecordingAttachmentType,
 } from '../MediaRecorderController';
-import { AmplitudeRecorderState, DEFAULT_AMPLITUDE_RECORDER_CONFIG } from '../AmplitudeRecorder';
+import {
+  AmplitudeRecorderState,
+  DEFAULT_AMPLITUDE_RECORDER_CONFIG,
+} from '../AmplitudeRecorder';
 import { defaultTranslatorFunction } from '../../../../i18n';
 import * as audioSampling from '../../../Attachment/audioSampling';
 import * as reactFileUtils from '../../../ReactFileUtilities/utils';
@@ -30,7 +33,9 @@ jest
   .spyOn(wavTranscoder, 'encodeToWaw')
   .mockImplementation((file) => Promise.resolve(new Blob([file], { type: 'audio/wav' })));
 
-const mp3EncoderMock = jest.fn((file) => Promise.resolve(new Blob([file], { type: 'audio/mp3' })));
+const mp3EncoderMock = jest.fn((file) =>
+  Promise.resolve(new Blob([file], { type: 'audio/mp3' })),
+);
 
 jest.mock('fix-webm-duration', () => jest.fn((blob) => blob));
 
@@ -41,7 +46,12 @@ const createFileFromBlobsSpy = jest
   .mockReturnValue(fileMock);
 
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-const expectRegistersError = async ({ action, controller, errorMsg, notificationMsg }) => {
+const expectRegistersError = async ({
+  action,
+  controller,
+  errorMsg,
+  notificationMsg,
+}) => {
   let error, notification;
   const errorSubscription = controller.error.subscribe((e) => {
     error = e;
@@ -65,10 +75,8 @@ const expectRegistersError = async ({ action, controller, errorMsg, notification
   notificationSubscription?.unsubscribe();
 };
 
-// eslint-disable-next-line
 window.MediaRecorder = MediaRecorderMock;
 
-// eslint-disable-next-line
 window.AudioContext = AudioContextMock;
 
 // eslint-disable-next-line
@@ -157,12 +165,16 @@ describe('MediaRecorderController', () => {
 
   it('generates a default recording audio title', () => {
     const controller = new MediaRecorderController();
-    expect(controller.generateRecordingTitle('audio/webm')).toMatch(/audio_recording_.+\.webm/);
+    expect(controller.generateRecordingTitle('audio/webm')).toMatch(
+      /audio_recording_.+\.webm/,
+    );
   });
 
   it('generates a custom recording audio title', () => {
     const title = 'Test title';
-    const controller = new MediaRecorderController({ generateRecordingTitle: () => title });
+    const controller = new MediaRecorderController({
+      generateRecordingTitle: () => title,
+    });
     expect(controller.generateRecordingTitle('audio/webm')).toBe(title);
   });
 
@@ -170,7 +182,9 @@ describe('MediaRecorderController', () => {
     it('checks device permission if unknown', async () => {
       const controller = new MediaRecorderController();
       controller.permission.state.next(undefined);
-      const permissionCheckSpy = jest.spyOn(controller.permission, 'check').mockImplementation();
+      const permissionCheckSpy = jest
+        .spyOn(controller.permission, 'check')
+        .mockImplementation();
       await controller.start();
       expect(permissionCheckSpy).toHaveBeenCalledWith();
     });
@@ -188,98 +202,111 @@ describe('MediaRecorderController', () => {
       },
     );
 
-    describe.each([undefined, MediaRecordingState.STOPPED])('recording in state %s', () => {
-      describe.each([['denied'], ['prompt'], ['granted']])('with permission "%s"', (permission) => {
-        it('registers error on unavailable navigator.mediaDevices', async () => {
-          window.navigator.mediaDevices = undefined;
-          const controller = new MediaRecorderController();
-          controller.permission.state.next(permission);
-          await expectRegistersError({
-            action: controller.start,
-            controller,
-            errorMsg: 'Media recording is not supported',
-            notificationMsg: 'Error starting recording',
-          });
-          expect(controller.recordingState.value).toBeUndefined();
-        });
-
-        it('registers error for video recording', async () => {
-          const controller = new MediaRecorderController({
-            config: { mediaRecorderConfig: { mimeType: 'video/webm' } },
-          });
-          controller.permission.state.next(permission);
-          await expectRegistersError({
-            action: controller.start,
-            controller,
-            errorMsg: 'Video recording is not supported. Provided MIME type: video/webm',
-            notificationMsg: 'Error starting recording',
-          });
-          expect(controller.recordingState.value).toBeUndefined();
-        });
-
-        it('does not check device permission', async () => {
-          const controller = new MediaRecorderController();
-          controller.permission.state.next(permission);
-          const permissionCheckSpy = jest
-            .spyOn(controller.permission, 'check')
-            .mockImplementation();
-          await controller.start();
-          expect(permissionCheckSpy).not.toHaveBeenCalledWith();
-        });
-
-        it.each([['prevents accessing'], ['accesses'], ['accesses']])(
-          '%s media devices',
-          async () => {
-            const controller = new MediaRecorderController();
-            controller.permission.state.next(permission);
-            await controller.start();
-            if (permission === 'denied') {
-              expect(window.navigator.mediaDevices.getUserMedia).not.toHaveBeenCalled();
+    describe.each([undefined, MediaRecordingState.STOPPED])(
+      'recording in state %s',
+      () => {
+        describe.each([['denied'], ['prompt'], ['granted']])(
+          'with permission "%s"',
+          (permission) => {
+            it('registers error on unavailable navigator.mediaDevices', async () => {
+              window.navigator.mediaDevices = undefined;
+              const controller = new MediaRecorderController();
+              controller.permission.state.next(permission);
+              await expectRegistersError({
+                action: controller.start,
+                controller,
+                errorMsg: 'Media recording is not supported',
+                notificationMsg: 'Error starting recording',
+              });
               expect(controller.recordingState.value).toBeUndefined();
-            } else {
-              expect(window.navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith(
-                expect.objectContaining({ audio: true }),
-              );
-              expect(controller.recordingState.value).toBe(MediaRecordingState.RECORDING);
-            }
-          },
-        );
-
-        it.each([['does not initiate'], ['initiates'], ['initiates']])(
-          '%s amplitude recording for audio recording',
-          async () => {
-            const controller = new MediaRecorderController();
-            controller.permission.state.next(permission);
-            await controller.start();
-            if (permission === 'denied') {
-              expect(controller.amplitudeRecorder).toBeUndefined();
-            } else {
-              expect(controller.amplitudeRecorder.state.value).toBe(
-                AmplitudeRecorderState.RECORDING,
+            });
+
+            it('registers error for video recording', async () => {
+              const controller = new MediaRecorderController({
+                config: { mediaRecorderConfig: { mimeType: 'video/webm' } },
+              });
+              controller.permission.state.next(permission);
+              await expectRegistersError({
+                action: controller.start,
+                controller,
+                errorMsg:
+                  'Video recording is not supported. Provided MIME type: video/webm',
+                notificationMsg: 'Error starting recording',
+              });
+              expect(controller.recordingState.value).toBeUndefined();
+            });
+
+            it('does not check device permission', async () => {
+              const controller = new MediaRecorderController();
+              controller.permission.state.next(permission);
+              const permissionCheckSpy = jest
+                .spyOn(controller.permission, 'check')
+                .mockImplementation();
+              await controller.start();
+              expect(permissionCheckSpy).not.toHaveBeenCalledWith();
+            });
+
+            it.each([['prevents accessing'], ['accesses'], ['accesses']])(
+              '%s media devices',
+              async () => {
+                const controller = new MediaRecorderController();
+                controller.permission.state.next(permission);
+                await controller.start();
+                if (permission === 'denied') {
+                  expect(
+                    window.navigator.mediaDevices.getUserMedia,
+                  ).not.toHaveBeenCalled();
+                  expect(controller.recordingState.value).toBeUndefined();
+                } else {
+                  expect(window.navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith(
+                    expect.objectContaining({ audio: true }),
+                  );
+                  expect(controller.recordingState.value).toBe(
+                    MediaRecordingState.RECORDING,
+                  );
+                }
+              },
+            );
+
+            it.each([['does not initiate'], ['initiates'], ['initiates']])(
+              '%s amplitude recording for audio recording',
+              async () => {
+                const controller = new MediaRecorderController();
+                controller.permission.state.next(permission);
+                await controller.start();
+                if (permission === 'denied') {
+                  expect(controller.amplitudeRecorder).toBeUndefined();
+                } else {
+                  expect(controller.amplitudeRecorder.state.value).toBe(
+                    AmplitudeRecorderState.RECORDING,
+                  );
+                }
+              },
+            );
+            it('starts MediaRecorder', async () => {
+              const controller = new MediaRecorderController();
+              await controller.start();
+              expect(controller.mediaRecorder.start).toHaveBeenCalledWith();
+            });
+
+            it('handles runtime error', async () => {
+              const controller = new MediaRecorderController();
+              const errorMsg = 'User media error';
+              window.navigator.mediaDevices.getUserMedia.mockRejectedValueOnce(
+                new Error(errorMsg),
               );
-            }
+              await expectRegistersError({
+                action: controller.start,
+                controller,
+                errorMsg,
+                notificationMsg: 'Error starting recording',
+              });
+              expect(controller.recordingState.value).toBeUndefined();
+            });
           },
         );
-        it('starts MediaRecorder', async () => {
-          const controller = new MediaRecorderController();
-          await controller.start();
-          expect(controller.mediaRecorder.start).toHaveBeenCalledWith();
-        });
-
-        it('handles runtime error', async () => {
-          const controller = new MediaRecorderController();
-          const errorMsg = 'User media error';
-          window.navigator.mediaDevices.getUserMedia.mockRejectedValueOnce(new Error(errorMsg));
-          await expectRegistersError({
-            action: controller.start,
-            controller,
-            errorMsg,
-            notificationMsg: 'Error starting recording',
-          });
-          expect(controller.recordingState.value).toBeUndefined();
-        });
-      });
-    });
+      },
+    );
   });
 
   describe('pause', () => {
@@ -291,7 +318,9 @@ describe('MediaRecorderController', () => {
       expect(controller.startTime).toBeUndefined();
       expect(controller.recordingState.value).toBe(MediaRecordingState.PAUSED);
       expect(controller.mediaRecorder.pause).toHaveBeenCalledWith();
-      expect(controller.amplitudeRecorder.state.value).toBe(AmplitudeRecorderState.STOPPED);
+      expect(controller.amplitudeRecorder.state.value).toBe(
+        AmplitudeRecorderState.STOPPED,
+      );
       controller.resume();
       controller.pause();
       expect(controller.recordedChunkDurations).toHaveLength(2);
@@ -317,7 +346,9 @@ describe('MediaRecorderController', () => {
       controller.resume();
       expect(controller.startTime).toBeDefined();
       expect(controller.mediaRecorder.resume).toHaveBeenCalledWith();
-      expect(controller.amplitudeRecorder.state.value).toBe(AmplitudeRecorderState.RECORDING);
+      expect(controller.amplitudeRecorder.state.value).toBe(
+        AmplitudeRecorderState.RECORDING,
+      );
       expect(controller.recordingState.value).toBe(MediaRecordingState.RECORDING);
     });
 
@@ -338,7 +369,9 @@ describe('MediaRecorderController', () => {
       const controller = new MediaRecorderController();
       const existingRecording = generateVoiceRecordingAttachment();
       controller.recording.next(existingRecording);
-      expect(await controller.stop()).toStrictEqual(expect.objectContaining(existingRecording));
+      expect(await controller.stop()).toStrictEqual(
+        expect.objectContaining(existingRecording),
+      );
     });
 
     it.each([MediaRecordingState.STOPPED, undefined])(
@@ -369,7 +402,9 @@ describe('MediaRecorderController', () => {
         expect(stopResult).toStrictEqual(expect.objectContaining(voiceRecording));
         expect(controller.startTime).toBeUndefined();
         expect(controller.mediaRecorder.stop).toHaveBeenCalledWith();
-        expect(controller.amplitudeRecorder.state.value).toBe(AmplitudeRecorderState.STOPPED);
+        expect(controller.amplitudeRecorder.state.value).toBe(
+          AmplitudeRecorderState.STOPPED,
+        );
         expect(controller.recordingState.value).toBe(MediaRecordingState.STOPPED);
       },
     );
@@ -418,7 +453,9 @@ describe('MediaRecorderController', () => {
         .spyOn(controller, 'makeVoiceRecording')
         .mockResolvedValue(voiceRecording);
       await controller.handleDataavailableEvent(generateDataavailableEvent());
-      expect(controller.recording.value).toStrictEqual(expect.objectContaining(voiceRecording));
+      expect(controller.recording.value).toStrictEqual(
+        expect.objectContaining(voiceRecording),
+      );
       makeVoiceRecordingSpy.mockRestore();
     });
   });
@@ -573,7 +610,9 @@ describe('MediaRecorderController', () => {
         },
       });
 
-      controller.recordedData = [new Blob(new Uint8Array(dataPoints), { type: recordedMimeType })];
+      controller.recordedData = [
+        new Blob(new Uint8Array(dataPoints), { type: recordedMimeType }),
+      ];
       controller.recordedChunkDurations = dataPoints.map((n) => n * 1000);
       const recordedFile = new File(controller.recordedData, fileMock);
       createFileFromBlobsSpy.mockReturnValue(recordedFile);
diff --git a/src/components/MediaRecorder/hooks/__tests__/useMediaRecorder.test.js b/src/components/MediaRecorder/hooks/__tests__/useMediaRecorder.test.js
index d63a3ab5d..4cfbfba97 100644
--- a/src/components/MediaRecorder/hooks/__tests__/useMediaRecorder.test.js
+++ b/src/components/MediaRecorder/hooks/__tests__/useMediaRecorder.test.js
@@ -28,7 +28,9 @@ const render = async (params = {}) => {
   );
   let result;
   await act(() => {
-    result = renderHook(() => useMediaRecorder({ enabled: true, ...params }), { wrapper });
+    result = renderHook(() => useMediaRecorder({ enabled: true, ...params }), {
+      wrapper,
+    });
   });
   return result;
 };
@@ -119,7 +121,9 @@ describe('useMediaRecorder', () => {
         },
       } = await render({ handleSubmit, uploadAttachment });
       const recorderStopSpy = jest.spyOn(recorder, 'stop').mockResolvedValue(undefined);
-      const recorderCleanUpSpy = jest.spyOn(recorder, 'cleanUp').mockResolvedValue(undefined);
+      const recorderCleanUpSpy = jest
+        .spyOn(recorder, 'cleanUp')
+        .mockResolvedValue(undefined);
       await completeRecording();
       expect(recorderStopSpy).toHaveBeenCalledWith();
       expect(recorderCleanUpSpy).not.toHaveBeenCalledWith();
@@ -135,7 +139,9 @@ describe('useMediaRecorder', () => {
         },
       } = await render({ handleSubmit, uploadAttachment });
       jest.spyOn(recorder, 'stop').mockResolvedValue(generatedVoiceRecording);
-      const recorderCleanUpSpy = jest.spyOn(recorder, 'cleanUp').mockResolvedValue(undefined);
+      const recorderCleanUpSpy = jest
+        .spyOn(recorder, 'cleanUp')
+        .mockResolvedValue(undefined);
       await act(() => {
         completeRecording();
       });
@@ -150,9 +156,15 @@ describe('useMediaRecorder', () => {
         result: {
           current: { completeRecording, recorder },
         },
-      } = await render({ asyncMessagesMultiSendEnabled: true, handleSubmit, uploadAttachment });
+      } = await render({
+        asyncMessagesMultiSendEnabled: true,
+        handleSubmit,
+        uploadAttachment,
+      });
       jest.spyOn(recorder, 'stop').mockResolvedValue(generatedVoiceRecording);
-      const recorderCleanUpSpy = jest.spyOn(recorder, 'cleanUp').mockResolvedValue(undefined);
+      const recorderCleanUpSpy = jest
+        .spyOn(recorder, 'cleanUp')
+        .mockResolvedValue(undefined);
       await act(() => {
         completeRecording();
       });
diff --git a/src/components/MediaRecorder/hooks/useMediaRecorder.ts b/src/components/MediaRecorder/hooks/useMediaRecorder.ts
index a1550d633..610dfa5ba 100644
--- a/src/components/MediaRecorder/hooks/useMediaRecorder.ts
+++ b/src/components/MediaRecorder/hooks/useMediaRecorder.ts
@@ -10,7 +10,7 @@ import type { LocalVoiceRecordingAttachment } from '../../MessageInput';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type RecordingController<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   completeRecording: () => void;
   permissionState?: PermissionState;
@@ -20,7 +20,7 @@ export type RecordingController<
 };
 
 type UseMediaRecorderParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
   'asyncMessagesMultiSendEnabled' | 'handleSubmit' | 'uploadAttachment'
@@ -31,7 +31,7 @@ type UseMediaRecorderParams<
 };
 
 export const useMediaRecorder = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   asyncMessagesMultiSendEnabled,
   enabled,
@@ -42,7 +42,8 @@ export const useMediaRecorder = <
 }: UseMediaRecorderParams<StreamChatGenerics>): RecordingController<StreamChatGenerics> => {
   const { t } = useTranslationContext('useMediaRecorder');
 
-  const [recording, setRecording] = useState<LocalVoiceRecordingAttachment<StreamChatGenerics>>();
+  const [recording, setRecording] =
+    useState<LocalVoiceRecordingAttachment<StreamChatGenerics>>();
   const [recordingState, setRecordingState] = useState<MediaRecordingState>();
   const [permissionState, setPermissionState] = useState<PermissionState>();
   const [isScheduledForSubmit, scheduleForSubmit] = useState(false);
@@ -81,8 +82,10 @@ export const useMediaRecorder = <
     if (!recorder) return;
     recorder.permission.watch();
     const recordingSubscription = recorder.recording.subscribe(setRecording);
-    const recordingStateSubscription = recorder.recordingState.subscribe(setRecordingState);
-    const permissionStateSubscription = recorder.permission.state.subscribe(setPermissionState);
+    const recordingStateSubscription =
+      recorder.recordingState.subscribe(setRecordingState);
+    const permissionStateSubscription =
+      recorder.permission.state.subscribe(setPermissionState);
 
     return () => {
       recorder.cancel();
diff --git a/src/components/MediaRecorder/transcode/wav.ts b/src/components/MediaRecorder/transcode/wav.ts
index cf305ff20..9b34b0be8 100644
--- a/src/components/MediaRecorder/transcode/wav.ts
+++ b/src/components/MediaRecorder/transcode/wav.ts
@@ -40,7 +40,11 @@ type WriteWaveHeaderParams = {
   // Number of samples per second, e.g. 44100Hz
   sampleRate: number;
 };
-const writeWavHeader = ({ arrayBuffer, channelCount, sampleRate }: WriteWaveHeaderParams) => {
+const writeWavHeader = ({
+  arrayBuffer,
+  channelCount,
+  sampleRate,
+}: WriteWaveHeaderParams) => {
   const byteRate = sampleRate * channelCount * BYTES_PER_SAMPLE; // bytes/sec
   const blockAlign = channelCount * BYTES_PER_SAMPLE;
 
@@ -95,7 +99,9 @@ export const readWavHeader = (dataView: DataView) => {
 };
 
 const splitDataByChannel = (audioBuffer: AudioBuffer) =>
-  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i));
+  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>
+    audioBuffer.getChannelData(i),
+  );
 
 type WriteAudioDataParams = {
   arrayBuffer: ArrayBuffer;
@@ -118,7 +124,9 @@ const writeWavAudioData = ({ arrayBuffer, dataByChannel }: WriteAudioDataParams)
     channelData.forEach((float32Value) => {
       dataView.setInt16(
         writeOffset,
-        float32Value < 0 ? Math.max(-1, float32Value) * 32768 : Math.min(1, float32Value) * 32767,
+        float32Value < 0
+          ? Math.max(-1, float32Value) * 32768
+          : Math.min(1, float32Value) * 32767,
         true,
       );
       writeOffset += channelCount * BYTES_PER_SAMPLE;
@@ -130,7 +138,8 @@ export const encodeToWaw = async (file: File, sampleRate: number) => {
   const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
   const numberOfSamples = audioBuffer.duration * sampleRate;
   const fileSizeBytes =
-    numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE + WAV_HEADER_LENGTH_BYTES;
+    numberOfSamples * audioBuffer.numberOfChannels * BYTES_PER_SAMPLE +
+    WAV_HEADER_LENGTH_BYTES;
 
   const arrayBuffer = new ArrayBuffer(fileSizeBytes);
   writeWavHeader({ arrayBuffer, channelCount: audioBuffer.numberOfChannels, sampleRate });
diff --git a/src/components/Message/FixedHeightMessage.tsx b/src/components/Message/FixedHeightMessage.tsx
index d72a8e9aa..bd5e2106e 100644
--- a/src/components/Message/FixedHeightMessage.tsx
+++ b/src/components/Message/FixedHeightMessage.tsx
@@ -29,8 +29,8 @@ const selectColor = (number: number, dark: boolean) => {
 
 const hashUserId = (userId: string) => {
   const hash = userId.split('').reduce((acc, c) => {
-    acc = (acc << 5) - acc + c.charCodeAt(0); // eslint-disable-line
-    return acc & acc; // eslint-disable-line no-bitwise
+    acc = (acc << 5) - acc + c.charCodeAt(0);
+    return acc & acc;
   }, 0);
   return Math.abs(hash) / 10 ** Math.ceil(Math.log10(Math.abs(hash) + 1));
 };
@@ -39,14 +39,14 @@ const getUserColor = (theme: string, userId: string) =>
   selectColor(hashUserId(userId), theme.includes('dark'));
 
 export type FixedHeightMessageProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   groupedByUser?: boolean;
   message?: StreamMessage<StreamChatGenerics>;
 };
 
 const UnMemoizedFixedHeightMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: FixedHeightMessageProps<StreamChatGenerics>,
 ) => {
@@ -54,18 +54,16 @@ const UnMemoizedFixedHeightMessage = <
 
   const { theme } = useChatContext<StreamChatGenerics>('FixedHeightMessage');
 
-  const {
-    groupedByUser: contextGroupedByUser,
-    message: contextMessage,
-  } = useMessageContext<StreamChatGenerics>('FixedHeightMessage');
+  const { groupedByUser: contextGroupedByUser, message: contextMessage } =
+    useMessageContext<StreamChatGenerics>('FixedHeightMessage');
 
-  const { MessageDeleted = DefaultMessageDeleted } = useComponentContext<StreamChatGenerics>(
-    'FixedHeightMessage',
-  );
+  const { MessageDeleted = DefaultMessageDeleted } =
+    useComponentContext<StreamChatGenerics>('FixedHeightMessage');
 
   const { userLanguage } = useTranslationContext('FixedHeightMessage');
 
-  const groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
+  const groupedByUser =
+    propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
   const message = propMessage || contextMessage;
 
   const handleAction = useActionHandler(message);
@@ -73,12 +71,13 @@ const UnMemoizedFixedHeightMessage = <
   const role = useUserRole(message);
 
   const messageTextToRender =
-    message?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] || message?.text;
+    message?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
+    message?.text;
 
-  const renderedText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [
-    message.mentioned_users,
-    messageTextToRender,
-  ]);
+  const renderedText = useMemo(
+    () => renderText(messageTextToRender, message.mentioned_users),
+    [message.mentioned_users, messageTextToRender],
+  );
 
   const userId = message.user?.id || '';
   const userColor = useMemo(() => getUserColor(theme, userId), [userId, theme]);
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index 786c9046a..7ec5c891b 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -32,7 +32,11 @@ import { MessageSimple as DefaultMessage } from './MessageSimple';
 import type { MessageProps } from './types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
-type MessagePropsToOmit = 'onMentionsClick' | 'onMentionsHover' | 'openThread' | 'retrySendMessage';
+type MessagePropsToOmit =
+  | 'onMentionsClick'
+  | 'onMentionsHover'
+  | 'openThread'
+  | 'retrySendMessage';
 
 type MessageContextPropsToPick =
   | 'handleAction'
@@ -53,7 +57,7 @@ type MessageContextPropsToPick =
   | 'sortReactionDetails';
 
 type MessageWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<MessageProps<StreamChatGenerics>, MessagePropsToOmit> &
   Pick<MessageContextValue<StreamChatGenerics>, MessageContextPropsToPick> & {
     canPin: boolean;
@@ -61,7 +65,7 @@ type MessageWithContextProps<
   };
 
 const MessageWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageWithContextProps<StreamChatGenerics>,
 ) => {
@@ -110,7 +114,8 @@ const MessageWithContext = <
         read &&
         (!read[client.user.id] ||
           (message?.created_at &&
-            new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime()))
+            new Date(message.created_at).getTime() >
+              read[client.user.id].last_read.getTime()))
       ),
     [client, isMyMessage, message.created_at, read],
   );
@@ -185,7 +190,7 @@ const MemoizedMessage = React.memo(
  * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
  */
 export const Message = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageProps<StreamChatGenerics>,
 ) => {
@@ -214,7 +219,8 @@ export const Message = <
   } = props;
 
   const { addNotification } = useChannelActionContext<StreamChatGenerics>('Message');
-  const { highlightedMessageId, mutes } = useChannelStateContext<StreamChatGenerics>('Message');
+  const { highlightedMessageId, mutes } =
+    useChannelStateContext<StreamChatGenerics>('Message');
 
   const handleAction = useActionHandler(message);
   const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
diff --git a/src/components/Message/MessageDeleted.tsx b/src/components/Message/MessageDeleted.tsx
index 9b5a73d60..9a665f181 100644
--- a/src/components/Message/MessageDeleted.tsx
+++ b/src/components/Message/MessageDeleted.tsx
@@ -9,13 +9,13 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type MessageDeletedProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   message: StreamMessage<StreamChatGenerics>;
 };
 
 export const MessageDeleted = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageDeletedProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/Message/MessageEditedTimestamp.tsx b/src/components/Message/MessageEditedTimestamp.tsx
index 87db8539f..3d9652888 100644
--- a/src/components/Message/MessageEditedTimestamp.tsx
+++ b/src/components/Message/MessageEditedTimestamp.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 
 import clsx from 'clsx';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import { Timestamp as DefaultTimestamp } from './Timestamp';
 import { isMessageEdited } from './utils';
 
@@ -9,13 +13,13 @@ import type { DefaultStreamChatGenerics } from '../../types';
 import type { MessageTimestampProps } from './MessageTimestamp';
 
 export type MessageEditedTimestampProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = MessageTimestampProps<StreamChatGenerics> & {
   open: boolean;
 };
 
 export function MessageEditedTimestamp<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   message: propMessage,
   open,
diff --git a/src/components/Message/MessageErrorText.tsx b/src/components/Message/MessageErrorText.tsx
index fd4f7a137..6f88b7474 100644
--- a/src/components/Message/MessageErrorText.tsx
+++ b/src/components/Message/MessageErrorText.tsx
@@ -5,20 +5,22 @@ import { DefaultStreamChatGenerics } from '../../types/types';
 import { isMessageBounced } from './utils';
 
 export interface MessageErrorTextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > {
   message: StreamMessage<StreamChatGenerics>;
   theme: string;
 }
 
 export function MessageErrorText<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({ message, theme }: MessageErrorTextProps<StreamChatGenerics>) {
   const { t } = useTranslationContext('MessageText');
 
   if (message.type === 'error' && !isMessageBounced(message)) {
     return (
-      <div className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}>
+      <div
+        className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}
+      >
         {t<string>('Error · Unsent')}
       </div>
     );
@@ -26,7 +28,9 @@ export function MessageErrorText<
 
   if (message.status === 'failed') {
     return (
-      <div className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}>
+      <div
+        className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}
+      >
         {message.errorStatusCode !== 403
           ? t<string>('Message Failed · Click to try again')
           : t<string>('Message Failed · Unauthorized')}
diff --git a/src/components/Message/MessageOptions.tsx b/src/components/Message/MessageOptions.tsx
index 5f4065427..7554f6bd6 100644
--- a/src/components/Message/MessageOptions.tsx
+++ b/src/components/Message/MessageOptions.tsx
@@ -17,7 +17,7 @@ import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
 import type { MessageContextValue } from '../../context/MessageContext';
 
 export type MessageOptionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleOpenThread'>> & {
   /* Custom component rendering the icon used in message actions button. This button invokes the message actions menu. */
   ActionsIcon?: React.ComponentType<IconProps>;
@@ -32,7 +32,7 @@ export type MessageOptionsProps<
 };
 
 const UnMemoizedMessageOptions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageOptionsProps<StreamChatGenerics>,
 ) => {
@@ -55,7 +55,9 @@ const UnMemoizedMessageOptions = <
 
   const { t } = useTranslationContext('MessageOptions');
   const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions--${message.id}`);
-  const reactionSelectorDialogIsOpen = useDialogIsOpen(`reaction-selector--${message.id}`);
+  const reactionSelectorDialogIsOpen = useDialogIsOpen(
+    `reaction-selector--${message.id}`,
+  );
   const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
 
   const messageActions = getMessageActions();
diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx
index e82200fed..03aa01c6b 100644
--- a/src/components/Message/MessageSimple.tsx
+++ b/src/components/Message/MessageSimple.tsx
@@ -37,11 +37,11 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 
 type MessageSimpleWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = MessageContextValue<StreamChatGenerics>;
 
 const MessageSimpleWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageSimpleWithContextProps<StreamChatGenerics>,
 ) => {
@@ -89,10 +89,10 @@ const MessageSimpleWithContext = <
 
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
-  const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [
-    isMessageAIGenerated,
-    message,
-  ]);
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated?.(message),
+    [isMessageAIGenerated, message],
+  );
 
   if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
     return null;
@@ -145,7 +145,11 @@ const MessageSimpleWithContext = <
   return (
     <>
       {editing && (
-        <Modal className='str-chat__edit-message-modal' onClose={clearEditingState} open={editing}>
+        <Modal
+          className='str-chat__edit-message-modal'
+          onClose={clearEditingState}
+          open={editing}
+        >
           <MessageInput
             clearEditingState={clearEditingState}
             grow
@@ -190,7 +194,10 @@ const MessageSimpleWithContext = <
             <div className='str-chat__message-bubble'>
               {poll && <Poll poll={poll} />}
               {message.attachments?.length && !message.quoted_message ? (
-                <Attachment actionHandler={handleAction} attachments={message.attachments} />
+                <Attachment
+                  actionHandler={handleAction}
+                  attachments={message.attachments}
+                />
               ) : null}
               {isAIGenerated ? (
                 <StreamedMessageText message={message} renderText={renderText} />
@@ -223,9 +230,13 @@ const MessageSimpleWithContext = <
               )}
               <MessageTimestamp customClass='str-chat__message-simple-timestamp' />
               {isEdited && (
-                <span className='str-chat__mesage-simple-edited'>{t<string>('Edited')}</span>
+                <span className='str-chat__mesage-simple-edited'>
+                  {t<string>('Edited')}
+                </span>
+              )}
+              {isEdited && (
+                <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />
               )}
-              {isEdited && <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />}
             </div>
           )}
         </div>
@@ -243,7 +254,7 @@ const MemoizedMessageSimple = React.memo(
  * The default UI component that renders a message and receives functionality and logic from the MessageContext.
  */
 export const MessageSimple = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageUIComponentProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx
index 1c96b7b73..fa47778e2 100644
--- a/src/components/Message/MessageStatus.tsx
+++ b/src/components/Message/MessageStatus.tsx
@@ -32,7 +32,7 @@ export type MessageStatusProps = {
 };
 
 const UnMemoizedMessageStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageStatusProps,
 ) => {
@@ -45,17 +45,14 @@ const UnMemoizedMessageStatus = <
     tooltipUserNameMapper = mapToUserNameOrId,
   } = props;
 
-  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
+  const { handleEnter, handleLeave, tooltipVisible } =
+    useEnterLeaveHandlers<HTMLSpanElement>();
 
   const { client } = useChatContext<StreamChatGenerics>('MessageStatus');
-  const { Avatar: contextAvatar } = useComponentContext<StreamChatGenerics>('MessageStatus');
-  const {
-    isMyMessage,
-    lastReceivedId,
-    message,
-    readBy,
-    threadList,
-  } = useMessageContext<StreamChatGenerics>('MessageStatus');
+  const { Avatar: contextAvatar } =
+    useComponentContext<StreamChatGenerics>('MessageStatus');
+  const { isMyMessage, lastReceivedId, message, readBy, threadList } =
+    useMessageContext<StreamChatGenerics>('MessageStatus');
   const { t } = useTranslationContext('MessageStatus');
   const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
 
@@ -67,7 +64,8 @@ const UnMemoizedMessageStatus = <
   const rootClassName = `str-chat__message-${messageType}-status str-chat__message-status`;
 
   const sending = message.status === 'sending';
-  const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
+  const delivered =
+    message.status === 'received' && message.id === lastReceivedId && !threadList;
   const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
 
   const readersWithoutOwnUser = deliveredAndRead
@@ -154,4 +152,6 @@ const UnMemoizedMessageStatus = <
   );
 };
 
-export const MessageStatus = React.memo(UnMemoizedMessageStatus) as typeof UnMemoizedMessageStatus;
+export const MessageStatus = React.memo(
+  UnMemoizedMessageStatus,
+) as typeof UnMemoizedMessageStatus;
diff --git a/src/components/Message/MessageText.tsx b/src/components/Message/MessageText.tsx
index cb7919d76..08bb69b6f 100644
--- a/src/components/Message/MessageText.tsx
+++ b/src/components/Message/MessageText.tsx
@@ -4,7 +4,11 @@ import React, { useMemo } from 'react';
 import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
 import { isOnlyEmojis, messageHasAttachments } from './utils';
 
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import { renderText as defaultRenderText } from './renderText';
 import { MessageErrorText } from './MessageErrorText';
 
@@ -13,7 +17,7 @@ import type { MessageContextValue, StreamMessage } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type MessageTextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /* Replaces the CSS class name placed on the component's inner `div` container */
   customInnerClass?: string;
@@ -26,7 +30,7 @@ export type MessageTextProps<
 } & Pick<MessageContextValue<StreamChatGenerics>, 'renderText'>;
 
 const UnMemoizedMessageTextComponent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageTextProps<StreamChatGenerics>,
 ) => {
@@ -38,9 +42,8 @@ const UnMemoizedMessageTextComponent = <
     theme = 'simple',
   } = props;
 
-  const { QuotedMessage = DefaultQuotedMessage } = useComponentContext<StreamChatGenerics>(
-    'MessageText',
-  );
+  const { QuotedMessage = DefaultQuotedMessage } =
+    useComponentContext<StreamChatGenerics>('MessageText');
 
   const {
     message: contextMessage,
@@ -57,17 +60,19 @@ const UnMemoizedMessageTextComponent = <
   const hasAttachment = messageHasAttachments(message);
 
   const messageTextToRender =
-    message.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] || message.text;
+    message.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
+    message.text;
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const messageText = useMemo(() => renderText(messageTextToRender, message.mentioned_users), [
-    message.mentioned_users,
-    messageTextToRender,
-  ]);
+  const messageText = useMemo(
+    () => renderText(messageTextToRender, message.mentioned_users),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [message.mentioned_users, messageTextToRender],
+  );
 
   const wrapperClass = customWrapperClass || 'str-chat__message-text';
   const innerClass =
-    customInnerClass || `str-chat__message-text-inner str-chat__message-${theme}-text-inner`;
+    customInnerClass ||
+    `str-chat__message-text-inner str-chat__message-${theme}-text-inner`;
 
   if (!messageTextToRender && !message.quoted_message) return null;
 
diff --git a/src/components/Message/MessageTimestamp.tsx b/src/components/Message/MessageTimestamp.tsx
index bf8959feb..6186e6324 100644
--- a/src/components/Message/MessageTimestamp.tsx
+++ b/src/components/Message/MessageTimestamp.tsx
@@ -8,7 +8,7 @@ import type { TimestampFormatterOptions } from '../../i18n/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type MessageTimestampProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = TimestampFormatterOptions & {
   /* Adds a CSS class name to the component's outer `time` container. */
   customClass?: string;
@@ -17,12 +17,13 @@ export type MessageTimestampProps<
 };
 
 const UnMemoizedMessageTimestamp = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageTimestampProps<StreamChatGenerics>,
 ) => {
   const { message: propMessage, ...timestampProps } = props;
-  const { message: contextMessage } = useMessageContext<StreamChatGenerics>('MessageTimestamp');
+  const { message: contextMessage } =
+    useMessageContext<StreamChatGenerics>('MessageTimestamp');
   const { Timestamp = DefaultTimestamp } = useComponentContext('MessageTimestamp');
   const message = propMessage || contextMessage;
   return <Timestamp timestamp={message.created_at} {...timestampProps} />;
diff --git a/src/components/Message/QuotedMessage.tsx b/src/components/Message/QuotedMessage.tsx
index 22c680355..0689e2d63 100644
--- a/src/components/Message/QuotedMessage.tsx
+++ b/src/components/Message/QuotedMessage.tsx
@@ -16,12 +16,10 @@ import type { TranslationLanguages } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export const QuotedMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const {
-    Attachment = DefaultAttachment,
-    Avatar: ContextAvatar,
-  } = useComponentContext<StreamChatGenerics>('QuotedMessage');
+  const { Attachment = DefaultAttachment, Avatar: ContextAvatar } =
+    useComponentContext<StreamChatGenerics>('QuotedMessage');
   const { client } = useChatContext();
   const { isMyMessage, message } = useMessageContext<StreamChatGenerics>('QuotedMessage');
   const { t, userLanguage } = useTranslationContext('QuotedMessage');
@@ -33,7 +31,8 @@ export const QuotedMessage = <
   if (!quoted_message) return null;
 
   const poll = quoted_message.poll_id && client.polls.fromState(quoted_message.poll_id);
-  const quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === 'deleted';
+  const quotedMessageDeleted =
+    quoted_message.deleted_at || quoted_message.type === 'deleted';
 
   const quotedMessageText = quotedMessageDeleted
     ? t('This message was deleted...')
@@ -66,7 +65,10 @@ export const QuotedMessage = <
             user={quoted_message.user}
           />
         )}
-        <div className='str-chat__quoted-message-bubble' data-testid='quoted-message-contents'>
+        <div
+          className='str-chat__quoted-message-bubble'
+          data-testid='quoted-message-contents'
+        >
           {poll ? (
             <Poll isQuoted poll={poll} />
           ) : (
@@ -84,7 +86,9 @@ export const QuotedMessage = <
           )}
         </div>
       </div>
-      {message.attachments?.length ? <Attachment attachments={message.attachments} /> : null}
+      {message.attachments?.length ? (
+        <Attachment attachments={message.attachments} />
+      ) : null}
     </>
   );
 };
diff --git a/src/components/Message/StreamedMessageText.tsx b/src/components/Message/StreamedMessageText.tsx
index 3005f3cd4..bfc5e7041 100644
--- a/src/components/Message/StreamedMessageText.tsx
+++ b/src/components/Message/StreamedMessageText.tsx
@@ -6,14 +6,14 @@ import { useMessageContext } from '../../context';
 import { useMessageTextStreaming } from './hooks';
 
 export type StreamedMessageTextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageTextProps<StreamChatGenerics>, 'message' | 'renderText'> & {
   renderingLetterCount?: number;
   streamingLetterIntervalMs?: number;
 };
 
 export const StreamedMessageText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: StreamedMessageTextProps<StreamChatGenerics>,
 ) => {
@@ -23,9 +23,8 @@ export const StreamedMessageText = <
     renderText,
     streamingLetterIntervalMs,
   } = props;
-  const { message: messageFromContext } = useMessageContext<StreamChatGenerics>(
-    'StreamedMessageText',
-  );
+  const { message: messageFromContext } =
+    useMessageContext<StreamChatGenerics>('StreamedMessageText');
   const message = messageFromProps || messageFromContext;
   const { text = '' } = message;
   const { streamedMessageText } = useMessageTextStreaming({
@@ -35,6 +34,9 @@ export const StreamedMessageText = <
   });
 
   return (
-    <MessageText message={{ ...message, text: streamedMessageText }} renderText={renderText} />
+    <MessageText
+      message={{ ...message, text: streamedMessageText }}
+      renderText={renderText}
+    />
   );
 };
diff --git a/src/components/Message/Timestamp.tsx b/src/components/Message/Timestamp.tsx
index e085354b3..976476eec 100644
--- a/src/components/Message/Timestamp.tsx
+++ b/src/components/Message/Timestamp.tsx
@@ -18,7 +18,8 @@ export function Timestamp(props: TimestampProps) {
   const { formatDate } = useMessageContext('MessageTimestamp');
   const { t, tDateTimeParser } = useTranslationContext('MessageTimestamp');
 
-  const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
+  const normalizedTimestamp =
+    timestamp && isDate(timestamp) ? timestamp.toISOString() : timestamp;
 
   const when = useMemo(
     () =>
@@ -32,7 +33,15 @@ export function Timestamp(props: TimestampProps) {
         tDateTimeParser,
         timestampTranslationKey: 'timestamp/MessageTimestamp',
       }),
-    [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser],
+    [
+      calendar,
+      calendarFormats,
+      format,
+      formatDate,
+      normalizedTimestamp,
+      t,
+      tDateTimeParser,
+    ],
   );
 
   if (!when) {
@@ -40,7 +49,11 @@ export function Timestamp(props: TimestampProps) {
   }
 
   return (
-    <time className={customClass} dateTime={normalizedTimestamp} title={normalizedTimestamp}>
+    <time
+      className={customClass}
+      dateTime={normalizedTimestamp}
+      title={normalizedTimestamp}
+    >
       {when}
     </time>
   );
diff --git a/src/components/Message/__tests__/FixedHeightMessage.test.js b/src/components/Message/__tests__/FixedHeightMessage.test.js
index 27940b25d..dcb4adf0c 100644
--- a/src/components/Message/__tests__/FixedHeightMessage.test.js
+++ b/src/components/Message/__tests__/FixedHeightMessage.test.js
@@ -89,7 +89,10 @@ describe('<FixedHeightMessage />', () => {
   it('should render user avatar', async () => {
     const message = generateMessage({ user: alice });
     await renderMsg(message);
-    expect(AvatarMock).toHaveBeenCalledWith(expect.objectContaining(aliceProfile), undefined);
+    expect(AvatarMock).toHaveBeenCalledWith(
+      expect.objectContaining(aliceProfile),
+      undefined,
+    );
   });
 
   it('should render MML', async () => {
diff --git a/src/components/Message/__tests__/Message.test.js b/src/components/Message/__tests__/Message.test.js
index 67c2f90ad..1eb712fa5 100644
--- a/src/components/Message/__tests__/Message.test.js
+++ b/src/components/Message/__tests__/Message.test.js
@@ -59,7 +59,11 @@ async function renderComponent({
   return renderer(
     <ChatProvider value={{ client, ...clientOpts }}>
       <ChannelStateProvider
-        value={{ channel, channelCapabilities: { 'send-reaction': true }, ...channelStateOpts }}
+        value={{
+          channel,
+          channelCapabilities: { 'send-reaction': true },
+          ...channelStateOpts,
+        }}
       >
         <ChannelActionProvider
           value={{
@@ -71,8 +75,9 @@ async function renderComponent({
         >
           <ComponentProvider
             value={{
-              // eslint-disable-next-line react/display-name
-              Message: () => <CustomMessageUIComponent contextCallback={contextCallback} />,
+              Message: () => (
+                <CustomMessageUIComponent contextCallback={contextCallback} />
+              ),
               ...components,
             }}
           >
@@ -232,7 +237,9 @@ describe('<Message /> component', () => {
 
     await context.handleAction(action.name, action.value, mouseEventMock);
 
-    expect(sendAction).toHaveBeenCalledWith(currentMessage.id, { [action.name]: action.value });
+    expect(sendAction).toHaveBeenCalledWith(currentMessage.id, {
+      [action.name]: action.value,
+    });
     expect(updateMessage).toHaveBeenCalledWith(updatedMessage);
   });
 
@@ -254,7 +261,9 @@ describe('<Message /> component', () => {
 
     await context.handleAction(action.name, action.value, mouseEventMock);
 
-    expect(sendAction).toHaveBeenCalledWith(currentMessage.id, { [action.name]: action.value });
+    expect(sendAction).toHaveBeenCalledWith(currentMessage.id, {
+      [action.name]: action.value,
+    });
     expect(removeMessage).toHaveBeenCalledWith(currentMessage);
   });
 
@@ -625,7 +634,9 @@ describe('<Message /> component', () => {
     let context;
 
     await renderComponent({
-      channelStateOpts: { state: { members: {}, membership: { role: 'owner' }, watchers: {} } },
+      channelStateOpts: {
+        state: { members: {}, membership: { role: 'owner' }, watchers: {} },
+      },
       contextCallback: (ctx) => {
         context = ctx;
       },
@@ -822,7 +833,10 @@ describe('<Message /> component', () => {
     await context.handleFlag(mouseEventMock);
 
     expect(flagMessage).toHaveBeenCalledWith(message.id);
-    expect(addNotification).toHaveBeenCalledWith(defaultFlagMessageFailedNotification, 'error');
+    expect(addNotification).toHaveBeenCalledWith(
+      defaultFlagMessageFailedNotification,
+      'error',
+    );
   });
 
   it('should allow user to pin messages when permissions allow', async () => {
diff --git a/src/components/Message/__tests__/MessageDeleted.test.js b/src/components/Message/__tests__/MessageDeleted.test.js
index 710a4fbfb..1b280f4ee 100644
--- a/src/components/Message/__tests__/MessageDeleted.test.js
+++ b/src/components/Message/__tests__/MessageDeleted.test.js
@@ -50,7 +50,9 @@ describe('MessageDeleted component', () => {
 
   it('should not set specific css class when message is not from current user', async () => {
     const { queryByTestId } = await renderComponent(generateMessage({ user: bob }));
-    expect(queryByTestId(messageDeletedTestId).className).not.toContain(ownMessageCssClass);
+    expect(queryByTestId(messageDeletedTestId).className).not.toContain(
+      ownMessageCssClass,
+    );
   });
 
   it('should set specific css class based on message type', async () => {
diff --git a/src/components/Message/__tests__/MessageOptions.test.js b/src/components/Message/__tests__/MessageOptions.test.js
index b744bc2ad..96c91d1b7 100644
--- a/src/components/Message/__tests__/MessageOptions.test.js
+++ b/src/components/Message/__tests__/MessageOptions.test.js
@@ -1,4 +1,3 @@
-/* eslint-disable jest-dom/prefer-to-have-class */
 import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
@@ -52,7 +51,10 @@ async function renderMessageOptions({
   customOptionsProps = {},
 }) {
   const client = await getTestClientWithUser(alice);
-  const channel = generateChannel({ getConfig: () => channelConfig, state: { membership: {} } });
+  const channel = generateChannel({
+    getConfig: () => channelConfig,
+    state: { membership: {} },
+  });
 
   return render(
     <ChatProvider value={{ client }}>
@@ -68,7 +70,7 @@ async function renderMessageOptions({
             <ComponentProvider
               value={{
                 Attachment,
-                // eslint-disable-next-line react/display-name
+
                 Message: () => <MessageSimple channelConfig={channelConfig} />,
                 reactionOptions: defaultReactionOptions,
               }}
@@ -108,7 +110,9 @@ describe('<MessageOptions />', () => {
     'should not render message options when message is of %s %s and is from current user.',
     async (key, value) => {
       const message = generateAliceMessage({ [key]: value });
-      const { queryByTestId } = await renderMessageOptions({ customMessageProps: { message } });
+      const { queryByTestId } = await renderMessageOptions({
+        customMessageProps: { message },
+      });
       expect(queryByTestId(/message-options/)).not.toBeInTheDocument();
     },
   );
@@ -142,7 +146,9 @@ describe('<MessageOptions />', () => {
   });
 
   it('should not display thread actions when channel does not have replies enabled', async () => {
-    const { queryByTestId } = await renderMessageOptions({ channelConfig: { replies: false } });
+    const { queryByTestId } = await renderMessageOptions({
+      channelConfig: { replies: false },
+    });
     expect(queryByTestId(threadActionTestId)).not.toBeInTheDocument();
   });
 
@@ -158,7 +164,7 @@ describe('<MessageOptions />', () => {
     });
     expect(handleOpenThread).not.toHaveBeenCalled();
     fireEvent.click(getByTestId(threadActionTestId));
-    // eslint-disable-next-line jest/prefer-called-with
+
     expect(handleOpenThread).toHaveBeenCalled();
   });
 
@@ -261,7 +267,9 @@ describe('<MessageOptions />', () => {
 
   it('should render message actions', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
     });
 
     expect(queryByTestId(MESSAGE_ACTIONS_TEST_ID)).toBeInTheDocument();
@@ -269,7 +277,9 @@ describe('<MessageOptions />', () => {
 
   it('should not show message actions button if actions are disabled', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: { messageActions: [] },
     });
 
@@ -278,8 +288,13 @@ describe('<MessageOptions />', () => {
 
   it('should not show actions box for message in thread if only non-thread actions are available', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
-      customMessageProps: { messageActions: ACTIONS_NOT_WORKING_IN_THREAD, threadList: true },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
+      customMessageProps: {
+        messageActions: ACTIONS_NOT_WORKING_IN_THREAD,
+        threadList: true,
+      },
     });
 
     expect(queryByTestId(MESSAGE_ACTIONS_TEST_ID)).not.toBeInTheDocument();
@@ -287,7 +302,9 @@ describe('<MessageOptions />', () => {
 
   it('should show actions box for message in thread if not only non-thread actions are available', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         messageActions: [...ACTIONS_NOT_WORKING_IN_THREAD, MESSAGE_ACTIONS.delete],
         threadList: true,
@@ -299,7 +316,9 @@ describe('<MessageOptions />', () => {
 
   it('should show actions box for a message in thread if custom actions provided are non-thread', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         customMessageActions: ACTIONS_NOT_WORKING_IN_THREAD,
         messageActions: ACTIONS_NOT_WORKING_IN_THREAD,
@@ -311,7 +330,9 @@ describe('<MessageOptions />', () => {
 
   it('should not show actions box for message outside thread with single action "react"', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         messageActions: [MESSAGE_ACTIONS.react],
       },
@@ -321,7 +342,9 @@ describe('<MessageOptions />', () => {
 
   it('should show actions box for message outside thread with single action "react" if custom actions available', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         customMessageActions: [MESSAGE_ACTIONS.react],
         messageActions: [MESSAGE_ACTIONS.react],
@@ -333,7 +356,9 @@ describe('<MessageOptions />', () => {
 
   it('should not show actions box for message outside thread with single action "reply"', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         messageActions: [MESSAGE_ACTIONS.reply],
       },
@@ -344,7 +369,9 @@ describe('<MessageOptions />', () => {
 
   it('should show actions box for message outside thread with single action "reply" if custom actions available', async () => {
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         customMessageActions: [MESSAGE_ACTIONS.reply],
         messageActions: [MESSAGE_ACTIONS.reply],
@@ -357,7 +384,9 @@ describe('<MessageOptions />', () => {
   it('should not show actions box for message outside thread with two actions "react" & "reply"', async () => {
     const actions = [MESSAGE_ACTIONS.react, MESSAGE_ACTIONS.reply];
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         messageActions: actions,
       },
@@ -369,7 +398,9 @@ describe('<MessageOptions />', () => {
   it('should show actions box for message outside thread with single actions "react" & "reply" if custom actions available', async () => {
     const actions = [MESSAGE_ACTIONS.react, MESSAGE_ACTIONS.reply];
     const { queryByTestId } = await renderMessageOptions({
-      channelStateOpts: { channelCapabilities: minimumCapabilitiesToRenderMessageActions },
+      channelStateOpts: {
+        channelCapabilities: minimumCapabilitiesToRenderMessageActions,
+      },
       customMessageProps: {
         customMessageActions: actions,
         messageActions: actions,
diff --git a/src/components/Message/__tests__/MessageRepliesCountButton.test.js b/src/components/Message/__tests__/MessageRepliesCountButton.test.js
index 054cf93f8..d4f6381b2 100644
--- a/src/components/Message/__tests__/MessageRepliesCountButton.test.js
+++ b/src/components/Message/__tests__/MessageRepliesCountButton.test.js
@@ -8,7 +8,8 @@ const onClickMock = jest.fn();
 const defaultSingularText = '1 reply';
 const defaultPluralText = '2 replies';
 
-const i18nMock = (key, { count }) => (count > 1 ? defaultPluralText : defaultSingularText);
+const i18nMock = (key, { count }) =>
+  count > 1 ? defaultPluralText : defaultSingularText;
 
 const renderComponent = (props) =>
   render(
@@ -31,7 +32,10 @@ describe('MessageRepliesCountButton', () => {
 
   it('should render the right text when there is one reply, and labelSingle is defined', () => {
     const customSingularLabel = 'text';
-    const { getByText } = renderComponent({ labelSingle: customSingularLabel, reply_count: 1 });
+    const { getByText } = renderComponent({
+      labelSingle: customSingularLabel,
+      reply_count: 1,
+    });
 
     expect(getByText(`1 ${customSingularLabel}`)).toBeInTheDocument();
   });
@@ -44,7 +48,10 @@ describe('MessageRepliesCountButton', () => {
 
   it('should render the right text when there is more than one reply, and labelPlural is defined', () => {
     const customPluralLabel = 'text';
-    const { getByText } = renderComponent({ labelPlural: customPluralLabel, reply_count: 2 });
+    const { getByText } = renderComponent({
+      labelPlural: customPluralLabel,
+      reply_count: 2,
+    });
 
     expect(getByText(`2 ${customPluralLabel}`)).toBeInTheDocument();
   });
diff --git a/src/components/Message/__tests__/MessageSimple.test.js b/src/components/Message/__tests__/MessageSimple.test.js
index 2e13fec1e..c16e9df13 100644
--- a/src/components/Message/__tests__/MessageSimple.test.js
+++ b/src/components/Message/__tests__/MessageSimple.test.js
@@ -20,7 +20,11 @@ import { MML as MMLMock } from '../../MML';
 import { Modal as ModalMock } from '../../Modal';
 import { defaultReactionOptions } from '../../Reactions';
 
-import { ChannelActionProvider, ChannelStateProvider, ComponentProvider } from '../../../context';
+import {
+  ChannelActionProvider,
+  ChannelStateProvider,
+  ComponentProvider,
+} from '../../../context';
 import {
   countReactions,
   generateChannel,
@@ -45,7 +49,9 @@ jest.mock('../../MessageInput', () => ({
   EditMessageForm: jest.fn(() => <div data-testid='edit-message-form' />),
   MessageInput: jest.fn(() => <div data-testid='message-input' />),
 }));
-jest.mock('../../Modal', () => ({ Modal: jest.fn((props) => <div>{props.children}</div>) }));
+jest.mock('../../Modal', () => ({
+  Modal: jest.fn((props) => <div>{props.children}</div>),
+}));
 
 const alice = generateUser();
 const bob = generateUser({ image: 'bob-avatar.jpg', name: 'bob' });
@@ -55,11 +61,11 @@ const retrySendMessageMock = jest.fn();
 const removeMessageMock = jest.fn();
 
 async function renderMessageSimple({
-  message,
-  props = {},
-  channelConfigOverrides = { replies: true },
   channelCapabilities = { 'send-reaction': true },
+  channelConfigOverrides = { replies: true },
   components = {},
+  message,
+  props = {},
   renderer = render,
 }) {
   const channel = generateChannel({
@@ -85,7 +91,7 @@ async function renderMessageSimple({
             <ComponentProvider
               value={{
                 Attachment: AttachmentMock,
-                // eslint-disable-next-line react/display-name
+
                 Message: () => <MessageSimple {...props} />,
                 reactionOptions: defaultReactionOptions,
                 ...components,
@@ -135,7 +141,9 @@ describe('<MessageSimple />', () => {
     const deletedMessage = generateAliceMessage({
       deleted_at: new Date('2019-12-17T03:24:00'),
     });
-    const { container, getByTestId } = await renderMessageSimple({ message: deletedMessage });
+    const { container, getByTestId } = await renderMessageSimple({
+      message: deletedMessage,
+    });
     expect(getByTestId('message-deleted-component')).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -145,7 +153,9 @@ describe('<MessageSimple />', () => {
     const deletedMessage = generateAliceMessage({
       deleted_at: new Date('2019-12-25T03:24:00'),
     });
-    const CustomMessageDeletedComponent = () => <p data-testid='custom-message-deleted'>Gone!</p>;
+    const CustomMessageDeletedComponent = () => (
+      <p data-testid='custom-message-deleted'>Gone!</p>
+    );
     const { container, getByTestId } = await renderMessageSimple({
       components: {
         MessageDeleted: CustomMessageDeletedComponent,
@@ -175,7 +185,9 @@ describe('<MessageSimple />', () => {
 
   it('should render message with custom replies count button when one is given', async () => {
     const message = generateAliceMessage({ reply_count: 1 });
-    const CustomRepliesCount = () => <div data-testid='custom-message-replies-count'>Replies</div>;
+    const CustomRepliesCount = () => (
+      <div data-testid='custom-message-replies-count'>Replies</div>
+    );
     const { container, getByTestId } = await renderMessageSimple({
       components: {
         MessageRepliesCountButton: CustomRepliesCount,
@@ -342,7 +354,10 @@ describe('<MessageSimple />', () => {
   });
 
   it('should keep rendering the "received" status for already read message that was updated', async () => {
-    const message = generateAliceMessage({ created_at: new Date('1970-1-2'), status: 'received' });
+    const message = generateAliceMessage({
+      created_at: new Date('1970-1-2'),
+      status: 'received',
+    });
     const returnAllReadData = false;
     const read = {
       [bob.id]: {
@@ -379,7 +394,10 @@ describe('<MessageSimple />', () => {
   });
 
   it('should keep rendering the "read by" status for already read message that was updated', async () => {
-    const message = generateAliceMessage({ created_at: new Date('1970-2-1'), status: 'received' });
+    const message = generateAliceMessage({
+      created_at: new Date('1970-2-1'),
+      status: 'received',
+    });
     const returnAllReadData = false;
     const read = {
       [bob.id]: {
@@ -500,7 +518,7 @@ describe('<MessageSimple />', () => {
         handleOpenThread: jest.fn(),
       },
     });
-    // eslint-disable-next-line jest/prefer-called-with
+
     expect(MessageOptionsMock).toHaveBeenCalled();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -556,7 +574,7 @@ describe('<MessageSimple />', () => {
         unsafeHTML,
       },
     });
-    // eslint-disable-next-line jest/prefer-called-with
+
     expect(MessageTextMock).toHaveBeenCalled();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -727,7 +745,9 @@ describe('<MessageSimple />', () => {
 
     it('should use overriden modal content text', async () => {
       const message = generateAliceMessage(bouncedMessageOptions);
-      const CustomMessageBouncePrompt = () => <MessageBouncePrompt>Overriden</MessageBouncePrompt>;
+      const CustomMessageBouncePrompt = () => (
+        <MessageBouncePrompt>Overriden</MessageBouncePrompt>
+      );
       const { getByTestId, queryByText } = await renderMessageSimple({
         components: {
           MessageBouncePrompt: CustomMessageBouncePrompt,
diff --git a/src/components/Message/__tests__/MessageStatus.test.js b/src/components/Message/__tests__/MessageStatus.test.js
index 2bb054df9..bede4bbfe 100644
--- a/src/components/Message/__tests__/MessageStatus.test.js
+++ b/src/components/Message/__tests__/MessageStatus.test.js
@@ -9,7 +9,11 @@ import {
   TranslationProvider,
 } from '../../../context';
 import { MessageStatus } from '../MessageStatus';
-import { generateMessage, generateUser, getTestClientWithUser } from '../../../mock-builders';
+import {
+  generateMessage,
+  generateUser,
+  getTestClientWithUser,
+} from '../../../mock-builders';
 
 const MESSAGE_STATUS_SENDING_TEST_ID = 'message-status-sending';
 const MESSAGE_STATUS_DELIVERED_TEST_ID = 'message-status-received';
@@ -244,7 +248,9 @@ describe('MessageStatus', () => {
       chatCtx: { client },
       messageCtx: { message: ownMessage, readBy: [user] },
     });
-    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID),
+    ).not.toBeInTheDocument();
   });
 
   it('does not render count if read by 1 other user', async () => {
@@ -253,7 +259,9 @@ describe('MessageStatus', () => {
       chatCtx: { client },
       messageCtx: { message: ownMessage, readBy: [generateUser()] },
     });
-    expect(screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(MESSAGE_STATUS_READ_COUNT_TEST_ID),
+    ).not.toBeInTheDocument();
   });
 
   it('renders count if read by 2 other users', async () => {
diff --git a/src/components/Message/__tests__/MessageText.test.js b/src/components/Message/__tests__/MessageText.test.js
index 331ebb505..a049f918b 100644
--- a/src/components/Message/__tests__/MessageText.test.js
+++ b/src/components/Message/__tests__/MessageText.test.js
@@ -52,9 +52,9 @@ function generateAliceMessage(messageOptions) {
 }
 
 async function renderMessageText({
-  customProps = {},
-  channelConfigOverrides = {},
   channelCapabilitiesOverrides = {},
+  channelConfigOverrides = {},
+  customProps = {},
 } = {}) {
   const client = await getTestClientWithUser(alice);
   const channel = generateChannel({
@@ -69,7 +69,10 @@ async function renderMessageText({
     <ChatProvider value={{ client }}>
       <ChannelStateProvider value={{ channel, channelCapabilities, channelConfig }}>
         <ChannelActionProvider
-          value={{ onMentionsClick: onMentionsClickMock, onMentionsHover: onMentionsHoverMock }}
+          value={{
+            onMentionsClick: onMentionsClickMock,
+            onMentionsHover: onMentionsHoverMock,
+          }}
         >
           <TranslationProvider
             value={{
@@ -81,7 +84,7 @@ async function renderMessageText({
             <ComponentProvider
               value={{
                 Attachment,
-                // eslint-disable-next-line react/display-name
+
                 Message: () => <MessageSimple channelConfig={channelConfig} />,
                 reactionOptions: defaultReactionOptions,
               }}
@@ -127,7 +130,9 @@ describe('<MessageText />', () => {
     const message = generateAliceMessage({
       attachments: [attachment, attachment, attachment],
     });
-    const { container, getByTestId } = await renderMessageText({ customProps: { message } });
+    const { container, getByTestId } = await renderMessageText({
+      customProps: { message },
+    });
     expect(getByTestId(messageTextTestId)).toHaveClass(
       'str-chat__message-simple-text-inner--has-attachment',
     );
@@ -137,7 +142,9 @@ describe('<MessageText />', () => {
 
   it('should set emoji css class when message has text that is only emojis', async () => {
     const message = generateAliceMessage({ text: '🤖🤖🤖🤖' });
-    const { container, getByTestId } = await renderMessageText({ customProps: { message } });
+    const { container, getByTestId } = await renderMessageText({
+      customProps: { message },
+    });
     expect(getByTestId(messageTextTestId)).toHaveClass(
       'str-chat__message-simple-text-inner--is-emoji',
     );
@@ -177,7 +184,9 @@ describe('<MessageText />', () => {
 
   it('should inform that message was not sent when message is has type "error"', async () => {
     const message = generateAliceMessage({ type: 'error' });
-    const { container, getByText } = await renderMessageText({ customProps: { message } });
+    const { container, getByText } = await renderMessageText({
+      customProps: { message },
+    });
     expect(getByText('Error · Unsent')).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -185,7 +194,9 @@ describe('<MessageText />', () => {
 
   it('should inform that retry is possible when message has status "failed"', async () => {
     const message = generateAliceMessage({ status: 'failed' });
-    const { container, getByText } = await renderMessageText({ customProps: { message } });
+    const { container, getByText } = await renderMessageText({
+      customProps: { message },
+    });
     expect(getByText('Message Failed · Click to try again')).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -209,7 +220,9 @@ describe('<MessageText />', () => {
   it('render message text', async () => {
     const text = 'Hello, world!';
     const message = generateAliceMessage({ text });
-    const { container, getByText } = await renderMessageText({ customProps: { message } });
+    const { container, getByText } = await renderMessageText({
+      customProps: { message },
+    });
     expect(getByText(text)).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -222,7 +235,9 @@ describe('<MessageText />', () => {
       text,
     });
 
-    const { container, getByText } = await renderMessageText({ customProps: { message } });
+    const { container, getByText } = await renderMessageText({
+      customProps: { message },
+    });
 
     expect(getByText('hello')).toBeInTheDocument();
     const results = await axe(container);
@@ -282,7 +297,7 @@ describe('<MessageText />', () => {
         },
       },
     });
-    // eslint-disable-next-line jest/prefer-called-with
+
     expect(MessageOptionsMock).toHaveBeenCalled();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/src/components/Message/__tests__/MessageTimestamp.test.js b/src/components/Message/__tests__/MessageTimestamp.test.js
index abb18828c..200a44a8b 100644
--- a/src/components/Message/__tests__/MessageTimestamp.test.js
+++ b/src/components/Message/__tests__/MessageTimestamp.test.js
@@ -121,7 +121,8 @@ describe('<MessageTimestamp />', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/MessageTimestamp': '{{ timestamp | timestampFormatter(calendar: false) }}',
+            'timestamp/MessageTimestamp':
+              '{{ timestamp | timestampFormatter(calendar: false) }}',
           },
         }),
       },
@@ -134,7 +135,8 @@ describe('<MessageTimestamp />', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/MessageTimestamp': '{{ timestamp | timestampFormatter(format: h:mmA) }}',
+            'timestamp/MessageTimestamp':
+              '{{ timestamp | timestampFormatter(format: h:mmA) }}',
           },
         }),
       },
@@ -154,7 +156,8 @@ describe('<MessageTimestamp />', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/MessageTimestamp': '{{ timestamp | timestampFormatter(format: h:mmA) }}',
+            'timestamp/MessageTimestamp':
+              '{{ timestamp | timestampFormatter(format: h:mmA) }}',
           },
         }),
       },
@@ -168,7 +171,8 @@ describe('<MessageTimestamp />', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/MessageTimestamp': '{{ timestamp | timestampFormatter(calendar: false) }}',
+            'timestamp/MessageTimestamp':
+              '{{ timestamp | timestampFormatter(calendar: false) }}',
           },
         }),
       },
@@ -189,7 +193,8 @@ describe('<MessageTimestamp />', () => {
       chatProps: {
         i18nInstance: new Streami18n({
           translationsForLanguage: {
-            'timestamp/MessageTimestamp': '{{ timestamp | timestampFormatter(format: h:mmA) }}',
+            'timestamp/MessageTimestamp':
+              '{{ timestamp | timestampFormatter(format: h:mmA) }}',
           },
         }),
       },
diff --git a/src/components/Message/__tests__/utils.test.js b/src/components/Message/__tests__/utils.test.js
index dd4795a50..cf6b7d9ee 100644
--- a/src/components/Message/__tests__/utils.test.js
+++ b/src/components/Message/__tests__/utils.test.js
@@ -94,10 +94,13 @@ describe('Message utils', () => {
     it.each([
       ['empty', []],
       ['false', false],
-    ])('should return no message actions if message actions are %s', (_, messageActions) => {
-      const result = getMessageActions(messageActions, defaultCapabilities);
-      expect(result).toStrictEqual([]);
-    });
+    ])(
+      'should return no message actions if message actions are %s',
+      (_, messageActions) => {
+        const result = getMessageActions(messageActions, defaultCapabilities);
+        expect(result).toStrictEqual([]);
+      },
+    );
 
     it('should return all message actions if actions are set to true', () => {
       const result = getMessageActions(true, defaultCapabilities);
@@ -447,7 +450,9 @@ describe('Message utils', () => {
       expect(result).toStrictEqual(`1, 2, and 3`);
     });
     it('returns "1, 2, 3, 4, 5 and 5 more if read by ten users', () => {
-      const users = [...Array(10).keys()].map((n) => generateUser({ name: (n + 1).toString() }));
+      const users = [...Array(10).keys()].map((n) =>
+        generateUser({ name: (n + 1).toString() }),
+      );
       const result = getReadByTooltipText(
         users,
         mockTranslatorFunction,
@@ -472,7 +477,9 @@ describe('Message utils', () => {
       );
     });
     it('throws error if no tooltipUserNameMapper function provided', () => {
-      expect(() => getReadByTooltipText([], mockTranslatorFunction, client, undefined)).toThrow(
+      expect(() =>
+        getReadByTooltipText([], mockTranslatorFunction, client, undefined),
+      ).toThrow(
         'getReadByTooltipText was called, but tooltipUserNameMapper function is not available',
       );
     });
diff --git a/src/components/Message/hooks/__tests__/useEditHandler.test.js b/src/components/Message/hooks/__tests__/useEditHandler.test.js
index 9a60e8414..3a238d447 100644
--- a/src/components/Message/hooks/__tests__/useEditHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useEditHandler.test.js
@@ -66,7 +66,11 @@ describe('useEditHandler custom hook', () => {
 
   it('should call the custom clear editing handler when one is set', () => {
     const customClearEditingHandler = jest.fn();
-    const renderedHook = renderUseEditHandler(undefined, undefined, customClearEditingHandler);
+    const renderedHook = renderUseEditHandler(
+      undefined,
+      undefined,
+      customClearEditingHandler,
+    );
     expect(customClearEditingHandler).not.toHaveBeenCalled();
     act(() => renderedHook.current.clearEdit(mouseEventMock));
     expect(customClearEditingHandler).toHaveBeenCalledWith(mouseEventMock);
diff --git a/src/components/Message/hooks/__tests__/useFlagHandler.test.js b/src/components/Message/hooks/__tests__/useFlagHandler.test.js
index 8e91ff81b..ac8b68842 100644
--- a/src/components/Message/hooks/__tests__/useFlagHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useFlagHandler.test.js
@@ -38,7 +38,9 @@ async function renderUseHandleFlagHook(
       </ChannelStateProvider>
     </ChatProvider>
   );
-  const { result } = renderHook(() => useFlagHandler(message, notificationOpts), { wrapper });
+  const { result } = renderHook(() => useFlagHandler(message, notificationOpts), {
+    wrapper,
+  });
   return result.current;
 }
 describe('useHandleFlag custom hook', () => {
diff --git a/src/components/Message/hooks/__tests__/useMuteHandler.test.js b/src/components/Message/hooks/__tests__/useMuteHandler.test.js
index e03de5360..194cccb5c 100644
--- a/src/components/Message/hooks/__tests__/useMuteHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useMuteHandler.test.js
@@ -43,7 +43,9 @@ async function renderUseHandleMuteHook(
     </ChatProvider>
   );
 
-  const { result } = renderHook(() => useMuteHandler(message, notificationOpts), { wrapper });
+  const { result } = renderHook(() => useMuteHandler(message, notificationOpts), {
+    wrapper,
+  });
   return result.current;
 }
 
diff --git a/src/components/Message/hooks/__tests__/useOpenThreadHandler.test.js b/src/components/Message/hooks/__tests__/useOpenThreadHandler.test.js
index 84af38d42..b6050529c 100644
--- a/src/components/Message/hooks/__tests__/useOpenThreadHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useOpenThreadHandler.test.js
@@ -11,7 +11,10 @@ const mouseEventMock = {
   preventDefault: jest.fn(() => {}),
 };
 
-function renderUseOpenThreadHandlerHook(message = generateMessage(), openThread = openThreadMock) {
+function renderUseOpenThreadHandlerHook(
+  message = generateMessage(),
+  openThread = openThreadMock,
+) {
   const wrapper = ({ children }) => (
     <ChannelActionProvider value={{ openThread }}>{children}</ChannelActionProvider>
   );
diff --git a/src/components/Message/hooks/__tests__/useReactionHandler.test.js b/src/components/Message/hooks/__tests__/useReactionHandler.test.js
index 8bdf1dcdf..c7fbca99a 100644
--- a/src/components/Message/hooks/__tests__/useReactionHandler.test.js
+++ b/src/components/Message/hooks/__tests__/useReactionHandler.test.js
@@ -47,7 +47,9 @@ async function renderUseReactionHandlerHook(params = {}) {
           ...channelStateContextOverrides,
         }}
       >
-        <ChannelActionProvider value={{ updateMessage }}>{children}</ChannelActionProvider>
+        <ChannelActionProvider value={{ updateMessage }}>
+          {children}
+        </ChannelActionProvider>
       </ChannelStateProvider>
     </ChatProvider>
   );
diff --git a/src/components/Message/hooks/__tests__/useReactionsFetcher.js b/src/components/Message/hooks/__tests__/useReactionsFetcher.js
index 6cffe3e07..45990e46a 100644
--- a/src/components/Message/hooks/__tests__/useReactionsFetcher.js
+++ b/src/components/Message/hooks/__tests__/useReactionsFetcher.js
@@ -3,19 +3,28 @@ import React from 'react';
 
 import { ChannelStateProvider } from '../../../../context/ChannelStateContext';
 import { ChatProvider } from '../../../../context/ChatContext';
-import { generateChannel, generateMessage, getTestClient } from '../../../../mock-builders';
+import {
+  generateChannel,
+  generateMessage,
+  getTestClient,
+} from '../../../../mock-builders';
 import { useReactionsFetcher } from '../useReactionsFetcher';
 
 function renderUseReactionsFetcherHook(client = getTestClient(), notificationOpts) {
   const wrapper = ({ children }) => (
     <ChatProvider value={{ client }}>
-      <ChannelStateProvider value={{ channel: generateChannel() }}>{children}</ChannelStateProvider>
+      <ChannelStateProvider value={{ channel: generateChannel() }}>
+        {children}
+      </ChannelStateProvider>
     </ChatProvider>
   );
 
-  const { result } = renderHook(() => useReactionsFetcher(generateMessage(), notificationOpts), {
-    wrapper,
-  });
+  const { result } = renderHook(
+    () => useReactionsFetcher(generateMessage(), notificationOpts),
+    {
+      wrapper,
+    },
+  );
   return result.current;
 }
 
diff --git a/src/components/Message/hooks/__tests__/useUserRole.test.js b/src/components/Message/hooks/__tests__/useUserRole.test.js
index 7d2aebc02..917005f12 100644
--- a/src/components/Message/hooks/__tests__/useUserRole.test.js
+++ b/src/components/Message/hooks/__tests__/useUserRole.test.js
@@ -67,7 +67,9 @@ describe('useUserRole custom hook', () => {
   ])('should tell if user is admin when user has %s role', async (role, expected) => {
     const adminUser = generateUser({ role });
     const clientMock = await getTestClientWithUser(adminUser);
-    const { isAdmin } = await renderUserRoleHook({ clientContextValue: { client: clientMock } });
+    const { isAdmin } = await renderUserRoleHook({
+      clientContextValue: { client: clientMock },
+    });
     expect(isAdmin).toBe(expected);
   });
 
@@ -185,25 +187,28 @@ describe('useUserRole custom hook', () => {
     ['moderator', true],
     ['channel_moderator', true],
     ['owner', false],
-  ])('should allow user to edit or delete message if user role is %s', async (role, expected) => {
-    const { canDelete, canEdit } = await renderUserRoleHook({
-      channelProps: {
-        state: {
-          membership: {
-            role,
+  ])(
+    'should allow user to edit or delete message if user role is %s',
+    async (role, expected) => {
+      const { canDelete, canEdit } = await renderUserRoleHook({
+        channelProps: {
+          state: {
+            membership: {
+              role,
+            },
           },
         },
-      },
-      channelStateContextValue: {
-        channelCapabilities: {
-          'delete-any-message': expected,
-          'update-any-message': expected,
+        channelStateContextValue: {
+          channelCapabilities: {
+            'delete-any-message': expected,
+            'update-any-message': expected,
+          },
         },
-      },
-    });
-    expect(canEdit).toBe(expected);
-    expect(canDelete).toBe(expected);
-  });
+      });
+      expect(canEdit).toBe(expected);
+      expect(canDelete).toBe(expected);
+    },
+  );
 
   describe('canDo flags', () => {
     it.each([
@@ -278,36 +283,42 @@ describe('useUserRole custom hook', () => {
       [true, bob, true],
       [false, alice, false],
       [false, bob, false],
-    ])('determine flag message permission', async (flagMessagePerm, messageAuthor, expected) => {
-      const message = generateMessage({ user: messageAuthor });
-      const { canFlag } = await renderUserRoleHook({
-        channelStateContextValue: {
-          channelCapabilities: {
-            'flag-message': flagMessagePerm,
+    ])(
+      'determine flag message permission',
+      async (flagMessagePerm, messageAuthor, expected) => {
+        const message = generateMessage({ user: messageAuthor });
+        const { canFlag } = await renderUserRoleHook({
+          channelStateContextValue: {
+            channelCapabilities: {
+              'flag-message': flagMessagePerm,
+            },
           },
-        },
-        message,
-      });
-      expect(canFlag).toBe(expected);
-    });
+          message,
+        });
+        expect(canFlag).toBe(expected);
+      },
+    );
 
     it.each([
       [true, alice, false],
       [true, bob, true],
       [false, alice, false],
       [false, bob, false],
-    ])('determine mute channel permission', async (muteChannelPerm, messageAuthor, expected) => {
-      const message = generateMessage({ user: messageAuthor });
-      const { canMute } = await renderUserRoleHook({
-        channelStateContextValue: {
-          channelCapabilities: {
-            'mute-channel': muteChannelPerm,
+    ])(
+      'determine mute channel permission',
+      async (muteChannelPerm, messageAuthor, expected) => {
+        const message = generateMessage({ user: messageAuthor });
+        const { canMute } = await renderUserRoleHook({
+          channelStateContextValue: {
+            channelCapabilities: {
+              'mute-channel': muteChannelPerm,
+            },
           },
-        },
-        message,
-      });
-      expect(canMute).toBe(expected);
-    });
+          message,
+        });
+        expect(canMute).toBe(expected);
+      },
+    );
 
     it.each([
       [true, true, false],
diff --git a/src/components/Message/hooks/__tests__/userMarkUnreadHandler.test.js b/src/components/Message/hooks/__tests__/userMarkUnreadHandler.test.js
index 64c128896..9cee1468a 100644
--- a/src/components/Message/hooks/__tests__/userMarkUnreadHandler.test.js
+++ b/src/components/Message/hooks/__tests__/userMarkUnreadHandler.test.js
@@ -30,7 +30,9 @@ function renderUseMarkUnreadHandlerHook({ message, notifications } = {}) {
       </ChannelStateProvider>
     </TranslationProvider>
   );
-  const { result } = renderHook(() => useMarkUnreadHandler(message, notifications), { wrapper });
+  const { result } = renderHook(() => useMarkUnreadHandler(message, notifications), {
+    wrapper,
+  });
   return result.current;
 }
 describe('useMarkUnreadHandler', () => {
@@ -77,7 +79,10 @@ describe('useMarkUnreadHandler', () => {
       notifications: notificationsWithSuccess,
     });
     await handleMarkUnread(event);
-    expect(notificationsWithSuccess.notify).toHaveBeenCalledWith(customSuccessString, 'success');
+    expect(notificationsWithSuccess.notify).toHaveBeenCalledWith(
+      customSuccessString,
+      'success',
+    );
   });
 
   it('registers the default error notification if getErrorNotification is missing', async () => {
@@ -103,7 +108,10 @@ describe('useMarkUnreadHandler', () => {
       notifications: notificationsWithError,
     });
     await handleMarkUnread(event);
-    expect(notificationsWithError.notify).toHaveBeenCalledWith(customErrorString, 'error');
+    expect(notificationsWithError.notify).toHaveBeenCalledWith(
+      customErrorString,
+      'error',
+    );
   });
 
   it('does not register the custom error notification if available getErrorNotification does not generate one', async () => {
diff --git a/src/components/Message/hooks/useActionHandler.ts b/src/components/Message/hooks/useActionHandler.ts
index 2ac129890..12c771846 100644
--- a/src/components/Message/hooks/useActionHandler.ts
+++ b/src/components/Message/hooks/useActionHandler.ts
@@ -1,5 +1,8 @@
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 
 import type React from 'react';
 
@@ -17,11 +20,10 @@ export const handleActionWarning = `Action handler was called, but it is missing
 Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 
 export function useActionHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(message?: StreamMessage<StreamChatGenerics>): ActionHandlerReturnType {
-  const { removeMessage, updateMessage } = useChannelActionContext<StreamChatGenerics>(
-    'useActionHandler',
-  );
+  const { removeMessage, updateMessage } =
+    useChannelActionContext<StreamChatGenerics>('useActionHandler');
   const { channel } = useChannelStateContext<StreamChatGenerics>('useActionHandler');
 
   return async (dataOrName, value, event) => {
diff --git a/src/components/Message/hooks/useDeleteHandler.ts b/src/components/Message/hooks/useDeleteHandler.ts
index 69a21158d..bcda02b23 100644
--- a/src/components/Message/hooks/useDeleteHandler.ts
+++ b/src/components/Message/hooks/useDeleteHandler.ts
@@ -11,23 +11,22 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type DeleteMessageNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
   notify?: (notificationText: string, type: 'success' | 'error') => void;
 };
 
 export const useDeleteHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   notifications: DeleteMessageNotifications<StreamChatGenerics> = {},
 ): ReactEventHandler => {
   const { getErrorNotification, notify } = notifications;
 
-  const { deleteMessage, updateMessage } = useChannelActionContext<StreamChatGenerics>(
-    'useDeleteHandler',
-  );
+  const { deleteMessage, updateMessage } =
+    useChannelActionContext<StreamChatGenerics>('useDeleteHandler');
   const { client } = useChatContext<StreamChatGenerics>('useDeleteHandler');
   const { t } = useTranslationContext('useDeleteHandler');
 
diff --git a/src/components/Message/hooks/useFlagHandler.ts b/src/components/Message/hooks/useFlagHandler.ts
index f4ba463c7..c88da6f4f 100644
--- a/src/components/Message/hooks/useFlagHandler.ts
+++ b/src/components/Message/hooks/useFlagHandler.ts
@@ -13,7 +13,7 @@ export const missingUseFlagHandlerParameterWarning =
   'useFlagHandler was called but it is missing one or more necessary parameters.';
 
 export type FlagMessageNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
   getSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
@@ -21,7 +21,7 @@ export type FlagMessageNotifications<
 };
 
 export const useFlagHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   notifications: FlagMessageNotifications<StreamChatGenerics> = {},
@@ -47,7 +47,8 @@ export const useFlagHandler = <
       await client.flagMessage(message.id);
 
       const successMessage =
-        getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message]);
+        getSuccessNotification &&
+        validateAndGetMessage(getSuccessNotification, [message]);
 
       notify(successMessage || t('Message has been successfully flagged'), 'success');
     } catch (e) {
diff --git a/src/components/Message/hooks/useMarkUnreadHandler.ts b/src/components/Message/hooks/useMarkUnreadHandler.ts
index 943187efa..47e06aa59 100644
--- a/src/components/Message/hooks/useMarkUnreadHandler.ts
+++ b/src/components/Message/hooks/useMarkUnreadHandler.ts
@@ -6,7 +6,7 @@ import type { ReactEventHandler } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type MarkUnreadHandlerNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
   getSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
@@ -14,7 +14,7 @@ export type MarkUnreadHandlerNotifications<
 };
 
 export const useMarkUnreadHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   notifications: MarkUnreadHandlerNotifications<StreamChatGenerics> = {},
@@ -35,7 +35,8 @@ export const useMarkUnreadHandler = <
       await channel.markUnread({ message_id: message.id });
       if (!notify) return;
       const successMessage =
-        getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message]);
+        getSuccessNotification &&
+        validateAndGetMessage(getSuccessNotification, [message]);
       if (successMessage) notify(successMessage, 'success');
     } catch (e) {
       if (!notify) return;
diff --git a/src/components/Message/hooks/useMentionsHandler.ts b/src/components/Message/hooks/useMentionsHandler.ts
index 37ad0879e..de2b7cc0f 100644
--- a/src/components/Message/hooks/useMentionsHandler.ts
+++ b/src/components/Message/hooks/useMentionsHandler.ts
@@ -10,15 +10,21 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type CustomMentionHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = (event: React.BaseSyntheticEvent, mentioned_users: UserResponse<StreamChatGenerics>[]) => void;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = (
+  event: React.BaseSyntheticEvent,
+  mentioned_users: UserResponse<StreamChatGenerics>[],
+) => void;
 
 export type MentionedUserEventHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = (event: React.BaseSyntheticEvent, mentionedUsers: UserResponse<StreamChatGenerics>[]) => void;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = (
+  event: React.BaseSyntheticEvent,
+  mentionedUsers: UserResponse<StreamChatGenerics>[],
+) => void;
 
 function createEventHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   fn?: CustomMentionHandler<StreamChatGenerics>,
   message?: StreamMessage<StreamChatGenerics>,
@@ -32,7 +38,7 @@ function createEventHandler<
 }
 
 export const useMentionsHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   customMentionHandler?: {
diff --git a/src/components/Message/hooks/useMessageTextStreaming.ts b/src/components/Message/hooks/useMessageTextStreaming.ts
index d791988c9..0d0f50148 100644
--- a/src/components/Message/hooks/useMessageTextStreaming.ts
+++ b/src/components/Message/hooks/useMessageTextStreaming.ts
@@ -4,7 +4,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { StreamedMessageTextProps } from '../StreamedMessageText';
 
 export type UseMessageTextStreamingProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   StreamedMessageTextProps<StreamChatGenerics>,
   'streamingLetterIntervalMs' | 'renderingLetterCount'
@@ -22,10 +22,10 @@ const DEFAULT_RENDERING_LETTER_COUNT = 2;
  * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
  */
 export const useMessageTextStreaming = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL,
   renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
+  streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL,
   text,
 }: UseMessageTextStreamingProps<StreamChatGenerics>): { streamedMessageText: string } => {
   const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
diff --git a/src/components/Message/hooks/useMuteHandler.ts b/src/components/Message/hooks/useMuteHandler.ts
index 1e4949e1a..4726d546f 100644
--- a/src/components/Message/hooks/useMuteHandler.ts
+++ b/src/components/Message/hooks/useMuteHandler.ts
@@ -1,6 +1,9 @@
 import { isUserMuted, validateAndGetMessage } from '../utils';
 
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
@@ -14,7 +17,7 @@ export const missingUseMuteHandlerParamsWarning =
   'useMuteHandler was called but it is missing one or more necessary parameter.';
 
 export type MuteUserNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (user: UserResponse<StreamChatGenerics>) => string;
   getSuccessNotification?: (user: UserResponse<StreamChatGenerics>) => string;
@@ -22,7 +25,7 @@ export type MuteUserNotifications<
 };
 
 export const useMuteHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   notifications: MuteUserNotifications<StreamChatGenerics> = {},
@@ -46,7 +49,8 @@ export const useMuteHandler = <
         await client.muteUser(message.user.id);
 
         const successMessage =
-          getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message.user]);
+          getSuccessNotification &&
+          validateAndGetMessage(getSuccessNotification, [message.user]);
 
         notify(
           successMessage ||
@@ -57,7 +61,8 @@ export const useMuteHandler = <
         );
       } catch (e) {
         const errorMessage =
-          getErrorNotification && validateAndGetMessage(getErrorNotification, [message.user]);
+          getErrorNotification &&
+          validateAndGetMessage(getErrorNotification, [message.user]);
 
         notify(errorMessage || t('Error muting a user ...'), 'error');
       }
@@ -79,7 +84,8 @@ export const useMuteHandler = <
         }
       } catch (e) {
         const errorMessage =
-          (getErrorNotification && validateAndGetMessage(getErrorNotification, [message.user])) ||
+          (getErrorNotification &&
+            validateAndGetMessage(getErrorNotification, [message.user])) ||
           t('Error unmuting a user ...');
 
         if (typeof errorMessage === 'string') {
diff --git a/src/components/Message/hooks/useOpenThreadHandler.ts b/src/components/Message/hooks/useOpenThreadHandler.ts
index b697300b1..fbb982553 100644
--- a/src/components/Message/hooks/useOpenThreadHandler.ts
+++ b/src/components/Message/hooks/useOpenThreadHandler.ts
@@ -7,7 +7,7 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useOpenThreadHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   customOpenThread?: (
@@ -15,15 +15,16 @@ export const useOpenThreadHandler = <
     event: React.BaseSyntheticEvent,
   ) => void,
 ): ReactEventHandler => {
-  const { openThread: channelOpenThread } = useChannelActionContext<StreamChatGenerics>(
-    'useOpenThreadHandler',
-  );
+  const { openThread: channelOpenThread } =
+    useChannelActionContext<StreamChatGenerics>('useOpenThreadHandler');
 
   const openThread = customOpenThread || channelOpenThread;
 
   return (event) => {
     if (!openThread || !message) {
-      console.warn('Open thread handler was called but it is missing one of its parameters');
+      console.warn(
+        'Open thread handler was called but it is missing one of its parameters',
+      );
       return;
     }
 
diff --git a/src/components/Message/hooks/usePinHandler.ts b/src/components/Message/hooks/usePinHandler.ts
index b0db607b7..fe13927c9 100644
--- a/src/components/Message/hooks/usePinHandler.ts
+++ b/src/components/Message/hooks/usePinHandler.ts
@@ -1,7 +1,10 @@
 import { defaultPinPermissions, validateAndGetMessage } from '../utils';
 
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
@@ -10,7 +13,9 @@ import type { ReactEventHandler } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-export type PinEnabledUserRoles<T extends string = string> = Partial<Record<T, boolean>> & {
+export type PinEnabledUserRoles<T extends string = string> = Partial<
+  Record<T, boolean>
+> & {
   admin?: boolean;
   anonymous?: boolean;
   channel_member?: boolean;
@@ -23,9 +28,10 @@ export type PinEnabledUserRoles<T extends string = string> = Partial<Record<T, b
 };
 
 // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-export type PinPermissions<T extends string = string, U extends string = string> = Partial<
-  Record<T, PinEnabledUserRoles<U>>
-> & {
+export type PinPermissions<
+  T extends string = string,
+  U extends string = string,
+> = Partial<Record<T, PinEnabledUserRoles<U>>> & {
   commerce?: PinEnabledUserRoles<U>;
   gaming?: PinEnabledUserRoles<U>;
   livestream?: PinEnabledUserRoles<U>;
@@ -34,14 +40,14 @@ export type PinPermissions<T extends string = string, U extends string = string>
 };
 
 export type PinMessageNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
   notify?: (notificationText: string, type: 'success' | 'error') => void;
 };
 
 export const usePinHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: StreamMessage<StreamChatGenerics>,
   // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
@@ -51,7 +57,8 @@ export const usePinHandler = <
   const { getErrorNotification, notify } = notifications;
 
   const { updateMessage } = useChannelActionContext<StreamChatGenerics>('usePinHandler');
-  const { channelCapabilities = {} } = useChannelStateContext<StreamChatGenerics>('usePinHandler');
+  const { channelCapabilities = {} } =
+    useChannelStateContext<StreamChatGenerics>('usePinHandler');
   const { client } = useChatContext<StreamChatGenerics>('usePinHandler');
   const { t } = useTranslationContext('usePinHandler');
 
diff --git a/src/components/Message/hooks/useReactionHandler.ts b/src/components/Message/hooks/useReactionHandler.ts
index c493d6e14..8696ce42b 100644
--- a/src/components/Message/hooks/useReactionHandler.ts
+++ b/src/components/Message/hooks/useReactionHandler.ts
@@ -2,7 +2,10 @@ import React, { useCallback } from 'react';
 import throttle from 'lodash.throttle';
 
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 
 import type { Reaction, ReactionResponse } from 'stream-chat';
@@ -15,15 +18,15 @@ export const reactionHandlerWarning = `Reaction handler was called, but it is mi
 Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 
 export const useReactionHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
 ) => {
   const thread = useThreadContext();
-  const { updateMessage } = useChannelActionContext<StreamChatGenerics>('useReactionHandler');
-  const { channel, channelCapabilities } = useChannelStateContext<StreamChatGenerics>(
-    'useReactionHandler',
-  );
+  const { updateMessage } =
+    useChannelActionContext<StreamChatGenerics>('useReactionHandler');
+  const { channel, channelCapabilities } =
+    useChannelStateContext<StreamChatGenerics>('useReactionHandler');
   const { client } = useChatContext<StreamChatGenerics>('useReactionHandler');
 
   const createMessagePreview = useCallback(
@@ -39,7 +42,10 @@ export const useReactionHandler = <
       if (add) {
         const timestamp = new Date().toISOString();
         newReactionGroups[reactionType] = hasReaction
-          ? { ...newReactionGroups[reactionType], count: newReactionGroups[reactionType].count + 1 }
+          ? {
+              ...newReactionGroups[reactionType],
+              count: newReactionGroups[reactionType].count + 1,
+            }
           : {
               count: 1,
               first_reaction_at: timestamp,
@@ -89,7 +95,9 @@ export const useReactionHandler = <
   const toggleReaction = throttle(async (id: string, type: string, add: boolean) => {
     if (!message || !channelCapabilities['send-reaction']) return;
 
-    const newReaction = createReactionPreview(type) as ReactionResponse<StreamChatGenerics>;
+    const newReaction = createReactionPreview(
+      type,
+    ) as ReactionResponse<StreamChatGenerics>;
     const tempMessage = createMessagePreview(add, newReaction, message);
 
     try {
@@ -120,13 +128,17 @@ export const useReactionHandler = <
       return console.warn(reactionHandlerWarning);
     }
 
-    let userExistingReaction = (null as unknown) as ReactionResponse<StreamChatGenerics>;
+    let userExistingReaction = null as unknown as ReactionResponse<StreamChatGenerics>;
 
     if (message.own_reactions) {
       message.own_reactions.forEach((reaction) => {
         // own user should only ever contain the current user id
         // just in case we check to prevent bugs with message updates from breaking reactions
-        if (reaction.user && client.userID === reaction.user.id && reaction.type === reactionType) {
+        if (
+          reaction.user &&
+          client.userID === reaction.user.id &&
+          reaction.type === reactionType
+        ) {
           userExistingReaction = reaction;
         } else if (reaction.user && client.userID !== reaction.user.id) {
           console.warn(
diff --git a/src/components/Message/hooks/useReactionsFetcher.ts b/src/components/Message/hooks/useReactionsFetcher.ts
index cbd50036c..6dad0f1ed 100644
--- a/src/components/Message/hooks/useReactionsFetcher.ts
+++ b/src/components/Message/hooks/useReactionsFetcher.ts
@@ -6,14 +6,14 @@ import { ReactionType } from '../../Reactions/types';
 export const MAX_MESSAGE_REACTIONS_TO_FETCH = 1000;
 
 type FetchMessageReactionsNotifications<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
   notify?: (notificationText: string, type: 'success' | 'error') => void;
 };
 
 export function useReactionsFetcher<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: StreamMessage<StreamChatGenerics>,
   notifications: FetchMessageReactionsNotifications<StreamChatGenerics> = {},
@@ -37,7 +37,7 @@ export function useReactionsFetcher<
 }
 
 async function fetchMessageReactions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   client: StreamChat<StreamChatGenerics>,
   messageId: string,
diff --git a/src/components/Message/hooks/useRetryHandler.ts b/src/components/Message/hooks/useRetryHandler.ts
index 1e370d5b7..fee5fc663 100644
--- a/src/components/Message/hooks/useRetryHandler.ts
+++ b/src/components/Message/hooks/useRetryHandler.ts
@@ -1,15 +1,17 @@
-import { RetrySendMessage, useChannelActionContext } from '../../../context/ChannelActionContext';
+import {
+  RetrySendMessage,
+  useChannelActionContext,
+} from '../../../context/ChannelActionContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useRetryHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   customRetrySendMessage?: RetrySendMessage<StreamChatGenerics>,
 ): RetrySendMessage<StreamChatGenerics> => {
-  const { retrySendMessage: contextRetrySendMessage } = useChannelActionContext<StreamChatGenerics>(
-    'useRetryHandler',
-  );
+  const { retrySendMessage: contextRetrySendMessage } =
+    useChannelActionContext<StreamChatGenerics>('useRetryHandler');
 
   const retrySendMessage = customRetrySendMessage || contextRetrySendMessage;
 
diff --git a/src/components/Message/hooks/useUserHandler.ts b/src/components/Message/hooks/useUserHandler.ts
index 5ed24b355..debb5b237 100644
--- a/src/components/Message/hooks/useUserHandler.ts
+++ b/src/components/Message/hooks/useUserHandler.ts
@@ -7,11 +7,11 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type UserEventHandler<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (event: React.BaseSyntheticEvent, user: User<StreamChatGenerics>) => void;
 
 export const useUserHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
   eventHandlers?: {
diff --git a/src/components/Message/hooks/useUserRole.ts b/src/components/Message/hooks/useUserRole.ts
index b4077b6d5..5497fb658 100644
--- a/src/components/Message/hooks/useUserRole.ts
+++ b/src/components/Message/hooks/useUserRole.ts
@@ -1,25 +1,28 @@
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 import { useChatContext } from '../../../context/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useUserRole = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: StreamMessage<StreamChatGenerics>,
   onlySenderCanEdit?: boolean,
   disableQuotedMessages?: boolean,
 ) => {
-  const { channel, channelCapabilities = {} } = useChannelStateContext<StreamChatGenerics>(
-    'useUserRole',
-  );
+  const { channel, channelCapabilities = {} } =
+    useChannelStateContext<StreamChatGenerics>('useUserRole');
   const { client } = useChatContext<StreamChatGenerics>('useUserRole');
 
   /**
    * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
    * `isAdmin` will be removed in future release. See `channelCapabilities`.
    */
-  const isAdmin = client.user?.role === 'admin' || channel.state.membership.role === 'admin';
+  const isAdmin =
+    client.user?.role === 'admin' || channel.state.membership.role === 'admin';
 
   /**
    * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
diff --git a/src/components/Message/icons.tsx b/src/components/Message/icons.tsx
index 311b56a69..18c89a293 100644
--- a/src/components/Message/icons.tsx
+++ b/src/components/Message/icons.tsx
@@ -53,7 +53,7 @@ export const PinIcon = () => (
 );
 
 export const PinIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   message,
   t,
diff --git a/src/components/Message/renderText/__tests__/renderText.test.js b/src/components/Message/renderText/__tests__/renderText.test.js
index 15be065a7..80e6a240f 100644
--- a/src/components/Message/renderText/__tests__/renderText.test.js
+++ b/src/components/Message/renderText/__tests__/renderText.test.js
@@ -46,7 +46,10 @@ describe(`renderText`, () => {
 
   it('renders custom mention', () => {
     const CustomMention = (props) => (
-      <span className='my-mention' data-node-mentioned-user-id={props.node.mentionedUser.id}>
+      <span
+        className='my-mention'
+        data-node-mentioned-user-id={props.node.mentionedUser.id}
+      >
         {props.children}
       </span>
     );
@@ -156,7 +159,8 @@ describe(`renderText`, () => {
   });
 
   it('allows to merge custom rehype plugins followed by default rehype plugins', () => {
-    const customPlugin = () => (tree) => findAndReplace(tree, [/.*@.*/, () => u('text', '#')]);
+    const customPlugin = () => (tree) =>
+      findAndReplace(tree, [/.*@.*/, () => u('text', '#')]);
     const getRehypePlugins = (defaultPlugins) => [customPlugin, ...defaultPlugins];
     const Markdown = renderText(
       '@username@email.com',
@@ -182,7 +186,8 @@ describe(`renderText`, () => {
   });
 
   it('allows to merge default rehype plugins followed by custom rehype plugins', () => {
-    const customPlugin = () => (tree) => findAndReplace(tree, [/.*@.*/, () => u('text', '#')]);
+    const customPlugin = () => (tree) =>
+      findAndReplace(tree, [/.*@.*/, () => u('text', '#')]);
     const getRehypePlugins = (defaultPlugins) => [...defaultPlugins, customPlugin];
     const Markdown = renderText(
       '@username@email.com',
@@ -237,15 +242,23 @@ describe(`renderText`, () => {
     const customPlugin = () => (tree) =>
       findAndReplace(tree, [new RegExp(strikeThroughText), replace]);
 
-    const getRemarkPluginsFirstCustom = (defaultPlugins) => [customPlugin, ...defaultPlugins];
-    const getRemarkPluginsFirstDefault = (defaultPlugins) => [...defaultPlugins, customPlugin];
-    [getRemarkPluginsFirstCustom, getRemarkPluginsFirstDefault].forEach((getRemarkPlugins) => {
-      const Markdown = renderText(strikeThroughText, [], {
-        getRemarkPlugins,
-      });
-      const { container } = render(Markdown);
-      expect(container.innerHTML).toBe('<p><del>xxx</del></p>');
-    });
+    const getRemarkPluginsFirstCustom = (defaultPlugins) => [
+      customPlugin,
+      ...defaultPlugins,
+    ];
+    const getRemarkPluginsFirstDefault = (defaultPlugins) => [
+      ...defaultPlugins,
+      customPlugin,
+    ];
+    [getRemarkPluginsFirstCustom, getRemarkPluginsFirstDefault].forEach(
+      (getRemarkPlugins) => {
+        const Markdown = renderText(strikeThroughText, [], {
+          getRemarkPlugins,
+        });
+        const { container } = render(Markdown);
+        expect(container.innerHTML).toBe('<p><del>xxx</del></p>');
+      },
+    );
   });
 
   it('allows to render custom elements', () => {
diff --git a/src/components/Message/renderText/componentRenderers/Mention.tsx b/src/components/Message/renderText/componentRenderers/Mention.tsx
index b5dd659fc..06fb7f6c9 100644
--- a/src/components/Message/renderText/componentRenderers/Mention.tsx
+++ b/src/components/Message/renderText/componentRenderers/Mention.tsx
@@ -4,7 +4,7 @@ import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export type MentionProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = PropsWithChildren<{
   node: {
     mentionedUser: UserResponse<StreamChatGenerics>;
@@ -12,7 +12,7 @@ export type MentionProps<
 }>;
 
 export const Mention = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   node: { mentionedUser },
diff --git a/src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts b/src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts
index 55ffd7e82..ff942708c 100644
--- a/src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts
+++ b/src/components/Message/renderText/rehypePlugins/mentionsMarkdownPlugin.ts
@@ -8,65 +8,65 @@ import type { Element } from 'react-markdown/lib/ast-to-react';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types';
 
-export const mentionsMarkdownPlugin = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  mentioned_users: UserResponse<StreamChatGenerics>[],
-) => () => {
-  const mentioned_usernames = mentioned_users
-    .map((user) => user.name || user.id)
-    .filter(Boolean)
-    .map(escapeRegExp);
+export const mentionsMarkdownPlugin =
+  <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+    mentioned_users: UserResponse<StreamChatGenerics>[],
+  ) =>
+  () => {
+    const mentioned_usernames = mentioned_users
+      .map((user) => user.name || user.id)
+      .filter(Boolean)
+      .map(escapeRegExp);
 
-  const mentionedUsersRegex = new RegExp(
-    mentioned_usernames.map((username) => `@${username}`).join('|'),
-    'g',
-  );
-
-  const replace: ReplaceFunction = (match) => {
-    const usernameOrId = match.replace('@', '');
-    const user = mentioned_users.find(
-      ({ id, name }) => name === usernameOrId || id === usernameOrId,
+    const mentionedUsersRegex = new RegExp(
+      mentioned_usernames.map((username) => `@${username}`).join('|'),
+      'g',
     );
-    return u('element', { mentionedUser: user, properties: {}, tagName: 'mention' }, [
-      u('text', match),
-    ]);
-  };
 
-  const transform = (tree: Nodes) => {
-    if (!mentioned_usernames.length) return;
+    const replace: ReplaceFunction = (match) => {
+      const usernameOrId = match.replace('@', '');
+      const user = mentioned_users.find(
+        ({ id, name }) => name === usernameOrId || id === usernameOrId,
+      );
+      return u('element', { mentionedUser: user, properties: {}, tagName: 'mention' }, [
+        u('text', match),
+      ]);
+    };
 
-    // handles special cases of mentions where user.name is an e-mail
-    // Remark GFM translates all e-mail-like text nodes to links creating
-    // two separate child nodes "@" and "your.name@as.email" instead of
-    // keeping it as one text node with value "@your.name@as.email"
-    // this piece finds these two separated nodes and merges them together
-    // before "replace" function takes over
-    visit(tree, (node, index, parent) => {
-      if (typeof index === 'undefined') return;
-      if (!parent) return;
+    const transform = (tree: Nodes) => {
+      if (!mentioned_usernames.length) return;
 
-      const nextChild = parent.children.at(index + 1) as Element;
-      const nextChildHref = nextChild?.properties?.href as string | undefined;
+      // handles special cases of mentions where user.name is an e-mail
+      // Remark GFM translates all e-mail-like text nodes to links creating
+      // two separate child nodes "@" and "your.name@as.email" instead of
+      // keeping it as one text node with value "@your.name@as.email"
+      // this piece finds these two separated nodes and merges them together
+      // before "replace" function takes over
+      visit(tree, (node, index, parent) => {
+        if (typeof index === 'undefined') return;
+        if (!parent) return;
 
-      if (
-        node.type === 'text' &&
-        // text value has to have @ sign at the end of the string
-        // and no other characters except whitespace can precede it
-        // valid cases:   "text @", "@", " @"
-        // invalid cases: "text@", "@text",
-        /.?\s?@$|^@$/.test(node.value) &&
-        nextChildHref?.startsWith('mailto:')
-      ) {
-        const newTextValue = node.value.replace(/@$/, '');
-        const username = nextChildHref.replace('mailto:', '');
-        parent.children[index] = u('text', newTextValue);
-        parent.children[index + 1] = u('text', `@${username}`);
-      }
-    });
+        const nextChild = parent.children.at(index + 1) as Element;
+        const nextChildHref = nextChild?.properties?.href as string | undefined;
 
-    findAndReplace(tree, [mentionedUsersRegex, replace]);
-  };
+        if (
+          node.type === 'text' &&
+          // text value has to have @ sign at the end of the string
+          // and no other characters except whitespace can precede it
+          // valid cases:   "text @", "@", " @"
+          // invalid cases: "text@", "@text",
+          /.?\s?@$|^@$/.test(node.value) &&
+          nextChildHref?.startsWith('mailto:')
+        ) {
+          const newTextValue = node.value.replace(/@$/, '');
+          const username = nextChildHref.replace('mailto:', '');
+          parent.children[index] = u('text', newTextValue);
+          parent.children[index + 1] = u('text', `@${username}`);
+        }
+      });
 
-  return transform;
-};
+      findAndReplace(tree, [mentionedUsersRegex, replace]);
+    };
+
+    return transform;
+  };
diff --git a/src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts b/src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts
index 26193f7ae..9965950e6 100644
--- a/src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts
+++ b/src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts
@@ -18,8 +18,9 @@ const visitor: Visitor = (node, index, parent) => {
   const countTruncatedLineBreaks = ownStartLine - prevEndLine - 1;
   if (countTruncatedLineBreaks < 1) return;
 
-  const lineBreaks = Array.from<unknown, Break>({ length: countTruncatedLineBreaks }, () =>
-    u('break', { tagName: 'br' }),
+  const lineBreaks = Array.from<unknown, Break>(
+    { length: countTruncatedLineBreaks },
+    () => u('break', { tagName: 'br' }),
   );
 
   parent.children = [
diff --git a/src/components/Message/renderText/renderText.tsx b/src/components/Message/renderText/renderText.tsx
index 7d8e29c75..452ca6b07 100644
--- a/src/components/Message/renderText/renderText.tsx
+++ b/src/components/Message/renderText/renderText.tsx
@@ -15,9 +15,13 @@ import { ErrorBoundary } from '../../UtilityComponents';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export type RenderTextPluginConfigurator = (defaultPlugins: PluggableList) => PluggableList;
+export type RenderTextPluginConfigurator = (
+  defaultPlugins: PluggableList,
+) => PluggableList;
 
-export const defaultAllowedTagNames: Array<keyof JSX.IntrinsicElements | 'emoji' | 'mention'> = [
+export const defaultAllowedTagNames: Array<
+  keyof JSX.IntrinsicElements | 'emoji' | 'mention'
+> = [
   'html',
   'text',
   'br',
@@ -60,9 +64,11 @@ function encodeDecode(url: string) {
   }
 }
 
-const urlTransform = (uri: string) => (uri.startsWith('app://') ? uri : uriTransformer(uri));
+const urlTransform = (uri: string) =>
+  uri.startsWith('app://') ? uri : uriTransformer(uri);
 
-const getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) => plugins;
+const getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) =>
+  plugins;
 
 export const markDownRenderers: RenderTextOptions['customMarkDownRenderers'] = {
   a: Anchor,
@@ -71,7 +77,7 @@ export const markDownRenderers: RenderTextOptions['customMarkDownRenderers'] = {
 };
 
 export type RenderTextOptions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   allowedTagNames?: Array<
     keyof JSX.IntrinsicElements | 'emoji' | 'mention' | (string & {})
@@ -86,7 +92,7 @@ export type RenderTextOptions<
 };
 
 export const renderText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   text?: string,
   mentionedUsers?: UserResponse<StreamChatGenerics>[],
@@ -120,7 +126,9 @@ export const renderText = <
 
           if (!strippedHref || !strippedText) return false;
 
-          return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
+          return (
+            strippedHref.includes(strippedText) || strippedText.includes(strippedHref)
+          );
         });
 
       if (noParsingNeeded.length > 0 || linkIsInBlock) return;
@@ -133,12 +141,15 @@ export const renderText = <
         if (type === 'email' && mentionedUsers) {
           const emailMatchesWithName = mentionedUsers.some((u) => u.name === value);
           if (emailMatchesWithName) {
-            newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), (match, position) => {
-              const isMention = newText.charAt(position - 1) === '@';
-              // in case of mention, we leave the match in its original form,
-              // and we let `mentionsMarkdownPlugin` to do its job
-              return isMention ? match : `[${match}](${encodeDecode(href)})`;
-            });
+            newText = newText.replace(
+              new RegExp(escapeRegExp(value), 'g'),
+              (match, position) => {
+                const isMention = newText.charAt(position - 1) === '@';
+                // in case of mention, we leave the match in its original form,
+                // and we let `mentionsMarkdownPlugin` to do its job
+                return isMention ? match : `[${match}](${encodeDecode(href)})`;
+              },
+            );
 
             return;
           }
diff --git a/src/components/Message/types.ts b/src/components/Message/types.ts
index 961c92c19..fb991e1af 100644
--- a/src/components/Message/types.ts
+++ b/src/components/Message/types.ts
@@ -20,7 +20,7 @@ export type ReactEventHandler = (event: React.BaseSyntheticEvent) => Promise<voi
 
 export type MessageProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = {
   /** The message object */
   message: StreamMessage<StreamChatGenerics>;
@@ -41,17 +41,29 @@ export type MessageProps<
   /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string  */
   formatDate?: (date: Date) => string;
   /** Function that returns the notification text to be displayed when a delete message request fails */
-  getDeleteMessageErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getDeleteMessageErrorNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when loading message reactions fails */
-  getFetchReactionsErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getFetchReactionsErrorNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when a flag message request fails */
-  getFlagMessageErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getFlagMessageErrorNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when a flag message request succeeds */
-  getFlagMessageSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getFlagMessageSuccessNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when mark channel messages unread request fails */
-  getMarkMessageUnreadErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getMarkMessageUnreadErrorNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when mark channel messages unread request succeeds */
-  getMarkMessageUnreadSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+  getMarkMessageUnreadSuccessNotification?: (
+    message: StreamMessage<StreamChatGenerics>,
+  ) => string;
   /** Function that returns the notification text to be displayed when a mute user request fails */
   getMuteUserErrorNotification?: (user: UserResponse<StreamChatGenerics>) => string;
   /** Function that returns the notification text to be displayed when a mute user request succeeds */
@@ -113,11 +125,11 @@ export type MessageProps<
 };
 
 export type MessageUIComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<MessageContextValue<StreamChatGenerics>>;
 
 export type PinIndicatorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   message?: StreamMessage<StreamChatGenerics>;
   t?: TFunction;
diff --git a/src/components/Message/utils.tsx b/src/components/Message/utils.tsx
index 914b3bfc8..fa8ee667e 100644
--- a/src/components/Message/utils.tsx
+++ b/src/components/Message/utils.tsx
@@ -40,7 +40,7 @@ export const validateAndGetMessage = <T extends unknown[]>(
  * Tell if the owner of the current message is muted
  */
 export const isUserMuted = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: StreamMessage<StreamChatGenerics>,
   mutes?: Mute<StreamChatGenerics>[],
@@ -218,7 +218,7 @@ export const showMessageActionsBox = (
 ) => shouldRenderMessageActions({ inThread, messageActions: actions });
 
 export const shouldRenderMessageActions = <
-  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   customMessageActions,
   CustomMessageActionsList,
@@ -240,7 +240,8 @@ export const shouldRenderMessageActions = <
 
   if (
     inThread &&
-    messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action)).length === 0
+    messageActions.filter((action) => !ACTIONS_NOT_WORKING_IN_THREAD.includes(action))
+      .length === 0
   ) {
     return false;
   }
@@ -265,7 +266,7 @@ export const shouldRenderMessageActions = <
 };
 
 function areMessagesEqual<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   prevMessage: StreamMessage<StreamChatGenerics>,
   nextMessage: StreamMessage<StreamChatGenerics>,
@@ -291,7 +292,7 @@ function areMessagesEqual<
 }
 
 export const areMessagePropsEqual = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   prevProps: MessageProps<StreamChatGenerics> & {
     mutes?: Mute<StreamChatGenerics>[];
@@ -335,7 +336,7 @@ export const areMessagePropsEqual = <
 };
 
 export const areMessageUIPropsEqual = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   prevProps: MessageContextValue<StreamChatGenerics> & {
     showDetailedReactions?: boolean;
@@ -369,19 +370,19 @@ export const areMessageUIPropsEqual = <
 };
 
 export const messageHasReactions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
 ) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
 
 export const messageHasAttachments = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: StreamMessage<StreamChatGenerics>,
 ) => !!message?.attachments && !!message.attachments.length;
 
 export const getImages = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: MessageResponse<StreamChatGenerics>,
 ) => {
@@ -392,7 +393,7 @@ export const getImages = <
 };
 
 export const getNonImageAttachments = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message?: MessageResponse<StreamChatGenerics>,
 ) => {
@@ -416,7 +417,7 @@ export interface TooltipUsernameMapper {
 export const mapToUserNameOrId: TooltipUsernameMapper = (user) => user.name || user.id;
 
 export const getReadByTooltipText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   users: UserResponse<StreamChatGenerics>[],
   t: TFunction,
@@ -426,7 +427,9 @@ export const getReadByTooltipText = <
   let outStr = '';
 
   if (!t) {
-    throw new Error('getReadByTooltipText was called, but translation function is not available');
+    throw new Error(
+      'getReadByTooltipText was called, but translation function is not available',
+    );
   }
 
   if (!tooltipUserNameMapper) {
@@ -482,16 +485,19 @@ export const isOnlyEmojis = (text?: string) => {
 };
 
 export const isMessageBounced = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  message: Pick<StreamMessage<StreamChatGenerics>, 'type' | 'moderation' | 'moderation_details'>,
+  message: Pick<
+    StreamMessage<StreamChatGenerics>,
+    'type' | 'moderation' | 'moderation_details'
+  >,
 ) =>
   message.type === 'error' &&
   (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
     message.moderation?.action === 'bounce');
 
 export const isMessageEdited = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'>,
 ) => !!message.message_text_updated_at;
diff --git a/src/components/MessageActions/CustomMessageActionsList.tsx b/src/components/MessageActions/CustomMessageActionsList.tsx
index 258e346b7..15d4fd9c4 100644
--- a/src/components/MessageActions/CustomMessageActionsList.tsx
+++ b/src/components/MessageActions/CustomMessageActionsList.tsx
@@ -6,14 +6,14 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type CustomMessageActionsListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   message: StreamMessage<StreamChatGenerics>;
   customMessageActions?: CustomMessageActions<StreamChatGenerics>;
 };
 
 export const CustomMessageActionsList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: CustomMessageActionsListProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
index ecb4a1ad5..02d4458e5 100644
--- a/src/components/MessageActions/MessageActions.tsx
+++ b/src/components/MessageActions/MessageActions.tsx
@@ -23,7 +23,7 @@ type MessageContextPropsToPick =
   | 'message';
 
 export type MessageActionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<Pick<MessageContextValue<StreamChatGenerics>, MessageContextPropsToPick>> & {
   /* Custom component rendering the icon used in message actions button. This button invokes the message actions menu. */
   ActionsIcon?: React.ComponentType<IconProps>;
@@ -36,7 +36,7 @@ export type MessageActionsProps<
 };
 
 export const MessageActions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageActionsProps<StreamChatGenerics>,
 ) => {
@@ -70,7 +70,8 @@ export const MessageActions = <
     threadList,
   } = useMessageContext<StreamChatGenerics>('MessageActions');
 
-  const { CustomMessageActionsList } = useComponentContext<StreamChatGenerics>('MessageActions');
+  const { CustomMessageActionsList } =
+    useComponentContext<StreamChatGenerics>('MessageActions');
 
   const { t } = useTranslationContext('MessageActions');
 
@@ -147,7 +148,9 @@ export type MessageActionsWrapperProps = {
   toggleOpen?: () => void;
 };
 
-export const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperProps>) => {
+export const MessageActionsWrapper = (
+  props: PropsWithChildren<MessageActionsWrapperProps>,
+) => {
   const { children, customWrapperClass, inline, toggleOpen } = props;
 
   const defaultWrapperClass = clsx(
diff --git a/src/components/MessageActions/MessageActionsBox.tsx b/src/components/MessageActions/MessageActionsBox.tsx
index 5f85a3f27..fcbcb935c 100644
--- a/src/components/MessageActions/MessageActionsBox.tsx
+++ b/src/components/MessageActions/MessageActionsBox.tsx
@@ -25,7 +25,7 @@ type PropsDrilledToMessageActionsBox =
   | 'handlePin';
 
 export type MessageActionsBoxProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, PropsDrilledToMessageActionsBox> & {
   isUserMuted: () => boolean;
   mine: boolean;
@@ -33,7 +33,7 @@ export type MessageActionsBoxProps<
 } & ComponentProps<'div'>;
 
 const UnMemoizedMessageActionsBox = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageActionsBoxProps<StreamChatGenerics>,
 ) => {
@@ -53,13 +53,12 @@ const UnMemoizedMessageActionsBox = <
     ...restDivProps
   } = props;
 
-  const {
-    CustomMessageActionsList = DefaultCustomMessageActionsList,
-  } = useComponentContext<StreamChatGenerics>('MessageActionsBox');
-  const { setQuotedMessage } = useChannelActionContext<StreamChatGenerics>('MessageActionsBox');
-  const { customMessageActions, message, threadList } = useMessageContext<StreamChatGenerics>(
-    'MessageActionsBox',
-  );
+  const { CustomMessageActionsList = DefaultCustomMessageActionsList } =
+    useComponentContext<StreamChatGenerics>('MessageActionsBox');
+  const { setQuotedMessage } =
+    useChannelActionContext<StreamChatGenerics>('MessageActionsBox');
+  const { customMessageActions, message, threadList } =
+    useMessageContext<StreamChatGenerics>('MessageActionsBox');
 
   const { t } = useTranslationContext('MessageActionsBox');
 
@@ -92,7 +91,10 @@ const UnMemoizedMessageActionsBox = <
         className='str-chat__message-actions-list'
         role='listbox'
       >
-        <CustomMessageActionsList customMessageActions={customMessageActions} message={message} />
+        <CustomMessageActionsList
+          customMessageActions={customMessageActions}
+          message={message}
+        />
         {messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (
           <button
             aria-selected='false'
@@ -113,16 +115,18 @@ const UnMemoizedMessageActionsBox = <
             {!message.pinned ? t<string>('Pin') : t<string>('Unpin')}
           </button>
         )}
-        {messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1 && !threadList && !!message.id && (
-          <button
-            aria-selected='false'
-            className={buttonClassName}
-            onClick={handleMarkUnread}
-            role='option'
-          >
-            {t<string>('Mark as unread')}
-          </button>
-        )}
+        {messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1 &&
+          !threadList &&
+          !!message.id && (
+            <button
+              aria-selected='false'
+              className={buttonClassName}
+              onClick={handleMarkUnread}
+              role='option'
+            >
+              {t<string>('Mark as unread')}
+            </button>
+          )}
         {messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (
           <button
             aria-selected='false'
diff --git a/src/components/MessageActions/__tests__/MessageActions.test.js b/src/components/MessageActions/__tests__/MessageActions.test.js
index 536313d2d..ebb91a820 100644
--- a/src/components/MessageActions/__tests__/MessageActions.test.js
+++ b/src/components/MessageActions/__tests__/MessageActions.test.js
@@ -14,7 +14,11 @@ import {
   TranslationProvider,
 } from '../../../context';
 
-import { generateMessage, getTestClient, mockTranslationContext } from '../../../mock-builders';
+import {
+  generateMessage,
+  getTestClient,
+  mockTranslationContext,
+} from '../../../mock-builders';
 
 jest.mock('../MessageActionsBox', () => ({
   MessageActionsBox: jest.fn(() => <div />),
@@ -208,7 +212,10 @@ describe('<MessageActions /> component', () => {
     expect(document.removeEventListener).not.toHaveBeenCalled();
     await toggleOpenMessageActions();
     unmount();
-    expect(document.removeEventListener).toHaveBeenCalledWith('keyup', expect.any(Function));
+    expect(document.removeEventListener).toHaveBeenCalledWith(
+      'keyup',
+      expect.any(Function),
+    );
     removeEventListener.mockClear();
   });
 
diff --git a/src/components/MessageActions/__tests__/MessageActionsBox.test.js b/src/components/MessageActions/__tests__/MessageActionsBox.test.js
index 499c91eb7..3577edb9c 100644
--- a/src/components/MessageActions/__tests__/MessageActionsBox.test.js
+++ b/src/components/MessageActions/__tests__/MessageActionsBox.test.js
@@ -57,7 +57,10 @@ async function renderComponent(boxProps, messageContext = {}) {
                   message: boxProps.message,
                 }}
               >
-                <MessageActionsBox {...boxProps} getMessageActions={getMessageActionsMock} />
+                <MessageActionsBox
+                  {...boxProps}
+                  getMessageActions={getMessageActionsMock}
+                />
               </MessageProvider>
             </DialogManagerProvider>
           </ChannelActionProvider>
@@ -247,7 +250,9 @@ describe('MessageActionsBox', () => {
       } = await initClientWithChannels({
         channelsData: [
           {
-            channel: { own_capabilities: own_capabilities.filter((c) => c !== 'read-events') },
+            channel: {
+              own_capabilities: own_capabilities.filter((c) => c !== 'read-events'),
+            },
             messages: [message],
             read,
           },
@@ -399,8 +404,16 @@ describe('MessageActionsBox', () => {
           <Chat client={client}>
             <Channel channel={channel}>
               <DialogManagerProvider id='message-actions-box-dialog-manager'>
-                <Message lastReceivedId={otherMsg.id} message={message} threadList={false} />
-                <Message lastReceivedId={otherMsg.id} message={otherMsg} threadList={false} />
+                <Message
+                  lastReceivedId={otherMsg.id}
+                  message={message}
+                  threadList={false}
+                />
+                <Message
+                  lastReceivedId={otherMsg.id}
+                  message={otherMsg}
+                  threadList={false}
+                />
               </DialogManagerProvider>
             </Channel>
           </Chat>,
@@ -408,13 +421,13 @@ describe('MessageActionsBox', () => {
       });
       await toggleOpenMessageActions(0);
       let boxes = screen.getAllByTestId('message-actions-box');
-      // eslint-disable-next-line jest-dom/prefer-in-document
+
       expect(boxes).toHaveLength(1);
       expect(boxes[0]).toHaveTextContent(ACTION_TEXT);
 
       await toggleOpenMessageActions(1);
       boxes = screen.getAllByTestId('message-actions-box');
-      // eslint-disable-next-line jest-dom/prefer-in-document
+
       expect(boxes).toHaveLength(1);
       expect(boxes[0]).toHaveTextContent(ACTION_TEXT);
     });
diff --git a/src/components/MessageActions/hooks/useMessageActionsBoxPopper.ts b/src/components/MessageActions/hooks/useMessageActionsBoxPopper.ts
index 5c7a1d73c..4d9bd011f 100644
--- a/src/components/MessageActions/hooks/useMessageActionsBoxPopper.ts
+++ b/src/components/MessageActions/hooks/useMessageActionsBoxPopper.ts
@@ -14,20 +14,24 @@ export function useMessageActionsBoxPopper<T extends HTMLElement>({
   referenceElement,
 }: MessageActionsBoxPopperOptions) {
   const popperElementRef = useRef<T>(null);
-  const { attributes, styles, update } = usePopper(referenceElement, popperElementRef.current, {
-    modifiers: [
-      {
-        name: 'eventListeners',
-        options: {
-          // It's not safe to update popper position on resize and scroll, since popper's
-          // reference element might not be visible at the time.
-          resize: false,
-          scroll: false,
+  const { attributes, styles, update } = usePopper(
+    referenceElement,
+    popperElementRef.current,
+    {
+      modifiers: [
+        {
+          name: 'eventListeners',
+          options: {
+            // It's not safe to update popper position on resize and scroll, since popper's
+            // reference element might not be visible at the time.
+            resize: false,
+            scroll: false,
+          },
         },
-      },
-    ],
-    placement,
-  });
+      ],
+      placement,
+    },
+  );
 
   useEffect(() => {
     if (open) {
diff --git a/src/components/MessageBounce/MessageBouncePrompt.tsx b/src/components/MessageBounce/MessageBouncePrompt.tsx
index 805dcb156..efed01756 100644
--- a/src/components/MessageBounce/MessageBouncePrompt.tsx
+++ b/src/components/MessageBounce/MessageBouncePrompt.tsx
@@ -8,11 +8,10 @@ import type { ModalProps } from '../Modal';
 export type MessageBouncePromptProps = PropsWithChildren<Pick<ModalProps, 'onClose'>>;
 
 export function MessageBouncePrompt<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({ children, onClose }: MessageBouncePromptProps) {
-  const { handleDelete, handleEdit, handleRetry } = useMessageBounceContext<StreamChatGenerics>(
-    'MessageBouncePrompt',
-  );
+  const { handleDelete, handleEdit, handleRetry } =
+    useMessageBounceContext<StreamChatGenerics>('MessageBouncePrompt');
   const { t } = useTranslationContext('MessageBouncePrompt');
 
   function createHandler(
diff --git a/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx b/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
index 682244973..8851c4b71 100644
--- a/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
@@ -29,7 +29,7 @@ import { useMessageInputContext } from '../../../context';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type AttachmentPreviewListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   AudioAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
   FileAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
@@ -42,7 +42,7 @@ export type AttachmentPreviewListProps<
 };
 
 export const AttachmentPreviewList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   AudioAttachmentPreview = DefaultFilePreview,
   FileAttachmentPreview = DefaultFilePreview,
@@ -51,11 +51,8 @@ export const AttachmentPreviewList = <
   VideoAttachmentPreview = DefaultFilePreview,
   VoiceRecordingPreview = DefaultVoiceRecordingPreview,
 }: AttachmentPreviewListProps<StreamChatGenerics>) => {
-  const {
-    attachments,
-    removeAttachments,
-    uploadAttachment,
-  } = useMessageInputContext<StreamChatGenerics>('AttachmentPreviewList');
+  const { attachments, removeAttachments, uploadAttachment } =
+    useMessageInputContext<StreamChatGenerics>('AttachmentPreviewList');
 
   return (
     <div className='str-chat__attachment-preview-list'>
diff --git a/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
index 3f7853bbd..7fd2793b3 100644
--- a/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
@@ -16,14 +16,17 @@ type FileLikeAttachment = {
 
 export type FileAttachmentPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = AttachmentPreviewProps<
-  LocalAttachmentCast<FileLikeAttachment, LocalAttachmentUploadMetadata & CustomLocalMetadata>,
+  LocalAttachmentCast<
+    FileLikeAttachment,
+    LocalAttachmentUploadMetadata & CustomLocalMetadata
+  >,
   StreamChatGenerics
 >;
 
 export const FileAttachmentPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   handleRetry,
@@ -31,7 +34,10 @@ export const FileAttachmentPreview = <
 }: FileAttachmentPreviewProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext('FilePreview');
   return (
-    <div className='str-chat__attachment-preview-file' data-testid='attachment-preview-file'>
+    <div
+      className='str-chat__attachment-preview-file'
+      data-testid='attachment-preview-file'
+    >
       <div className='str-chat__attachment-preview-file-icon'>
         <FileIcon filename={attachment.title} mimeType={attachment.mime_type} />
       </div>
@@ -42,7 +48,8 @@ export const FileAttachmentPreview = <
         data-testid='file-preview-item-delete-button'
         disabled={attachment.localMetadata?.uploadState === 'uploading'}
         onClick={() =>
-          attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
+          attachment.localMetadata?.id &&
+          removeAttachments([attachment.localMetadata?.id])
         }
       >
         <CloseIcon />
@@ -62,19 +69,20 @@ export const FileAttachmentPreview = <
         <div className='str-chat__attachment-preview-file-name' title={attachment.title}>
           {attachment.title}
         </div>
-        {attachment.localMetadata?.uploadState === 'finished' && !!attachment.asset_url && (
-          <a
-            aria-label={t('aria/Download attachment')}
-            className='str-chat__attachment-preview-file-download'
-            download
-            href={attachment.asset_url}
-            rel='noreferrer'
-            target='_blank'
-            title={t('Download attachment {{ name }}', { name: attachment.title })}
-          >
-            <DownloadIcon />
-          </a>
-        )}
+        {attachment.localMetadata?.uploadState === 'finished' &&
+          !!attachment.asset_url && (
+            <a
+              aria-label={t('aria/Download attachment')}
+              className='str-chat__attachment-preview-file-download'
+              download
+              href={attachment.asset_url}
+              rel='noreferrer'
+              target='_blank'
+              title={t('Download attachment {{ name }}', { name: attachment.title })}
+            >
+              <DownloadIcon />
+            </a>
+          )}
         {attachment.localMetadata?.uploadState === 'uploading' && (
           <LoadingIndicatorIcon size={17} />
         )}
diff --git a/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
index 6c7186933..758b976d5 100644
--- a/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
@@ -9,14 +9,14 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type ImageAttachmentPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = AttachmentPreviewProps<
   LocalImageAttachment<StreamChatGenerics, CustomLocalMetadata>,
   StreamChatGenerics
 >;
 
 export const ImageAttachmentPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   handleRetry,
diff --git a/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
index 1f7f12a4d..97720daca 100644
--- a/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
@@ -8,14 +8,14 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type UnsupportedAttachmentPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = AttachmentPreviewProps<
   AnyLocalAttachment<StreamChatGenerics, CustomLocalMetadata>,
   StreamChatGenerics
 >;
 
 export const UnsupportedAttachmentPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   handleRetry,
@@ -37,7 +37,8 @@ export const UnsupportedAttachmentPreview = <
         data-testid='file-preview-item-delete-button'
         disabled={attachment.localMetadata?.uploadState === 'uploading'}
         onClick={() =>
-          attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
+          attachment.localMetadata?.id &&
+          removeAttachments([attachment.localMetadata?.id])
         }
       >
         <CloseIcon />
@@ -57,17 +58,18 @@ export const UnsupportedAttachmentPreview = <
         <div className='str-chat__attachment-preview-title' title={title}>
           {title}
         </div>
-        {attachment.localMetadata?.uploadState === 'finished' && !!attachment.asset_url && (
-          <a
-            className='str-chat__attachment-preview-file-download'
-            download
-            href={attachment.asset_url}
-            rel='noreferrer'
-            target='_blank'
-          >
-            <DownloadIcon />
-          </a>
-        )}
+        {attachment.localMetadata?.uploadState === 'finished' &&
+          !!attachment.asset_url && (
+            <a
+              className='str-chat__attachment-preview-file-download'
+              download
+              href={attachment.asset_url}
+              rel='noreferrer'
+              target='_blank'
+            >
+              <DownloadIcon />
+            </a>
+          )}
         {attachment.localMetadata?.uploadState === 'uploading' && (
           <LoadingIndicatorIcon size={17} />
         )}
diff --git a/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
index 1a4773d4e..e761fe4e2 100644
--- a/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
+++ b/src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
@@ -10,14 +10,14 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type VoiceRecordingPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = AttachmentPreviewProps<
   LocalVoiceRecordingAttachment<StreamChatGenerics, CustomLocalMetadata>,
   StreamChatGenerics
 >;
 
 export const VoiceRecordingPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachment,
   handleRetry,
@@ -33,7 +33,11 @@ export const VoiceRecordingPreview = <
       data-testid='attachment-preview-voice-recording'
     >
       <audio ref={audioRef}>
-        <source data-testid='audio-source' src={attachment.asset_url} type={attachment.mime_type} />
+        <source
+          data-testid='audio-source'
+          src={attachment.asset_url}
+          type={attachment.mime_type}
+        />
       </audio>
       <PlayButton isPlaying={isPlaying} onClick={togglePlay} />
 
diff --git a/src/components/MessageInput/AttachmentPreviewList/types.ts b/src/components/MessageInput/AttachmentPreviewList/types.ts
index 86ea32514..f5c398325 100644
--- a/src/components/MessageInput/AttachmentPreviewList/types.ts
+++ b/src/components/MessageInput/AttachmentPreviewList/types.ts
@@ -3,7 +3,7 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 export type AttachmentPreviewProps<
   A extends LocalAttachment,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachment: A;
   handleRetry: (
diff --git a/src/components/MessageInput/AttachmentSelector.tsx b/src/components/MessageInput/AttachmentSelector.tsx
index 4203bae2b..9446aabd8 100644
--- a/src/components/MessageInput/AttachmentSelector.tsx
+++ b/src/components/MessageInput/AttachmentSelector.tsx
@@ -1,5 +1,12 @@
 import { nanoid } from 'nanoid';
-import React, { ElementRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  ElementRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
@@ -45,7 +52,12 @@ export const SimpleAttachmentSelector = () => {
   return (
     <div className='str-chat__file-input-container' data-testid='file-upload-button'>
       <UploadFileInput id={id} ref={inputRef} />
-      <label className='str-chat__file-input-label' htmlFor={id} ref={setLabelElement} tabIndex={0}>
+      <label
+        className='str-chat__file-input-label'
+        htmlFor={id}
+        ref={setLabelElement}
+        tabIndex={0}
+      >
         {AttachmentSelectorInitiationButtonContents ? (
           <AttachmentSelectorInitiationButtonContents />
         ) : (
@@ -57,9 +69,8 @@ export const SimpleAttachmentSelector = () => {
 };
 
 const AttachmentSelectorMenuInitButtonIcon = () => {
-  const { AttachmentSelectorInitiationButtonContents, FileUploadIcon } = useComponentContext(
-    'SimpleAttachmentSelector',
-  );
+  const { AttachmentSelectorInitiationButtonContents, FileUploadIcon } =
+    useComponentContext('SimpleAttachmentSelector');
   if (AttachmentSelectorInitiationButtonContents) {
     return <AttachmentSelectorInitiationButtonContents />;
   }
@@ -131,17 +142,19 @@ export type AttachmentSelectorProps = {
 };
 
 const useAttachmentSelectorActionsFiltered = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   original: AttachmentSelectorAction[],
 ) => {
   const { PollCreationDialog = DefaultPollCreationDialog } = useComponentContext();
-  const { channelCapabilities, channelConfig } = useChannelStateContext<StreamChatGenerics>();
+  const { channelCapabilities, channelConfig } =
+    useChannelStateContext<StreamChatGenerics>();
   const { isThreadInput } = useMessageInputContext();
 
   return original
     .filter((action) => {
-      if (action.type === 'uploadFile' && !channelCapabilities['upload-file']) return false;
+      if (action.type === 'uploadFile' && !channelCapabilities['upload-file'])
+        return false;
       if (
         action.type === 'createPoll' &&
         (!channelConfig?.polls || isThreadInput || !channelCapabilities['send-poll'])
@@ -158,7 +171,7 @@ const useAttachmentSelectorActionsFiltered = <
 };
 
 export const AttachmentSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   attachmentSelectorActionSet = defaultAttachmentSelectorActionSet,
   getModalPortalDestination,
@@ -175,7 +188,8 @@ export const AttachmentSelector = <
   const menuDialog = useDialog({ id: menuDialogId });
   const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
 
-  const [modalContentAction, setModalContentActionAction] = useState<AttachmentSelectorAction>();
+  const [modalContentAction, setModalContentActionAction] =
+    useState<AttachmentSelectorAction>();
   const openModal = useCallback(
     (actionType: AttachmentSelectorAction['type']) => {
       const action = actions.find((a) => a.type === actionType);
@@ -197,7 +211,8 @@ export const AttachmentSelector = <
 
   if (actions.length === 0) return null;
 
-  if (actions.length === 1 && actions[0].type === 'uploadFile') return <SimpleAttachmentSelector />;
+  if (actions.length === 1 && actions[0].type === 'uploadFile')
+    return <SimpleAttachmentSelector />;
 
   const ModalContent = modalContentAction?.ModalContent;
   const modalIsOpen = !!ModalContent;
@@ -239,7 +254,11 @@ export const AttachmentSelector = <
           getPortalDestination={getModalPortalDestination ?? getDefaultPortalDestination}
           isOpen={modalIsOpen}
         >
-          <Modal className='str-chat__create-poll-modal' onClose={closeModal} open={modalIsOpen}>
+          <Modal
+            className='str-chat__create-poll-modal'
+            onClose={closeModal}
+            open={modalIsOpen}
+          >
             {ModalContent && <ModalContent close={closeModal} />}
           </Modal>
         </Portal>
diff --git a/src/components/MessageInput/DefaultTriggerProvider.tsx b/src/components/MessageInput/DefaultTriggerProvider.tsx
index 71d6ea25c..1aab6d0e6 100644
--- a/src/components/MessageInput/DefaultTriggerProvider.tsx
+++ b/src/components/MessageInput/DefaultTriggerProvider.tsx
@@ -9,12 +9,19 @@ import {
   useMessageInputContext,
 } from '../../context/MessageInputContext';
 
-import type { SuggestionCommand, SuggestionUser } from '../ChatAutoComplete/ChatAutoComplete';
+import type {
+  SuggestionCommand,
+  SuggestionUser,
+} from '../ChatAutoComplete/ChatAutoComplete';
 import type { CommandItemProps } from '../CommandItem/CommandItem';
 import type { EmoticonItemProps } from '../EmoticonItem/EmoticonItem';
 import type { UserItemProps } from '../UserItem/UserItem';
 
-import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type {
+  CustomTrigger,
+  DefaultStreamChatGenerics,
+  UnknownType,
+} from '../../types/types';
 
 export type AutocompleteMinimalData = {
   id?: string;
@@ -22,13 +29,13 @@ export type AutocompleteMinimalData = {
 } & ({ id: string } | { name: string });
 
 export type CommandTriggerSetting<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = TriggerSetting<CommandItemProps, SuggestionCommand<StreamChatGenerics>>;
 
 export type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps>;
 
 export type UserTriggerSetting<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = TriggerSetting<UserItemProps, SuggestionUser<StreamChatGenerics>>;
 
 export type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType> = {
@@ -38,9 +45,7 @@ export type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType>
     text: string,
     onReady: (data: (U & AutocompleteMinimalData)[], token: string) => void,
   ) => U[] | PromiseLike<void> | void;
-  output: (
-    entity: U,
-  ) =>
+  output: (entity: U) =>
     | {
         caretPosition: 'start' | 'end' | 'next' | number;
         text: string;
@@ -53,7 +58,7 @@ export type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType>
 
 export type TriggerSettings<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > =
   | {
       [key in keyof V]: TriggerSetting<V[key]['componentProps'], V[key]['data']>;
@@ -66,11 +71,13 @@ export type TriggerSettings<
 
 export const DefaultTriggerProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >({
   children,
 }: PropsWithChildren<Record<string, unknown>>) => {
-  const currentValue = useMessageInputContext<StreamChatGenerics, V>('DefaultTriggerProvider');
+  const currentValue = useMessageInputContext<StreamChatGenerics, V>(
+    'DefaultTriggerProvider',
+  );
 
   const defaultAutocompleteTriggers: TriggerSettings<StreamChatGenerics> = {
     '/': useCommandTrigger<StreamChatGenerics>(),
@@ -89,5 +96,7 @@ export const DefaultTriggerProvider = <
     autocompleteTriggers: defaultAutocompleteTriggers,
   };
 
-  return <MessageInputContextProvider value={newValue}>{children}</MessageInputContextProvider>;
+  return (
+    <MessageInputContextProvider value={newValue}>{children}</MessageInputContextProvider>
+  );
 };
diff --git a/src/components/MessageInput/DropzoneProvider.tsx b/src/components/MessageInput/DropzoneProvider.tsx
index 236cdf44e..0f82adea9 100644
--- a/src/components/MessageInput/DropzoneProvider.tsx
+++ b/src/components/MessageInput/DropzoneProvider.tsx
@@ -13,24 +13,23 @@ import {
 
 import type { MessageInputProps } from './MessageInput';
 
-import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type {
+  CustomTrigger,
+  DefaultStreamChatGenerics,
+  UnknownType,
+} from '../../types/types';
 
 const DropzoneInner = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >({
   children,
 }: PropsWithChildren<UnknownType>) => {
-  const { acceptedFiles, multipleUploads } = useChannelStateContext<StreamChatGenerics>(
-    'DropzoneProvider',
-  );
+  const { acceptedFiles, multipleUploads } =
+    useChannelStateContext<StreamChatGenerics>('DropzoneProvider');
 
-  const {
-    cooldownRemaining,
-    isUploadEnabled,
-    maxFilesLeft,
-    uploadNewFiles,
-  } = useMessageInputContext<StreamChatGenerics, V>('DropzoneProvider');
+  const { cooldownRemaining, isUploadEnabled, maxFilesLeft, uploadNewFiles } =
+    useMessageInputContext<StreamChatGenerics, V>('DropzoneProvider');
 
   return (
     <ImageDropzone
@@ -47,7 +46,7 @@ const DropzoneInner = <
 
 export const DropzoneProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: PropsWithChildren<MessageInputProps<StreamChatGenerics, V>>,
 ) => {
diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
index 34ad16fee..ec0c6d93a 100644
--- a/src/components/MessageInput/EditMessageForm.tsx
+++ b/src/components/MessageInput/EditMessageForm.tsx
@@ -7,13 +7,14 @@ import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types
 
 export const EditMessageForm = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >() => {
   const { t } = useTranslationContext('EditMessageForm');
 
-  const { clearEditingState, handleSubmit } = useMessageInputContext<StreamChatGenerics, V>(
-    'EditMessageForm',
-  );
+  const { clearEditingState, handleSubmit } = useMessageInputContext<
+    StreamChatGenerics,
+    V
+  >('EditMessageForm');
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
@@ -25,7 +26,11 @@ export const EditMessageForm = <
   }, [clearEditingState]);
 
   return (
-    <form autoComplete='off' className='str-chat__edit-message-form' onSubmit={handleSubmit}>
+    <form
+      autoComplete='off'
+      className='str-chat__edit-message-form'
+      onSubmit={handleSubmit}
+    >
       <MessageInputFlat />
       <div className='str-chat__edit-message-form-options'>
         <button
diff --git a/src/components/MessageInput/LinkPreviewList.tsx b/src/components/MessageInput/LinkPreviewList.tsx
index ec311d861..e3276fcf2 100644
--- a/src/components/MessageInput/LinkPreviewList.tsx
+++ b/src/components/MessageInput/LinkPreviewList.tsx
@@ -34,16 +34,22 @@ type LinkPreviewProps = {
 
 const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const { dismissLinkPreview } = useMessageInputContext();
-  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLDivElement>();
+  const { handleEnter, handleLeave, tooltipVisible } =
+    useEnterLeaveHandlers<HTMLDivElement>();
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   return (
     <div
       className={clsx('str-chat__link-preview-card', {
-        'str-chat__link-preview-card--loading': linkPreview.state === LinkPreviewState.LOADING,
+        'str-chat__link-preview-card--loading':
+          linkPreview.state === LinkPreviewState.LOADING,
       })}
       data-testid='link-preview-card'
     >
-      <PopperTooltip offset={[0, 5]} referenceElement={referenceElement} visible={tooltipVisible}>
+      <PopperTooltip
+        offset={[0, 5]}
+        referenceElement={referenceElement}
+        visible={tooltipVisible}
+      >
         {linkPreview.og_scrape_url}
       </PopperTooltip>
       <div
@@ -55,8 +61,12 @@ const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
         <LinkIcon />
       </div>
       <div className='str-chat__link-preview-card__content'>
-        <div className='str-chat__link-preview-card__content-title'>{linkPreview.title}</div>
-        <div className='str-chat__link-preview-card__content-description'>{linkPreview.text}</div>
+        <div className='str-chat__link-preview-card__content-title'>
+          {linkPreview.title}
+        </div>
+        <div className='str-chat__link-preview-card__content-description'>
+          {linkPreview.text}
+        </div>
       </div>
       <button
         className='str-chat__link-preview-card__dismiss-button'
diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
index ce6a92f2d..7c27cf62e 100644
--- a/src/components/MessageInput/MessageInput.tsx
+++ b/src/components/MessageInput/MessageInput.tsx
@@ -6,7 +6,10 @@ import { useCooldownTimer } from './hooks/useCooldownTimer';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageInputState } from './hooks/useMessageInputState';
 import { StreamMessage, useChannelStateContext } from '../../context/ChannelStateContext';
-import { ComponentContextValue, useComponentContext } from '../../context/ComponentContext';
+import {
+  ComponentContextValue,
+  useComponentContext,
+} from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 
@@ -35,12 +38,15 @@ export type EmojiSearchIndexResult = {
 export interface EmojiSearchIndex<T extends UnknownType = UnknownType> {
   search: (
     query: string,
-  ) => PromiseLike<Array<EmojiSearchIndexResult & T>> | Array<EmojiSearchIndexResult & T> | null;
+  ) =>
+    | PromiseLike<Array<EmojiSearchIndexResult & T>>
+    | Array<EmojiSearchIndexResult & T>
+    | null;
 }
 
 export type MessageInputProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = {
   /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
   additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
@@ -130,7 +136,7 @@ export type MessageInputProps<
 
 const MessageInputProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: PropsWithChildren<MessageInputProps<StreamChatGenerics, V>>,
 ) => {
@@ -154,17 +160,15 @@ const MessageInputProvider = <
 
 const UnMemoizedMessageInput = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: MessageInputProps<StreamChatGenerics, V>,
 ) => {
   const { Input: PropInput } = props;
 
   const { dragAndDropWindow } = useChannelStateContext<StreamChatGenerics>();
-  const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext<
-    StreamChatGenerics,
-    V
-  >('MessageInput');
+  const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } =
+    useComponentContext<StreamChatGenerics, V>('MessageInput');
 
   const Input = PropInput || ContextInput || MessageInputFlat;
   const dialogManagerId = props.isThreadInput
@@ -194,4 +198,6 @@ const UnMemoizedMessageInput = <
 /**
  * A high level component that has provides all functionality to the Input it renders.
  */
-export const MessageInput = React.memo(UnMemoizedMessageInput) as typeof UnMemoizedMessageInput;
+export const MessageInput = React.memo(
+  UnMemoizedMessageInput,
+) as typeof UnMemoizedMessageInput;
diff --git a/src/components/MessageInput/MessageInputFlat.tsx b/src/components/MessageInput/MessageInputFlat.tsx
index 334298936..d68b9d2bd 100644
--- a/src/components/MessageInput/MessageInputFlat.tsx
+++ b/src/components/MessageInput/MessageInputFlat.tsx
@@ -36,7 +36,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AIStates, useAIState } from '../AIStateIndicator';
 
 export const MessageInputFlat = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const { t } = useTranslationContext('MessageInputFlat');
   const {
@@ -59,17 +59,17 @@ export const MessageInputFlat = <
   } = useMessageInputContext<StreamChatGenerics>('MessageInputFlat');
 
   const {
-    AudioRecorder = DefaultAudioRecorder,
     AttachmentPreviewList = DefaultAttachmentPreviewList,
     AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector,
+    AudioRecorder = DefaultAudioRecorder,
     CooldownTimer = DefaultCooldownTimer,
+    EmojiPicker,
     LinkPreviewList = DefaultLinkPreviewList,
     QuotedMessagePreview = DefaultQuotedMessagePreview,
     RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification,
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride,
-    EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
   const {
     acceptedFiles = [],
@@ -136,7 +136,8 @@ export const MessageInputFlat = <
 
   // TODO: "!message" condition is a temporary fix for shared
   // state when editing a message (fix shared state issue)
-  const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
+  const displayQuotedMessage =
+    !message && quotedMessage && quotedMessage.parent_id === parent?.id;
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
   const isRecording = !!recordingController.recordingState;
 
@@ -150,7 +151,8 @@ export const MessageInputFlat = <
       ? DefaultStopAIGenerationButton
       : StopAIGenerationButtonOverride;
   const shouldDisplayStopAIGeneration =
-    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton;
+    [AIStates.Thinking, AIStates.Generating].includes(aiState) &&
+    !!StopAIGenerationButton;
 
   return (
     <>
@@ -181,7 +183,9 @@ export const MessageInputFlat = <
         <div className='str-chat__message-input-inner'>
           <AttachmentSelector />
           <div className='str-chat__message-textarea-container'>
-            {displayQuotedMessage && <QuotedMessagePreview quotedMessage={quotedMessage} />}
+            {displayQuotedMessage && (
+              <QuotedMessagePreview quotedMessage={quotedMessage} />
+            )}
             {isUploadEnabled &&
               !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (
                 <AttachmentPreviewList />
diff --git a/src/components/MessageInput/QuotedMessagePreview.tsx b/src/components/MessageInput/QuotedMessagePreview.tsx
index 6f45849fb..b89bf125f 100644
--- a/src/components/MessageInput/QuotedMessagePreview.tsx
+++ b/src/components/MessageInput/QuotedMessagePreview.tsx
@@ -15,9 +15,10 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export const QuotedMessagePreviewHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { setQuotedMessage } = useChannelActionContext<StreamChatGenerics>('QuotedMessagePreview');
+  const { setQuotedMessage } =
+    useChannelActionContext<StreamChatGenerics>('QuotedMessagePreview');
   const { t } = useTranslationContext('QuotedMessagePreview');
 
   return (
@@ -37,21 +38,19 @@ export const QuotedMessagePreviewHeader = <
 };
 
 export type QuotedMessagePreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   quotedMessage: StreamMessage<StreamChatGenerics>;
 };
 
 export const QuotedMessagePreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   quotedMessage,
 }: QuotedMessagePreviewProps<StreamChatGenerics>) => {
   const { client } = useChatContext();
-  const {
-    Attachment = DefaultAttachment,
-    Avatar = DefaultAvatar,
-  } = useComponentContext<StreamChatGenerics>('QuotedMessagePreview');
+  const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } =
+    useComponentContext<StreamChatGenerics>('QuotedMessagePreview');
   const { userLanguage } = useTranslationContext('QuotedMessagePreview');
 
   const quotedMessageText =
@@ -68,7 +67,10 @@ export const QuotedMessagePreview = <
   const poll = quotedMessage.poll_id && client.polls.fromState(quotedMessage.poll_id);
 
   return (
-    <div className='str-chat__quoted-message-preview' data-testid='quoted-message-preview'>
+    <div
+      className='str-chat__quoted-message-preview'
+      data-testid='quoted-message-preview'
+    >
       {quotedMessage.user && (
         <Avatar
           className='str-chat__avatar--quoted-message-sender'
@@ -85,7 +87,10 @@ export const QuotedMessagePreview = <
             {!!quotedMessageAttachment.length && (
               <Attachment attachments={quotedMessageAttachment} isQuoted />
             )}
-            <div className='str-chat__quoted-message-text' data-testid='quoted-message-text'>
+            <div
+              className='str-chat__quoted-message-text'
+              data-testid='quoted-message-text'
+            >
               <p>{quotedMessageText}</p>
             </div>
           </>
diff --git a/src/components/MessageInput/SendButton.tsx b/src/components/MessageInput/SendButton.tsx
index 38aae95fb..535587565 100644
--- a/src/components/MessageInput/SendButton.tsx
+++ b/src/components/MessageInput/SendButton.tsx
@@ -4,7 +4,7 @@ import { SendIcon } from './icons';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type SendButtonProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   sendMessage: (
     event: React.BaseSyntheticEvent,
@@ -12,7 +12,7 @@ export type SendButtonProps<
   ) => void;
 } & React.ComponentProps<'button'>;
 export const SendButton = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   sendMessage,
   ...rest
diff --git a/src/components/MessageInput/StopAIGenerationButton.tsx b/src/components/MessageInput/StopAIGenerationButton.tsx
index ff566cba3..9761c4459 100644
--- a/src/components/MessageInput/StopAIGenerationButton.tsx
+++ b/src/components/MessageInput/StopAIGenerationButton.tsx
@@ -3,7 +3,10 @@ import { useTranslationContext } from '../../context';
 
 export type StopAIGenerationButtonProps = React.ComponentProps<'button'>;
 
-export const StopAIGenerationButton = ({ onClick, ...restProps }: StopAIGenerationButtonProps) => {
+export const StopAIGenerationButton = ({
+  onClick,
+  ...restProps
+}: StopAIGenerationButtonProps) => {
   const { t } = useTranslationContext();
   return (
     <button
diff --git a/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js b/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
index 003d7ae35..277e451b3 100644
--- a/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
+++ b/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
@@ -1,5 +1,3 @@
-/* eslint-disable jest-dom/prefer-in-document */
-
 import React from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react';
@@ -56,40 +54,45 @@ describe('AttachmentPreviewList', () => {
 
     expect(attachmentList).toBeEmptyDOMElement();
   });
-  it.each(['uploading', 'failed', 'finished'])('renders previews with state "%s"', (state) => {
-    renderComponent({
-      contextValue: generateMessageInputContextValue({
-        attachments: [
-          generateAudioAttachment({
-            localMetadata: { id: 'audio-attachment-id', uploadState: state },
-            title: `audio-attachment-${state}`,
-          }),
-          generateVoiceRecordingAttachment({
-            localMetadata: { id: 'voice-recording-attachment-id', uploadState: state },
-            title: `voice-recording-attachment-${state}`,
-          }),
-          generateVideoAttachment({
-            localMetadata: { id: 'video-attachment-id', uploadState: state },
-            title: `video-attachment-${state}`,
-          }),
-          generateFileAttachment({
-            localMetadata: { id: 'file-attachment-id', uploadState: state },
-            title: `file-upload-${state}`,
-          }),
-          generateImageAttachment({
-            fallback: `image-upload-${state}`,
-            localMetadata: { id: 'image-attachment-id', uploadState: state },
-          }),
-        ],
-      }),
-    });
+  it.each(['uploading', 'failed', 'finished'])(
+    'renders previews with state "%s"',
+    (state) => {
+      renderComponent({
+        contextValue: generateMessageInputContextValue({
+          attachments: [
+            generateAudioAttachment({
+              localMetadata: { id: 'audio-attachment-id', uploadState: state },
+              title: `audio-attachment-${state}`,
+            }),
+            generateVoiceRecordingAttachment({
+              localMetadata: { id: 'voice-recording-attachment-id', uploadState: state },
+              title: `voice-recording-attachment-${state}`,
+            }),
+            generateVideoAttachment({
+              localMetadata: { id: 'video-attachment-id', uploadState: state },
+              title: `video-attachment-${state}`,
+            }),
+            generateFileAttachment({
+              localMetadata: { id: 'file-attachment-id', uploadState: state },
+              title: `file-upload-${state}`,
+            }),
+            generateImageAttachment({
+              fallback: `image-upload-${state}`,
+              localMetadata: { id: 'image-attachment-id', uploadState: state },
+            }),
+          ],
+        }),
+      });
 
-    expect(screen.getByTitle(`file-upload-${state}`)).toBeInTheDocument();
-    expect(screen.getByTitle(`image-upload-${state}`)).toBeInTheDocument();
-    expect(screen.getByTitle(`audio-attachment-${state}`)).toBeInTheDocument();
-    expect(screen.getByTitle(`voice-recording-attachment-${state}`)).toBeInTheDocument();
-    expect(screen.getByTitle(`video-attachment-${state}`)).toBeInTheDocument();
-  });
+      expect(screen.getByTitle(`file-upload-${state}`)).toBeInTheDocument();
+      expect(screen.getByTitle(`image-upload-${state}`)).toBeInTheDocument();
+      expect(screen.getByTitle(`audio-attachment-${state}`)).toBeInTheDocument();
+      expect(
+        screen.getByTitle(`voice-recording-attachment-${state}`),
+      ).toBeInTheDocument();
+      expect(screen.getByTitle(`video-attachment-${state}`)).toBeInTheDocument();
+    },
+  );
 
   describe.each(['audio', 'file', 'image', 'unsupported', 'voiceRecording', 'video'])(
     '%s attachments rendering',
@@ -200,7 +203,9 @@ describe('AttachmentPreviewList', () => {
         renderComponent({ contextValue });
 
         fireEvent.click(
-          screen.getByTestId(type === 'image' ? DELETE_BTN_IMAGE_TEST_ID : DELETE_BTN_TEST_ID),
+          screen.getByTestId(
+            type === 'image' ? DELETE_BTN_IMAGE_TEST_ID : DELETE_BTN_TEST_ID,
+          ),
         );
 
         expect(contextValue.removeAttachments).toHaveBeenCalledWith([
diff --git a/src/components/MessageInput/__tests__/AttachmentSelector.test.js b/src/components/MessageInput/__tests__/AttachmentSelector.test.js
index 77cad06bf..cbca77c35 100644
--- a/src/components/MessageInput/__tests__/AttachmentSelector.test.js
+++ b/src/components/MessageInput/__tests__/AttachmentSelector.test.js
@@ -17,8 +17,10 @@ const ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID = 'attachment-selector-actions-m
 const POLL_CREATION_DIALOG_TEST_ID = 'poll-creation-dialog';
 
 const ATTACHMENT_SELECTOR_CLASS = 'str-chat__attachment-selector';
-const UPLOAD_FILE_BUTTON_CLASS = 'str-chat__attachment-selector-actions-menu__upload-file-button';
-const CREATE_POLL_BUTTON_CLASS = 'str-chat__attachment-selector-actions-menu__create-poll-button';
+const UPLOAD_FILE_BUTTON_CLASS =
+  'str-chat__attachment-selector-actions-menu__upload-file-button';
+const CREATE_POLL_BUTTON_CLASS =
+  'str-chat__attachment-selector-actions-menu__create-poll-button';
 
 const translationContext = {
   t: (v) => v,
@@ -59,7 +61,9 @@ const renderComponent = async ({
                 value={{ ...defaultChannelStateContext, channel, ...channelStateContext }}
               >
                 <div id={CHANNEL_CONTAINER_ID}>
-                  <MessageInput {...{ ...defaultMessageInputProps, ...messageInputProps }} />
+                  <MessageInput
+                    {...{ ...defaultMessageInputProps, ...messageInputProps }}
+                  />
                 </div>
               </ChannelStateProvider>
             </ChannelActionProvider>
@@ -85,7 +89,9 @@ describe('AttachmentSelector', () => {
     const { container } = await renderComponent({
       channelStateContext: { channelConfig: { polls: false } },
     });
-    expect(container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`)).not.toBeInTheDocument();
+    expect(
+      container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`),
+    ).not.toBeInTheDocument();
     expect(screen.getByTestId('file-upload-button')).toBeInTheDocument();
   });
 
@@ -93,7 +99,9 @@ describe('AttachmentSelector', () => {
     const { container } = await renderComponent({
       channelStateContext: { channelCapabilities: { 'upload-file': true } },
     });
-    expect(container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`)).not.toBeInTheDocument();
+    expect(
+      container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`),
+    ).not.toBeInTheDocument();
     expect(screen.getByTestId('file-upload-button')).toBeInTheDocument();
   });
 
@@ -101,7 +109,9 @@ describe('AttachmentSelector', () => {
     const { container } = await renderComponent({
       messageInputProps: { isThreadInput: true },
     });
-    expect(container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`)).not.toBeInTheDocument();
+    expect(
+      container.querySelector(`.${ATTACHMENT_SELECTOR_CLASS}`),
+    ).not.toBeInTheDocument();
     expect(screen.getByTestId('file-upload-button')).toBeInTheDocument();
   });
 
@@ -120,7 +130,9 @@ describe('AttachmentSelector', () => {
     await renderComponent({
       channelStateContext: { channelCapabilities: {} },
     });
-    expect(screen.queryByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID),
+    ).not.toBeInTheDocument();
   });
 
   it('opens poll creation dialog if Poll option is selected and closes the attachment selector menu', async () => {
@@ -153,9 +165,13 @@ describe('AttachmentSelector', () => {
     const customText = 'Custom text';
     const ActionButton = () => <div>{customText}</div>;
     const CustomAttachmentSelector = () => (
-      <AttachmentSelector attachmentSelectorActionSet={[{ ActionButton, type: 'custom' }]} />
+      <AttachmentSelector
+        attachmentSelectorActionSet={[{ ActionButton, type: 'custom' }]}
+      />
     );
-    await renderComponent({ componentContext: { AttachmentSelector: CustomAttachmentSelector } });
+    await renderComponent({
+      componentContext: { AttachmentSelector: CustomAttachmentSelector },
+    });
     await invokeMenu();
     const menu = screen.getByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID);
     expect(menu).toBeInTheDocument();
@@ -183,7 +199,9 @@ describe('AttachmentSelector', () => {
         attachmentSelectorActionSet={[{ ActionButton, ModalContent, type: 'custom' }]}
       />
     );
-    await renderComponent({ componentContext: { AttachmentSelector: CustomAttachmentSelector } });
+    await renderComponent({
+      componentContext: { AttachmentSelector: CustomAttachmentSelector },
+    });
     await invokeMenu();
     act(() => {
       fireEvent.click(screen.getByText(buttonText));
@@ -209,7 +227,9 @@ describe('AttachmentSelector', () => {
     const CustomAttachmentSelector = () => (
       <AttachmentSelector getModalPortalDestination={getModalPortalDestination} />
     );
-    await renderComponent({ componentContext: { AttachmentSelector: CustomAttachmentSelector } });
+    await renderComponent({
+      componentContext: { AttachmentSelector: CustomAttachmentSelector },
+    });
     await invokeMenu();
     act(() => {
       fireEvent.click(screen.getByText('Poll'));
@@ -223,7 +243,9 @@ describe('AttachmentSelector', () => {
   it('allows to override PollCreationDialog', async () => {
     const testId = 'custom-poll-creation-dialog';
     const CustomPollCreationDialog = () => <div data-testid={testId} />;
-    await renderComponent({ componentContext: { PollCreationDialog: CustomPollCreationDialog } });
+    await renderComponent({
+      componentContext: { PollCreationDialog: CustomPollCreationDialog },
+    });
     await invokeMenu();
     const menu = screen.getByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID);
     const createPollButton = menu.querySelector(`.${CREATE_POLL_BUTTON_CLASS}`);
diff --git a/src/components/MessageInput/__tests__/CooldownTimer.test.js b/src/components/MessageInput/__tests__/CooldownTimer.test.js
index 320f87449..1560a2132 100644
--- a/src/components/MessageInput/__tests__/CooldownTimer.test.js
+++ b/src/components/MessageInput/__tests__/CooldownTimer.test.js
@@ -54,7 +54,9 @@ describe('CooldownTimer', () => {
 
     rerender(<CooldownTimer {...props2} />);
 
-    expect(screen.queryByTestId(TIMER_TEST_ID)).toHaveTextContent(cooldownRemaining2.toString());
+    expect(screen.queryByTestId(TIMER_TEST_ID)).toHaveTextContent(
+      cooldownRemaining2.toString(),
+    );
     act(() => {
       jest.runAllTimers();
     });
diff --git a/src/components/MessageInput/__tests__/LinkPreviewList.test.js b/src/components/MessageInput/__tests__/LinkPreviewList.test.js
index d254c466a..a9bb9c884 100644
--- a/src/components/MessageInput/__tests__/LinkPreviewList.test.js
+++ b/src/components/MessageInput/__tests__/LinkPreviewList.test.js
@@ -91,43 +91,50 @@ const ActiveChannelSetter = ({ activeChannel }) => {
 
 const ChatContextOverrider = ({ children, contextOverrides }) => {
   const context = useChatContext();
-  return <ChatProvider value={{ ...context, ...contextOverrides }}>{children}</ChatProvider>;
+  return (
+    <ChatProvider value={{ ...context, ...contextOverrides }}>{children}</ChatProvider>
+  );
 };
 
-const makeRenderFn = (InputComponent) => async ({
-  messageInputProps = {},
-  channelProps = {},
-  chatContextOverrides = {},
-  client = chatClient,
-  messageContextOverrides = {},
-  messageActionsBoxProps = {},
-} = {}) => {
-  let renderResult;
-  await act(() => {
-    renderResult = render(
-      <Chat client={client}>
-        <ChatContextOverrider contextOverrides={chatContextOverrides}>
-          <ActiveChannelSetter activeChannel={channel} />
-          <Channel {...channelProps}>
-            <MessageProvider value={{ ...defaultMessageContextValue, ...messageContextOverrides }}>
-              <MessageActionsBox
-                {...messageActionsBoxProps}
-                getMessageActions={defaultMessageContextValue.getMessageActions}
-              />
-            </MessageProvider>
-            <MessageInput Input={InputComponent} {...messageInputProps} />
-          </Channel>
-        </ChatContextOverrider>
-      </Chat>,
-    );
-  });
-  const submit = async () => {
-    const submitButton = renderResult.findByText('Send') || renderResult.findByTitle('Send');
-    fireEvent.click(await submitButton);
-  };
+const makeRenderFn =
+  (InputComponent) =>
+  async ({
+    channelProps = {},
+    chatContextOverrides = {},
+    client = chatClient,
+    messageActionsBoxProps = {},
+    messageContextOverrides = {},
+    messageInputProps = {},
+  } = {}) => {
+    let renderResult;
+    await act(() => {
+      renderResult = render(
+        <Chat client={client}>
+          <ChatContextOverrider contextOverrides={chatContextOverrides}>
+            <ActiveChannelSetter activeChannel={channel} />
+            <Channel {...channelProps}>
+              <MessageProvider
+                value={{ ...defaultMessageContextValue, ...messageContextOverrides }}
+              >
+                <MessageActionsBox
+                  {...messageActionsBoxProps}
+                  getMessageActions={defaultMessageContextValue.getMessageActions}
+                />
+              </MessageProvider>
+              <MessageInput Input={InputComponent} {...messageInputProps} />
+            </Channel>
+          </ChatContextOverrider>
+        </Chat>,
+      );
+    });
+    const submit = async () => {
+      const submitButton =
+        renderResult.findByText('Send') || renderResult.findByTitle('Send');
+      fireEvent.click(await submitButton);
+    };
 
-  return { submit, ...renderResult };
-};
+    return { submit, ...renderResult };
+  };
 
 const tearDown = () => {
   cleanup();
@@ -309,7 +316,9 @@ describe('Link preview', () => {
   });
 
   it('renders for URL with protocol', async () => {
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -328,7 +337,9 @@ describe('Link preview', () => {
   });
 
   it('renders for URL without protocol', async () => {
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -341,14 +352,16 @@ describe('Link preview', () => {
       });
     });
     const linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
   });
 
   it('does not render with quoted message', async () => {
     const { message } = defaultMessageContextValue;
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageContextOverrides: { message },
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
@@ -384,7 +397,7 @@ describe('Link preview', () => {
       });
     });
     let linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
 
@@ -396,7 +409,7 @@ describe('Link preview', () => {
       });
     });
     linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(2);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
     expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
@@ -409,7 +422,7 @@ describe('Link preview', () => {
       });
     });
     linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(3);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
     expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
@@ -451,7 +464,7 @@ describe('Link preview', () => {
 
     await waitFor(() => {
       const linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-      // eslint-disable-next-line
+
       expect(linkPreviews).toHaveLength(3);
       expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
       expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
@@ -460,7 +473,9 @@ describe('Link preview', () => {
   });
 
   it('renders as single preview if duplicates are present', async () => {
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -473,7 +488,7 @@ describe('Link preview', () => {
       });
     });
     let linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
 
@@ -485,7 +500,7 @@ describe('Link preview', () => {
       });
     });
     linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
   });
@@ -520,7 +535,9 @@ describe('Link preview', () => {
   });
 
   it('request enrichment for duplicate URLs where enrichment previously failed', async () => {
-    const enrichSpy = jest.spyOn(chatClient, 'enrichURL').mockRejectedValueOnce(new Error());
+    const enrichSpy = jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockRejectedValueOnce(new Error());
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -549,7 +566,9 @@ describe('Link preview', () => {
   });
 
   it('is unmounted when the URL is removed from the textarea value', async () => {
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -562,7 +581,7 @@ describe('Link preview', () => {
       });
     });
     let linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
 
@@ -574,13 +593,15 @@ describe('Link preview', () => {
       });
     });
     linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(0);
   });
 
   it('is unmounted and disabled when dismissed', async () => {
     const typedText = `X ${scrapedData.og_scrape_url}`;
-    jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+    jest
+      .spyOn(chatClient, 'enrichURL')
+      .mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
     await renderComponent({
       messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
     });
@@ -593,7 +614,7 @@ describe('Link preview', () => {
       });
     });
     let linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
 
@@ -601,7 +622,7 @@ describe('Link preview', () => {
       fireEvent.click(await screen.findByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID));
     });
     linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(0);
 
     await act(async () => {
@@ -702,7 +723,9 @@ describe('Link preview', () => {
     });
 
     await act(async () => {
-      const dismissButtons = await screen.findAllByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID);
+      const dismissButtons = await screen.findAllByTestId(
+        LINK_PREVIEW_DISMISS_BTN_TEST_ID,
+      );
       fireEvent.click(dismissButtons[1]);
     });
 
@@ -787,7 +810,9 @@ describe('Link preview', () => {
     });
 
     await act(async () => {
-      const dismissButtons = await screen.findAllByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID);
+      const dismissButtons = await screen.findAllByTestId(
+        LINK_PREVIEW_DISMISS_BTN_TEST_ID,
+      );
       fireEvent.click(dismissButtons[1]);
     });
 
@@ -830,7 +855,7 @@ describe('Link preview', () => {
     });
 
     const linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
-    // eslint-disable-next-line
+
     expect(linkPreviews).toHaveLength(1);
     expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
   });
@@ -902,7 +927,9 @@ describe('Link preview', () => {
     expect(editMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
     expect(editMessageSpy).toHaveBeenCalledWith(
       expect.objectContaining({
-        attachments: expect.arrayContaining([expect.objectContaining(scrapedImageAttachment)]),
+        attachments: expect.arrayContaining([
+          expect.objectContaining(scrapedImageAttachment),
+        ]),
       }),
       undefined,
       expect.objectContaining({ skip_enrich_url: true }),
@@ -954,8 +981,10 @@ describe('Link preview', () => {
     let resolveEnrichURLPromise;
     jest
       .spyOn(chatClient, 'enrichURL')
-      // eslint-disable-next-line no-unused-vars
-      .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+
+      .mockImplementationOnce(
+        () => new Promise((res) => (resolveEnrichURLPromise = res)),
+      );
 
     const { submit } = await renderComponent({
       channelProps: { channel },
@@ -992,8 +1021,10 @@ describe('Link preview', () => {
     let resolveEnrichURLPromise;
     jest
       .spyOn(chatClient, 'enrichURL')
-      // eslint-disable-next-line no-unused-vars
-      .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+
+      .mockImplementationOnce(
+        () => new Promise((res) => (resolveEnrichURLPromise = res)),
+      );
 
     const { submit } = await renderComponent({
       channelProps: { channel },
@@ -1154,7 +1185,9 @@ describe('Link preview', () => {
     await renderComponent({
       channelProps: {
         enrichURLForPreview: true,
-        enrichURLForPreviewConfig: { onLinkPreviewDismissed: onLinkPreviewDismissedChannel },
+        enrichURLForPreviewConfig: {
+          onLinkPreviewDismissed: onLinkPreviewDismissedChannel,
+        },
       },
     });
 
@@ -1185,7 +1218,9 @@ describe('Link preview', () => {
     await renderComponent({
       channelProps: {
         enrichURLForPreview: true,
-        enrichURLForPreviewConfig: { onLinkPreviewDismissed: onLinkPreviewDismissedChannel },
+        enrichURLForPreviewConfig: {
+          onLinkPreviewDismissed: onLinkPreviewDismissedChannel,
+        },
       },
       messageInputProps: {
         urlEnrichmentConfig: {
@@ -1207,7 +1242,9 @@ describe('Link preview', () => {
     });
 
     expect(enrichSpy).toHaveBeenCalledTimes(1);
-    expect(onLinkPreviewDismissedInput).toHaveBeenCalledWith(expect.objectContaining(scrapedData));
+    expect(onLinkPreviewDismissedInput).toHaveBeenCalledWith(
+      expect.objectContaining(scrapedData),
+    );
     expect(onLinkPreviewDismissedChannel).not.toHaveBeenCalled();
   });
 
@@ -1216,7 +1253,9 @@ describe('Link preview', () => {
     await renderComponent({
       channelProps: {
         enrichURLForPreview: true,
-        enrichURLForPreviewConfig: { debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel },
+        enrichURLForPreviewConfig: {
+          debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel,
+        },
       },
     });
 
@@ -1228,10 +1267,14 @@ describe('Link preview', () => {
       });
     });
 
-    expect(debounce).toHaveBeenCalledWith(expect.any(Function), debounceURLEnrichmentMsChannel, {
-      leading: false,
-      trailing: true,
-    });
+    expect(debounce).toHaveBeenCalledWith(
+      expect.any(Function),
+      debounceURLEnrichmentMsChannel,
+      {
+        leading: false,
+        trailing: true,
+      },
+    );
   });
 
   it('gives preference to debounceURLEnrichmentMs passed directly over the channel state context', async () => {
@@ -1240,7 +1283,9 @@ describe('Link preview', () => {
     await renderComponent({
       channelProps: {
         enrichURLForPreview: true,
-        enrichURLForPreviewConfig: { debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel },
+        enrichURLForPreviewConfig: {
+          debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel,
+        },
       },
       messageInputProps: {
         urlEnrichmentConfig: {
@@ -1257,10 +1302,14 @@ describe('Link preview', () => {
       });
     });
 
-    expect(debounce).toHaveBeenCalledWith(expect.any(Function), debounceURLEnrichmentMsInput, {
-      leading: false,
-      trailing: true,
-    });
+    expect(debounce).toHaveBeenCalledWith(
+      expect.any(Function),
+      debounceURLEnrichmentMsInput,
+      {
+        leading: false,
+        trailing: true,
+      },
+    );
   });
 
   it('are rendered in custom LinkPreviewList component', async () => {
@@ -1290,7 +1339,9 @@ describe('Link preview', () => {
     let resolveEnrichURLPromise;
     jest
       .spyOn(chatClient, 'enrichURL')
-      .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+      .mockImplementationOnce(
+        () => new Promise((res) => (resolveEnrichURLPromise = res)),
+      );
 
     const { submit } = await renderComponent({
       channelProps: { channel, enrichURLForPreview: true },
diff --git a/src/components/MessageInput/__tests__/MessageInput.test.js b/src/components/MessageInput/__tests__/MessageInput.test.js
index cac2baeca..dd619ccb6 100644
--- a/src/components/MessageInput/__tests__/MessageInput.test.js
+++ b/src/components/MessageInput/__tests__/MessageInput.test.js
@@ -81,7 +81,8 @@ const mockUploadApi = () =>
     }),
   );
 
-const mockFaultyUploadApi = (cause) => jest.fn().mockImplementation(() => Promise.reject(cause));
+const mockFaultyUploadApi = (cause) =>
+  jest.fn().mockImplementation(() => Promise.reject(cause));
 
 const submitMock = jest.fn();
 const editMock = jest.fn();
@@ -111,64 +112,70 @@ function dropFile(file, formElement) {
   });
 }
 
-const makeRenderFn = (InputComponent) => async ({
-  channelProps = {},
-  channelData = [],
-  chatContextOverrides = {},
-  customChannel,
-  customClient,
-  customUser,
-  messageInputProps = {},
-  messageContextOverrides = {},
-  messageActionsBoxProps = {},
-} = {}) => {
-  let channel = customChannel;
-  let client = customClient;
-  if (!(channel || client)) {
-    const result = await initClientWithChannels({
-      channelsData: [{ ...mockedChannelData, ...channelData }],
-      customUser: customUser || user,
-    });
-    channel = result.channels[0];
-    client = result.client;
-  }
-  let renderResult;
-
-  const defaultMessageInputProps =
-    InputComponent.name === 'EditMessageForm' ? { message: mainListMessage } : {};
-  await act(() => {
-    renderResult = render(
-      <ChatProvider value={{ ...defaultChatContext, channel, client, ...chatContextOverrides }}>
-        <Channel
-          doSendMessageRequest={submitMock}
-          doUpdateMessageRequest={editMock}
-          {...channelProps}
+const makeRenderFn =
+  (InputComponent) =>
+  async ({
+    channelData = [],
+    channelProps = {},
+    chatContextOverrides = {},
+    customChannel,
+    customClient,
+    customUser,
+    messageActionsBoxProps = {},
+    messageContextOverrides = {},
+    messageInputProps = {},
+  } = {}) => {
+    let channel = customChannel;
+    let client = customClient;
+    if (!(channel || client)) {
+      const result = await initClientWithChannels({
+        channelsData: [{ ...mockedChannelData, ...channelData }],
+        customUser: customUser || user,
+      });
+      channel = result.channels[0];
+      client = result.client;
+    }
+    let renderResult;
+
+    const defaultMessageInputProps =
+      InputComponent.name === 'EditMessageForm' ? { message: mainListMessage } : {};
+    await act(() => {
+      renderResult = render(
+        <ChatProvider
+          value={{ ...defaultChatContext, channel, client, ...chatContextOverrides }}
         >
-          <MessageProvider value={{ ...defaultMessageContextValue, ...messageContextOverrides }}>
-            <MessageActionsBox
-              {...messageActionsBoxProps}
-              getMessageActions={defaultMessageContextValue.getMessageActions}
+          <Channel
+            doSendMessageRequest={submitMock}
+            doUpdateMessageRequest={editMock}
+            {...channelProps}
+          >
+            <MessageProvider
+              value={{ ...defaultMessageContextValue, ...messageContextOverrides }}
+            >
+              <MessageActionsBox
+                {...messageActionsBoxProps}
+                getMessageActions={defaultMessageContextValue.getMessageActions}
+              />
+            </MessageProvider>
+            <MessageInput
+              Input={InputComponent}
+              {...{ ...defaultMessageInputProps, ...messageInputProps }}
             />
-          </MessageProvider>
-          <MessageInput
-            Input={InputComponent}
-            {...{ ...defaultMessageInputProps, ...messageInputProps }}
-          />
-        </Channel>
-      </ChatProvider>,
-    );
-  });
+          </Channel>
+        </ChatProvider>,
+      );
+    });
 
-  const submit = async () => {
-    const submitButton =
-      renderResult.queryByTestId(SEND_BTN_EDIT_FORM_TEST_ID) ||
-      renderResult.findByText('Send') ||
-      renderResult.findByTitle('Send');
-    fireEvent.click(await submitButton);
-  };
+    const submit = async () => {
+      const submitButton =
+        renderResult.queryByTestId(SEND_BTN_EDIT_FORM_TEST_ID) ||
+        renderResult.findByText('Send') ||
+        renderResult.findByTitle('Send');
+      fireEvent.click(await submitButton);
+    };
 
-  return { channel, client, submit, ...renderResult };
-};
+    return { channel, client, submit, ...renderResult };
+  };
 
 const tearDown = () => {
   cleanup();
@@ -379,7 +386,9 @@ function axeNoViolations(container) {
           expect(screen.queryByTestId(IMAGE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
           expect(screen.queryByTestId(FILE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
           expect(screen.queryByText(filename)).not.toBeInTheDocument();
-          expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).not.toBeInTheDocument();
+          expect(
+            screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
+          ).not.toBeInTheDocument();
           if (componentName === 'EditMessageForm') {
             expect(formElement.value.startsWith(pastedString)).toBeTruthy();
           } else {
@@ -479,7 +488,11 @@ function axeNoViolations(container) {
         });
 
         await waitFor(() => {
-          expect(errorHandler).toHaveBeenCalledWith(cause, 'upload-attachment', expect.any(Object));
+          expect(errorHandler).toHaveBeenCalledWith(
+            cause,
+            'upload-attachment',
+            expect.any(Object),
+          );
           expect(doImageUploadRequest).toHaveBeenCalledWith(file, expect.any(Object));
         });
         await axeNoViolations(container);
@@ -503,7 +516,11 @@ function axeNoViolations(container) {
         act(() => dropFile(file, formElement));
 
         await waitFor(() => {
-          expect(errorHandler).toHaveBeenCalledWith(cause, 'upload-attachment', expect.any(Object));
+          expect(errorHandler).toHaveBeenCalledWith(
+            cause,
+            'upload-attachment',
+            expect.any(Object),
+          );
           expect(doFileUploadRequest).toHaveBeenCalledWith(file, expect.any(Object));
         });
 
@@ -565,7 +582,9 @@ function axeNoViolations(container) {
         const file2 = getFile(filename2);
         act(() => dropFile(file2, formElement));
 
-        await waitFor(() => expect(screen.queryByText(filename2)).not.toBeInTheDocument());
+        await waitFor(() =>
+          expect(screen.queryByText(filename2)).not.toBeInTheDocument(),
+        );
 
         await axeNoViolations(container);
       });
@@ -589,7 +608,9 @@ function axeNoViolations(container) {
 
         const file2 = getFile(filename2);
         act(() => dropFile(file2, formElement));
-        await waitFor(() => expect(screen.queryByText(filename2)).not.toBeInTheDocument());
+        await waitFor(() =>
+          expect(screen.queryByText(filename2)).not.toBeInTheDocument(),
+        );
         await axeNoViolations(container);
       });
 
@@ -608,7 +629,9 @@ function axeNoViolations(container) {
         const formElement = await screen.findByPlaceholderText(inputPlaceholder);
         const file = getFile(filename1);
         await act(() => dropFile(file, formElement));
-        await waitFor(() => expect(screen.queryByText(filename1)).not.toBeInTheDocument());
+        await waitFor(() =>
+          expect(screen.queryByText(filename1)).not.toBeInTheDocument(),
+        );
 
         expect(mockAddNotification).toHaveBeenCalledTimes(1);
         expect(mockAddNotification.mock.calls[0][0]).toContain('File is too large');
@@ -674,7 +697,9 @@ function axeNoViolations(container) {
             message: {},
           },
         });
-        expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
+        ).not.toBeInTheDocument();
       });
 
       it('should not show attachment previews if no files uploaded and attachments available are only link previews', async () => {
@@ -683,7 +708,9 @@ function axeNoViolations(container) {
             message: { attachments: [generateScrapedDataAttachment()] },
           },
         });
-        expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
+        ).not.toBeInTheDocument();
       });
 
       it('should not show attachment preview list if only failed uploads are available', async () => {
@@ -702,7 +729,9 @@ function axeNoViolations(container) {
         act(() => dropFile(file, formElement));
 
         await waitFor(() => {
-          expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).not.toBeInTheDocument();
+          expect(
+            screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID),
+          ).not.toBeInTheDocument();
         });
       });
 
@@ -849,7 +878,11 @@ function axeNoViolations(container) {
           const { handleChange, handleSubmit, value } = useMessageInputContext();
           return (
             <form>
-              <input onChange={handleChange} placeholder={inputPlaceholder} value={value} />
+              <input
+                onChange={handleChange}
+                placeholder={inputPlaceholder}
+                value={value}
+              />
               <button
                 onClick={(event) => {
                   handleSubmit(event, customMessageData);
@@ -935,11 +968,15 @@ function axeNoViolations(container) {
       });
 
       it('should not do anything if the message is empty and has no files', async () => {
-        const { container, submit } = await renderComponent({ messageInputProps: { message: {} } });
+        const { container, submit } = await renderComponent({
+          messageInputProps: { message: {} },
+        });
 
         await act(() => submit());
 
-        expect(componentName === 'EditMessageForm' ? editMock : submitMock).not.toHaveBeenCalled();
+        expect(
+          componentName === 'EditMessageForm' ? editMock : submitMock,
+        ).not.toHaveBeenCalled();
         await axeNoViolations(container);
       });
 
@@ -957,7 +994,7 @@ function axeNoViolations(container) {
         act(() => dropFile(file, formElement));
 
         // wait for image uploading to complete before trying to send the message
-        // eslint-disable-next-line jest/prefer-called-with
+
         await waitFor(() => expect(doImageUploadRequest).toHaveBeenCalled());
 
         await act(() => submit());
@@ -1001,7 +1038,7 @@ function axeNoViolations(container) {
         act(() => dropFile(file, formElement));
 
         // wait for file uploading to complete before trying to send the message
-        // eslint-disable-next-line jest/prefer-called-with
+
         await waitFor(() => expect(doFileUploadRequest).toHaveBeenCalled());
 
         await act(() => submit());
@@ -1047,7 +1084,7 @@ function axeNoViolations(container) {
         act(() => dropFile(file, formElement));
 
         // wait for file uploading to complete before trying to send the message
-        // eslint-disable-next-line jest/prefer-called-with
+
         await waitFor(() => expect(doFileUploadRequest).toHaveBeenCalled());
 
         await act(() => submit());
@@ -1386,7 +1423,9 @@ function axeNoViolations(container) {
 
       const formElement = await screen.findByPlaceholderText(inputPlaceholder);
 
-      await waitFor(() => expect(screen.queryByText('Suggestion List')).not.toBeInTheDocument());
+      await waitFor(() =>
+        expect(screen.queryByText('Suggestion List')).not.toBeInTheDocument(),
+      );
 
       act(() => {
         fireEvent.change(formElement, {
@@ -1395,8 +1434,8 @@ function axeNoViolations(container) {
       });
 
       if (componentName !== 'EditMessageForm') {
-        await waitFor(
-          () => expect(screen.getByTestId('suggestion-list')).toBeInTheDocument(), // eslint-disable-line
+        await waitFor(() =>
+          expect(screen.getByTestId('suggestion-list')).toBeInTheDocument(),
         );
         const results = await axe(container);
         expect(results).toHaveNoViolations();
@@ -1491,7 +1530,9 @@ describe(`MessageInputFlat only`, () => {
   };
 
   const quotedMessagePreviewIsDisplayedCorrectly = async (message) => {
-    await waitFor(() => expect(screen.queryByTestId('quoted-message-preview')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.queryByTestId('quoted-message-preview')).toBeInTheDocument(),
+    );
     await waitFor(() => expect(screen.getByText(message.text)).toBeInTheDocument());
   };
 
@@ -1538,11 +1579,16 @@ describe(`MessageInputFlat only`, () => {
       const { container } = await renderComponent({
         customChannel: channel,
         customClient: client,
-        messageContextOverrides: { ...defaultMessageContextValue, message: messageWithPoll },
+        messageContextOverrides: {
+          ...defaultMessageContextValue,
+          message: messageWithPoll,
+        },
       });
 
       await initQuotedMessagePreview(messageWithPoll);
-      expect(container.querySelector('.str-chat__quoted-poll-preview')).toBeInTheDocument();
+      expect(
+        container.querySelector('.str-chat__quoted-poll-preview'),
+      ).toBeInTheDocument();
     });
 
     it('renders custom quoted Poll component if message contains poll', async () => {
@@ -1561,7 +1607,10 @@ describe(`MessageInputFlat only`, () => {
         channelProps: { QuotedPoll },
         customChannel: channel,
         customClient: client,
-        messageContextOverrides: { ...defaultMessageContextValue, message: messageWithPoll },
+        messageContextOverrides: {
+          ...defaultMessageContextValue,
+          message: messageWithPoll,
+        },
       });
 
       await initQuotedMessagePreview(messageWithPoll);
@@ -1647,7 +1696,9 @@ describe(`MessageInputFlat only`, () => {
     it('should be removed after cool-down period elapsed', async () => {
       jest.useFakeTimers();
       await renderWithActiveCooldown();
-      expect(screen.getByTestId(COOLDOWN_TIMER_TEST_ID)).toHaveTextContent(cooldown.toString());
+      expect(screen.getByTestId(COOLDOWN_TIMER_TEST_ID)).toHaveTextContent(
+        cooldown.toString(),
+      );
       act(() => {
         jest.advanceTimersByTime(cooldown * 1000);
       });
diff --git a/src/components/MessageInput/hooks/__tests__/useMessageInputState.test.js b/src/components/MessageInput/hooks/__tests__/useMessageInputState.test.js
index da29c86d3..28238d5c7 100644
--- a/src/components/MessageInput/hooks/__tests__/useMessageInputState.test.js
+++ b/src/components/MessageInput/hooks/__tests__/useMessageInputState.test.js
@@ -15,7 +15,11 @@ import {
   generateVoiceRecordingAttachment,
   initClientWithChannels,
 } from '../../../../mock-builders';
-import { ChannelActionProvider, ChannelStateProvider, ChatProvider } from '../../../../context';
+import {
+  ChannelActionProvider,
+  ChannelStateProvider,
+  ChatProvider,
+} from '../../../../context';
 
 const linkPreviewAttachments = Array.from({ length: 3 }, generateScrapedDataAttachment);
 const fileAttachment = generateFileAttachment();
@@ -38,7 +42,12 @@ const message = generateMessage({
 
 window.URL = { revokeObjectURL: jest.fn() };
 
-async function renderUseMessageInputStateHook({ channel, chatContext, client, props } = {}) {
+async function renderUseMessageInputStateHook({
+  channel,
+  chatContext,
+  client,
+  props,
+} = {}) {
   const {
     channels: [defaultChannel],
     client: defaultClient,
@@ -197,253 +206,276 @@ describe('useMessageInputState', () => {
         voiceRecording: generateVoiceRecordingAttachment,
       };
 
-      describe.each([['audio'], ['file'], ['image'], ['video'], ['voiceRecording'], ['custom']])(
-        'of type %s',
-        (type) => {
-          const data = generateAttachment[type]();
-          const fileDataOverrides = {
-            file: {
-              name: type === 'image' ? data.fallback : data.title,
-              type:
-                type === 'image' ? 'image/' + data.fallback.split('.')[1] : data.mime_type ?? '',
-            },
-          };
-          const attachment = {
-            ...(type === 'image'
-              ? generateLocalImageUploadAttachmentData(fileDataOverrides)
-              : generateLocalFileUploadAttachmentData(fileDataOverrides)),
-            ...data,
-          };
-          const getAppSettings = jest.fn();
+      describe.each([
+        ['audio'],
+        ['file'],
+        ['image'],
+        ['video'],
+        ['voiceRecording'],
+        ['custom'],
+      ])('of type %s', (type) => {
+        const data = generateAttachment[type]();
+        const fileDataOverrides = {
+          file: {
+            name: type === 'image' ? data.fallback : data.title,
+            type:
+              type === 'image'
+                ? 'image/' + data.fallback.split('.')[1]
+                : (data.mime_type ?? ''),
+          },
+        };
+        const attachment = {
+          ...(type === 'image'
+            ? generateLocalImageUploadAttachmentData(fileDataOverrides)
+            : generateLocalFileUploadAttachmentData(fileDataOverrides)),
+          ...data,
+        };
+        const getAppSettings = jest.fn();
 
-          it('does not upload attachment if file is missing', async () => {
-            const {
-              channels: [channel],
-              client,
-            } = await initClientWithChannels();
-            const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
-            const { result } = await renderUseMessageInputStateHook({
-              channel,
-              chatContext: { getAppSettings },
-              client,
-            });
-            const att = { ...attachment, localMetadata: { ...attachment.localMetadata } };
-            delete att.localMetadata.file;
-            await act(async () => {
-              await result.current.uploadAttachment(att);
-            });
-            expect(sendFileSpy).not.toHaveBeenCalled();
+        it('does not upload attachment if file is missing', async () => {
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
           });
+          const att = { ...attachment, localMetadata: { ...attachment.localMetadata } };
+          delete att.localMetadata.file;
+          await act(async () => {
+            await result.current.uploadAttachment(att);
+          });
+          expect(sendFileSpy).not.toHaveBeenCalled();
+        });
 
-          it.each([
-            [
-              'not among allowed file extensions',
-              {
-                allowed_file_extensions: [new Date().toISOString()],
-              },
-            ],
-            [
-              'uploading file with blocked extension',
-              {
-                blocked_file_extensions: attachment.localMetadata.file.type?.split('/').slice(-1),
-              },
-            ],
-            [
-              'mime_type not allowed',
-              {
-                allowed_mime_types: [new Date().toISOString()],
-              },
-            ],
-            [
-              'uploading file with blocked mime_type',
-              {
-                blocked_mime_types: [attachment.localMetadata.file.type],
-              },
-            ],
-            [
-              'file exceeds allowed size',
-              {
-                size_limit: attachment.localMetadata.file.size - 1,
-              },
-            ],
-          ])('does not upload attachment if %s in app config', async (_, appConfig) => {
-            getAppSettings.mockReturnValueOnce({
-              app: {
-                [type === 'image' ? 'image_upload_config' : 'file_upload_config']: appConfig,
-              },
-            });
-            const {
-              channels: [channel],
-              client,
-            } = await initClientWithChannels();
-            const originalConsoleError = console.error;
-            const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation((...args) => {
-              if (args[0].message.match('Missing permissions to upload the attachment')) return;
+        it.each([
+          [
+            'not among allowed file extensions',
+            {
+              allowed_file_extensions: [new Date().toISOString()],
+            },
+          ],
+          [
+            'uploading file with blocked extension',
+            {
+              blocked_file_extensions: attachment.localMetadata.file.type
+                ?.split('/')
+                .slice(-1),
+            },
+          ],
+          [
+            'mime_type not allowed',
+            {
+              allowed_mime_types: [new Date().toISOString()],
+            },
+          ],
+          [
+            'uploading file with blocked mime_type',
+            {
+              blocked_mime_types: [attachment.localMetadata.file.type],
+            },
+          ],
+          [
+            'file exceeds allowed size',
+            {
+              size_limit: attachment.localMetadata.file.size - 1,
+            },
+          ],
+        ])('does not upload attachment if %s in app config', async (_, appConfig) => {
+          getAppSettings.mockReturnValueOnce({
+            app: {
+              [type === 'image' ? 'image_upload_config' : 'file_upload_config']:
+                appConfig,
+            },
+          });
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          const originalConsoleError = console.error;
+          const consoleErrorSpy = jest
+            .spyOn(console, 'error')
+            .mockImplementation((...args) => {
+              if (args[0].message.match('Missing permissions to upload the attachment'))
+                return;
               originalConsoleError(...args);
             });
-            const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
-            const { result } = await renderUseMessageInputStateHook({
-              channel,
-              chatContext: { getAppSettings },
-              client,
-            });
-            await act(async () => {
-              await result.current.uploadAttachment(attachment);
-            });
-            expect(sendFileSpy).not.toHaveBeenCalled();
-            consoleErrorSpy.mockRestore();
+          const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
+          });
+          await act(async () => {
+            await result.current.uploadAttachment(attachment);
           });
+          expect(sendFileSpy).not.toHaveBeenCalled();
+          consoleErrorSpy.mockRestore();
+        });
 
-          it('marks attachment as being uploaded', async () => {
-            const assetUrl = 'asset-url';
-            const {
-              channels: [channel],
-              client,
-            } = await initClientWithChannels();
-            jest
-              .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
-              .mockResolvedValue({ file: assetUrl });
-            const { result } = await renderUseMessageInputStateHook({
-              channel,
-              chatContext: { getAppSettings },
-              client,
-            });
-            if (type === 'image') {
-              expect(attachment.localMetadata.previewUri).toBeDefined();
-            }
+        it('marks attachment as being uploaded', async () => {
+          const assetUrl = 'asset-url';
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          jest
+            .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
+            .mockResolvedValue({ file: assetUrl });
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
+          });
+          if (type === 'image') {
+            expect(attachment.localMetadata.previewUri).toBeDefined();
+          }
 
-            await act(async () => {
-              await result.current.uploadAttachment(attachment);
-            });
-            expect(result.current.attachments).toHaveLength(1);
-            expect(result.current.attachments[0].localMetadata.uploadState).toBe('finished');
+          await act(async () => {
+            await result.current.uploadAttachment(attachment);
+          });
+          expect(result.current.attachments).toHaveLength(1);
+          expect(result.current.attachments[0].localMetadata.uploadState).toBe(
+            'finished',
+          );
+
+          if (type === 'image') {
+            expect(result.current.attachments[0].image_url).toBe(assetUrl);
+            expect(
+              result.current.attachments[0].localMetadata.previewUri,
+            ).toBeUndefined();
+          } else {
+            expect(result.current.attachments[0].asset_url).toBe(assetUrl);
+          }
+        });
+
+        it('uses custom upload function', async () => {
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          const customSendSpy = jest.fn();
+          const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
+            props: {
+              [type === 'image' ? 'doImageUploadRequest' : 'doFileUploadRequest']:
+                customSendSpy,
+            },
+          });
+          await act(async () => {
+            await result.current.uploadAttachment(attachment);
+          });
+          expect(sendFileSpy).not.toHaveBeenCalled();
+          expect(customSendSpy).toHaveBeenCalledTimes(1);
+        });
 
-            if (type === 'image') {
-              expect(result.current.attachments[0].image_url).toBe(assetUrl);
-              expect(result.current.attachments[0].localMetadata.previewUri).toBeUndefined();
-            } else {
-              expect(result.current.attachments[0].asset_url).toBe(assetUrl);
-            }
+        it('removes attachment if upload response is falsy', async () => {
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          jest
+            .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
+            .mockResolvedValue(undefined);
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
           });
 
-          it('uses custom upload function', async () => {
-            const {
-              channels: [channel],
-              client,
-            } = await initClientWithChannels();
-            const customSendSpy = jest.fn();
-            const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
-            const { result } = await renderUseMessageInputStateHook({
-              channel,
-              chatContext: { getAppSettings },
-              client,
-              props: {
-                [type === 'image' ? 'doImageUploadRequest' : 'doFileUploadRequest']: customSendSpy,
-              },
-            });
-            await act(async () => {
-              await result.current.uploadAttachment(attachment);
-            });
-            expect(sendFileSpy).not.toHaveBeenCalled();
-            expect(customSendSpy).toHaveBeenCalledTimes(1);
+          await act(async () => {
+            await result.current.uploadAttachment(attachment);
           });
 
-          it('removes attachment if upload response is falsy', async () => {
-            const {
-              channels: [channel],
-              client,
-            } = await initClientWithChannels();
-            jest
-              .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
-              .mockResolvedValue(undefined);
-            const { result } = await renderUseMessageInputStateHook({
-              channel,
-              chatContext: { getAppSettings },
-              client,
-            });
+          expect(result.current.attachments).toHaveLength(0);
+        });
 
-            await act(async () => {
-              await result.current.uploadAttachment(attachment);
-            });
+        const errMsg = 'Went wrong';
+        const errMsgCustom = 'Went wrong custom';
 
-            expect(result.current.attachments).toHaveLength(0);
+        it('invokes custom error handler', async () => {
+          const {
+            channels: [channel],
+            client,
+          } = await initClientWithChannels();
+          jest.spyOn(channel, 'sendFile').mockRejectedValue(new Error(errMsg));
+          const originalConsoleError = console.error;
+          const consoleErrorSpy = jest
+            .spyOn(console, 'error')
+            .mockImplementation((...args) => {
+              if (args[0].message === errMsg) return;
+              originalConsoleError(...args);
+            });
+          const customSendSpy = jest.fn();
+          const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
+          const { result } = await renderUseMessageInputStateHook({
+            channel,
+            chatContext: { getAppSettings },
+            client,
+            props: {
+              [type === 'image' ? 'doImageUploadRequest' : 'doFileUploadRequest']:
+                customSendSpy,
+            },
           });
+          await act(async () => {
+            await result.current.uploadAttachment(attachment);
+          });
+          expect(sendFileSpy).not.toHaveBeenCalled();
+          expect(customSendSpy).toHaveBeenCalledTimes(1);
+          consoleErrorSpy.mockRestore();
+        });
 
-          const errMsg = 'Went wrong';
-          const errMsgCustom = 'Went wrong custom';
-
-          it('invokes custom error handler', async () => {
+        it.each([['default'], ['custom']])(
+          'marks attachment as failed on upload error of %s function',
+          async (scenario) => {
             const {
               channels: [channel],
               client,
             } = await initClientWithChannels();
-            jest.spyOn(channel, 'sendFile').mockRejectedValue(new Error(errMsg));
+            const customSendSpy = jest.fn().mockRejectedValue(new Error(errMsgCustom));
+            jest
+              .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
+              .mockRejectedValue(new Error(errMsg));
             const originalConsoleError = console.error;
-            const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation((...args) => {
-              if (args[0].message === errMsg) return;
-              originalConsoleError(...args);
-            });
-            const customSendSpy = jest.fn();
-            const sendFileSpy = jest.spyOn(channel, 'sendFile').mockResolvedValue({});
+            const consoleErrorSpy = jest
+              .spyOn(console, 'error')
+              .mockImplementation((...args) => {
+                if ([errMsg, errMsgCustom].includes(args[0].message)) return;
+                originalConsoleError(...args);
+              });
             const { result } = await renderUseMessageInputStateHook({
               channel,
               chatContext: { getAppSettings },
               client,
-              props: {
-                [type === 'image' ? 'doImageUploadRequest' : 'doFileUploadRequest']: customSendSpy,
-              },
+              props:
+                scenario === 'custom'
+                  ? {
+                      [type === 'image' ? 'doImageUploadRequest' : 'doFileUploadRequest']:
+                        customSendSpy,
+                    }
+                  : {},
             });
+
             await act(async () => {
               await result.current.uploadAttachment(attachment);
             });
-            expect(sendFileSpy).not.toHaveBeenCalled();
-            expect(customSendSpy).toHaveBeenCalledTimes(1);
-            consoleErrorSpy.mockRestore();
-          });
-
-          it.each([['default'], ['custom']])(
-            'marks attachment as failed on upload error of %s function',
-            async (scenario) => {
-              const {
-                channels: [channel],
-                client,
-              } = await initClientWithChannels();
-              const customSendSpy = jest.fn().mockRejectedValue(new Error(errMsgCustom));
-              jest
-                .spyOn(channel, type === 'image' ? 'sendImage' : 'sendFile')
-                .mockRejectedValue(new Error(errMsg));
-              const originalConsoleError = console.error;
-              const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation((...args) => {
-                if ([errMsg, errMsgCustom].includes(args[0].message)) return;
-                originalConsoleError(...args);
-              });
-              const { result } = await renderUseMessageInputStateHook({
-                channel,
-                chatContext: { getAppSettings },
-                client,
-                props:
-                  scenario === 'custom'
-                    ? {
-                        [type === 'image'
-                          ? 'doImageUploadRequest'
-                          : 'doFileUploadRequest']: customSendSpy,
-                      }
-                    : {},
-              });
 
-              await act(async () => {
-                await result.current.uploadAttachment(attachment);
-              });
-
-              expect(result.current.attachments[0].localMetadata.uploadState).toBe('failed');
-              expect(consoleErrorSpy.mock.calls[0][0].message).toBe(
-                scenario === 'custom' ? errMsgCustom : errMsg,
-              );
-              consoleErrorSpy.mockRestore();
-            },
-          );
-        },
-      );
+            expect(result.current.attachments[0].localMetadata.uploadState).toBe(
+              'failed',
+            );
+            expect(consoleErrorSpy.mock.calls[0][0].message).toBe(
+              scenario === 'custom' ? errMsgCustom : errMsg,
+            );
+            consoleErrorSpy.mockRestore();
+          },
+        );
+      });
     });
   });
 });
diff --git a/src/components/MessageInput/hooks/useAttachments.ts b/src/components/MessageInput/hooks/useAttachments.ts
index a9e279fb7..95a02d416 100644
--- a/src/components/MessageInput/hooks/useAttachments.ts
+++ b/src/components/MessageInput/hooks/useAttachments.ts
@@ -4,7 +4,11 @@ import { nanoid } from 'nanoid';
 import { checkUploadPermissions } from './utils';
 import { isLocalAttachment, isLocalImageAttachment } from '../../Attachment';
 import type { FileLike } from '../../ReactFileUtilities';
-import { createFileFromBlobs, generateFileName, isBlobButNotFile } from '../../ReactFileUtilities';
+import {
+  createFileFromBlobs,
+  generateFileName,
+  isBlobButNotFile,
+} from '../../ReactFileUtilities';
 
 import {
   useChannelActionContext,
@@ -14,7 +18,10 @@ import {
 } from '../../../context';
 
 import type { Attachment, SendFileAPIResponse } from 'stream-chat';
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type {
+  MessageInputReducerAction,
+  MessageInputState,
+} from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 import type {
   AttachmentLoadingState,
@@ -38,7 +45,7 @@ const getAttachmentTypeFromMime = (mimeType: string) => {
 };
 
 const ensureIsLocalAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>,
 ): LocalAttachment<StreamChatGenerics> => {
@@ -57,7 +64,7 @@ const ensureIsLocalAttachment = <
 
 export const useAttachments = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: MessageInputProps<StreamChatGenerics, V>,
   state: MessageInputState<StreamChatGenerics>,
@@ -67,17 +74,18 @@ export const useAttachments = <
   const { doFileUploadRequest, doImageUploadRequest, errorHandler, noFiles } = props;
   const { getAppSettings } = useChatContext<StreamChatGenerics>('useAttachments');
   const { t } = useTranslationContext('useAttachments');
-  const { addNotification } = useChannelActionContext<StreamChatGenerics>('useAttachments');
-  const { channel, maxNumberOfFiles, multipleUploads } = useChannelStateContext<StreamChatGenerics>(
-    'useAttachments',
-  );
+  const { addNotification } =
+    useChannelActionContext<StreamChatGenerics>('useAttachments');
+  const { channel, maxNumberOfFiles, multipleUploads } =
+    useChannelStateContext<StreamChatGenerics>('useAttachments');
 
   // Number of files that the user can still add. Should never be more than the amount allowed by the API.
   // If multipleUploads is false, we only want to allow a single upload.
   const maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
 
   const numberOfUploads = Object.values(state.attachments).filter(
-    ({ localMetadata }) => localMetadata.uploadState && localMetadata.uploadState !== 'failed',
+    ({ localMetadata }) =>
+      localMetadata.uploadState && localMetadata.uploadState !== 'failed',
   ).length;
 
   const maxFilesLeft = maxFilesAllowed - numberOfUploads;
@@ -91,7 +99,12 @@ export const useAttachments = <
   );
 
   const upsertAttachments = useCallback(
-    (attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => {
+    (
+      attachments: (
+        | Attachment<StreamChatGenerics>
+        | LocalAttachment<StreamChatGenerics>
+      )[],
+    ) => {
       if (!attachments.length) return;
       dispatch({
         attachments: attachments.map(ensureIsLocalAttachment),
@@ -163,7 +176,10 @@ export const useAttachments = <
           response = await channel[isImage ? 'sendImage' : 'sendFile'](file);
         }
       } catch (error) {
-        let finalError: Error = { message: t('Error uploading attachment'), name: 'Error' };
+        let finalError: Error = {
+          message: t('Error uploading attachment'),
+          name: 'Error',
+        };
         if (typeof (error as Error).message === 'string') {
           finalError = error as Error;
         } else if (typeof error === 'object') {
@@ -184,7 +200,10 @@ export const useAttachments = <
         upsertAttachments([failedAttachment]);
 
         if (errorHandler) {
-          errorHandler(finalError as Error, 'upload-attachment', { ...file, id: localMetadata.id });
+          errorHandler(finalError as Error, 'upload-attachment', {
+            ...file,
+            id: localMetadata.id,
+          });
         }
 
         return failedAttachment;
@@ -240,7 +259,9 @@ export const useAttachments = <
 
   const uploadNewFiles = useCallback(
     (files: FileList | File[] | FileLike[]) => {
-      const filesToBeUploaded = noFiles ? Array.from(files).filter(isImageFile) : Array.from(files);
+      const filesToBeUploaded = noFiles
+        ? Array.from(files).filter(isImageFile)
+        : Array.from(files);
 
       filesToBeUploaded.slice(0, maxFilesLeft).forEach((fileLike) => {
         uploadAttachment({
diff --git a/src/components/MessageInput/hooks/useCommandTrigger.ts b/src/components/MessageInput/hooks/useCommandTrigger.ts
index c87eff808..b7524517c 100644
--- a/src/components/MessageInput/hooks/useCommandTrigger.ts
+++ b/src/components/MessageInput/hooks/useCommandTrigger.ts
@@ -10,14 +10,15 @@ import type { CommandTriggerSetting } from '../DefaultTriggerProvider';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 type ValidCommand<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Required<Pick<CommandResponse<StreamChatGenerics>, 'name'>> &
   Omit<CommandResponse<StreamChatGenerics>, 'name'>;
 
 export const useCommandTrigger = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(): CommandTriggerSetting<StreamChatGenerics> => {
-  const { channelConfig } = useChannelStateContext<StreamChatGenerics>('useCommandTrigger');
+  const { channelConfig } =
+    useChannelStateContext<StreamChatGenerics>('useCommandTrigger');
   const { t } = useTranslationContext('useCommandTrigger');
 
   const commands = channelConfig?.commands;
@@ -28,7 +29,9 @@ export const useCommandTrigger = <
       if (text.indexOf('/') !== 0 || !commands) {
         return [];
       }
-      const selectedCommands = commands.filter((command) => command.name?.indexOf(query) !== -1);
+      const selectedCommands = commands.filter(
+        (command) => command.name?.indexOf(query) !== -1,
+      );
 
       // sort alphabetically unless you're matching the first char
       selectedCommands.sort((a, b) => {
@@ -58,7 +61,9 @@ export const useCommandTrigger = <
         onReady(
           result
             .filter(
-              (result): result is CommandResponse<StreamChatGenerics> & { name: string } =>
+              (
+                result,
+              ): result is CommandResponse<StreamChatGenerics> & { name: string } =>
                 result.name !== undefined,
             )
             .map((commandData) => {
@@ -71,9 +76,12 @@ export const useCommandTrigger = <
                   defaultValue: commandData.args,
                 });
               if (commandData.description)
-                translatedCommandData.description = t(`${commandData.name}-command-description`, {
-                  defaultValue: commandData.description,
-                });
+                translatedCommandData.description = t(
+                  `${commandData.name}-command-description`,
+                  {
+                    defaultValue: commandData.description,
+                  },
+                );
 
               return translatedCommandData;
             }),
diff --git a/src/components/MessageInput/hooks/useCooldownTimer.tsx b/src/components/MessageInput/hooks/useCooldownTimer.tsx
index a86207ee3..6dec05d5c 100644
--- a/src/components/MessageInput/hooks/useCooldownTimer.tsx
+++ b/src/components/MessageInput/hooks/useCooldownTimer.tsx
@@ -12,12 +12,12 @@ export type CooldownTimerState = {
 };
 
 export const useCooldownTimer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(): CooldownTimerState => {
-  const { client, latestMessageDatesByChannels } = useChatContext<StreamChatGenerics>(
-    'useCooldownTimer',
-  );
-  const { channel, messages = [] } = useChannelStateContext<StreamChatGenerics>('useCooldownTimer');
+  const { client, latestMessageDatesByChannels } =
+    useChatContext<StreamChatGenerics>('useCooldownTimer');
+  const { channel, messages = [] } =
+    useChannelStateContext<StreamChatGenerics>('useCooldownTimer');
   const [cooldownRemaining, setCooldownRemaining] = useState<number>();
 
   const { cooldown: cooldownInterval = 0, own_capabilities } = (channel.data ||
@@ -29,7 +29,9 @@ export const useCooldownTimer = <
     () =>
       latestMessageDatesByChannels[channel.cid] ??
       [...messages]
-        .sort((a, b) => (b.created_at as Date)?.getTime() - (a.created_at as Date)?.getTime())
+        .sort(
+          (a, b) => (b.created_at as Date)?.getTime() - (a.created_at as Date)?.getTime(),
+        )
         .find((v) => v.user?.id === client.user?.id)?.created_at,
     [messages, client.user?.id, latestMessageDatesByChannels, channel.cid],
   ) as Date;
diff --git a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
index 60f09df24..8fa3576ba 100644
--- a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
+++ b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
@@ -5,7 +5,7 @@ import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/ty
 
 export const useCreateMessageInputContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   value: MessageInputContextValue<StreamChatGenerics, V>,
 ) => {
diff --git a/src/components/MessageInput/hooks/useLinkPreviews.ts b/src/components/MessageInput/hooks/useLinkPreviews.ts
index 5f37dd2d6..7f9913310 100644
--- a/src/components/MessageInput/hooks/useLinkPreviews.ts
+++ b/src/components/MessageInput/hooks/useLinkPreviews.ts
@@ -2,7 +2,10 @@ import { find } from 'linkifyjs';
 import { Dispatch, useCallback, useEffect, useRef } from 'react';
 import debounce from 'lodash.debounce';
 import { useChannelStateContext, useChatContext } from '../../../context';
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type {
+  MessageInputReducerAction,
+  MessageInputState,
+} from './useMessageInputState';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { LinkPreview, LinkPreviewMap } from '../types';
 import { LinkPreviewState, SetLinkPreviewMode } from '../types';
@@ -20,7 +23,7 @@ export type URLEnrichmentConfig = {
 };
 
 type UseEnrichURLsParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = URLEnrichmentConfig & {
   dispatch: Dispatch<MessageInputReducerAction<StreamChatGenerics>>;
   linkPreviews: MessageInputState<StreamChatGenerics>['linkPreviews'];
@@ -32,11 +35,13 @@ export type EnrichURLsController = {
   /** Function called when a single link preview is dismissed. */
   dismissLinkPreview: (linkPreview: LinkPreview) => void;
   /** Function that triggers the search for URLs and their enrichment. */
-  findAndEnqueueURLsToEnrich?: DebouncedFunc<(text: string, mode?: SetLinkPreviewMode) => void>;
+  findAndEnqueueURLsToEnrich?: DebouncedFunc<
+    (text: string, mode?: SetLinkPreviewMode) => void
+  >;
 };
 
 export const useLinkPreviews = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   debounceURLEnrichmentMs: debounceURLEnrichmentMsInputContext,
   dispatch,
@@ -174,6 +179,8 @@ export const useLinkPreviews = <
     cancelURLEnrichment,
     dismissLinkPreview,
     findAndEnqueueURLsToEnrich:
-      channelConfig?.url_enrichment && enrichURLForPreview ? findAndEnqueueURLsToEnrich : undefined,
+      channelConfig?.url_enrichment && enrichURLForPreview
+        ? findAndEnqueueURLsToEnrich
+        : undefined,
   };
 };
diff --git a/src/components/MessageInput/hooks/useMessageInputState.ts b/src/components/MessageInput/hooks/useMessageInputState.ts
index 5c95f6c77..29d1c7ee7 100644
--- a/src/components/MessageInput/hooks/useMessageInputState.ts
+++ b/src/components/MessageInput/hooks/useMessageInputState.ts
@@ -1,14 +1,20 @@
 import React, { Reducer, useCallback, useReducer, useState } from 'react';
 import { nanoid } from 'nanoid';
 
-import { StreamMessage, useChannelStateContext } from '../../../context/ChannelStateContext';
+import {
+  StreamMessage,
+  useChannelStateContext,
+} from '../../../context/ChannelStateContext';
 
 import { useAttachments } from './useAttachments';
 import { EnrichURLsController, useLinkPreviews } from './useLinkPreviews';
 import { useMessageInputText } from './useMessageInputText';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
-import { RecordingController, useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
+import {
+  RecordingController,
+  useMediaRecorder,
+} from '../../MediaRecorder/hooks/useMediaRecorder';
 import type { LinkPreviewMap, LocalAttachment } from '../types';
 import { LinkPreviewState, SetLinkPreviewMode } from '../types';
 import type { Attachment, Message, OGAttachment, UserResponse } from 'stream-chat';
@@ -23,7 +29,7 @@ import type {
 import { mergeDeep } from '../../../utils/mergeDeep';
 
 export type MessageInputState<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachments: LocalAttachment<StreamChatGenerics>[];
   linkPreviews: LinkPreviewMap;
@@ -33,7 +39,7 @@ export type MessageInputState<
 };
 
 type UpsertAttachmentsAction<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachments: LocalAttachment<StreamChatGenerics>[];
   type: 'upsertAttachments';
@@ -60,14 +66,14 @@ type SetLinkPreviewsAction = {
 };
 
 type AddMentionedUserAction<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   type: 'addMentionedUser';
   user: UserResponse<StreamChatGenerics>;
 };
 
 export type MessageInputReducerAction<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > =
   | SetTextAction
   | ClearAction
@@ -77,7 +83,7 @@ export type MessageInputReducerAction<
   | RemoveAttachmentsAction;
 
 export type MessageInputHookProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = EnrichURLsController & {
   handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
   handleSubmit: (
@@ -104,7 +110,7 @@ export type MessageInputHookProps<
 };
 
 const makeEmptyMessageInputState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(): MessageInputState<StreamChatGenerics> => ({
   attachments: [],
   linkPreviews: new Map(),
@@ -117,9 +123,12 @@ const makeEmptyMessageInputState = <
  * Initializes the state. Empty if the message prop is falsy.
  */
 const initState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  message?: Pick<StreamMessage<StreamChatGenerics>, 'attachments' | 'mentioned_users' | 'text'>,
+  message?: Pick<
+    StreamMessage<StreamChatGenerics>,
+    'attachments' | 'mentioned_users' | 'text'
+  >,
 ): MessageInputState<StreamChatGenerics> => {
   if (!message) {
     return makeEmptyMessageInputState();
@@ -143,7 +152,7 @@ const initState = <
           ({
             ...att,
             localMetadata: { id: nanoid() },
-          } as LocalAttachment<StreamChatGenerics>),
+          }) as LocalAttachment<StreamChatGenerics>,
       ) || [];
 
   const mentioned_users: StreamMessage['mentioned_users'] = message.mentioned_users || [];
@@ -161,7 +170,7 @@ const initState = <
  * MessageInput state reducer
  */
 const messageInputReducer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   state: MessageInputState<StreamChatGenerics>,
   action: MessageInputReducerAction<StreamChatGenerics>,
@@ -178,7 +187,8 @@ const messageInputReducer = <
       action.attachments.forEach((actionAttachment) => {
         const attachmentIndex = state.attachments.findIndex(
           (att) =>
-            att.localMetadata?.id && att.localMetadata?.id === actionAttachment.localMetadata?.id,
+            att.localMetadata?.id &&
+            att.localMetadata?.id === actionAttachment.localMetadata?.id,
         );
 
         if (attachmentIndex === -1) {
@@ -201,7 +211,9 @@ const messageInputReducer = <
     case 'removeAttachments': {
       return {
         ...state,
-        attachments: state.attachments.filter((att) => !action.ids.includes(att.localMetadata?.id)),
+        attachments: state.attachments.filter(
+          (att) => !action.ids.includes(att.localMetadata?.id),
+        ),
       };
     }
 
@@ -213,16 +225,19 @@ const messageInputReducer = <
           linkPreviews.delete(key);
         });
       } else {
-        Array.from(action.linkPreviews.values()).reduce<LinkPreviewMap>((acc, linkPreview) => {
-          const existingPreview = acc.get(linkPreview.og_scrape_url);
-          const alreadyEnqueued =
-            linkPreview.state === LinkPreviewState.QUEUED &&
-            existingPreview?.state !== LinkPreviewState.FAILED;
-
-          if (existingPreview && alreadyEnqueued) return acc;
-          acc.set(linkPreview.og_scrape_url, linkPreview);
-          return acc;
-        }, linkPreviews);
+        Array.from(action.linkPreviews.values()).reduce<LinkPreviewMap>(
+          (acc, linkPreview) => {
+            const existingPreview = acc.get(linkPreview.og_scrape_url);
+            const alreadyEnqueued =
+              linkPreview.state === LinkPreviewState.QUEUED &&
+              existingPreview?.state !== LinkPreviewState.FAILED;
+
+            if (existingPreview && alreadyEnqueued) return acc;
+            acc.set(linkPreview.og_scrape_url, linkPreview);
+            return acc;
+          },
+          linkPreviews,
+        );
 
         if (action.mode === SetLinkPreviewMode.SET) {
           Array.from(state.linkPreviews.keys()).forEach((key) => {
@@ -265,7 +280,7 @@ export type MentionsListState = {
  */
 export const useMessageInputState = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: MessageInputProps<StreamChatGenerics, V>,
 ): MessageInputState<StreamChatGenerics> &
@@ -292,7 +307,9 @@ export const useMessageInputState = <
     message ||
     ((Array.isArray(defaultValue)
       ? { text: defaultValue.join('') }
-      : { text: defaultValue?.toString() }) as Partial<StreamMessage<StreamChatGenerics>>);
+      : { text: defaultValue?.toString() }) as Partial<
+      StreamMessage<StreamChatGenerics>
+    >);
 
   const [state, dispatch] = useReducer(
     messageInputReducer as Reducer<
@@ -311,12 +328,10 @@ export const useMessageInputState = <
       urlEnrichmentConfig?.enrichURLForPreview ?? enrichURLForPreviewChannelContext,
   });
 
-  const { handleChange, insertText, textareaRef } = useMessageInputText<StreamChatGenerics, V>(
-    props,
-    state,
-    dispatch,
-    enrichURLsController.findAndEnqueueURLsToEnrich,
-  );
+  const { handleChange, insertText, textareaRef } = useMessageInputText<
+    StreamChatGenerics,
+    V
+  >(props, state, dispatch, enrichURLsController.findAndEnqueueURLsToEnrich);
 
   const [showCommandsList, setShowCommandsList] = useState(false);
   const [showMentionsList, setShowMentionsList] = useState(false);
diff --git a/src/components/MessageInput/hooks/useMessageInputText.ts b/src/components/MessageInput/hooks/useMessageInputText.ts
index f462401cc..3f2a556f0 100644
--- a/src/components/MessageInput/hooks/useMessageInputText.ts
+++ b/src/components/MessageInput/hooks/useMessageInputText.ts
@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { logChatPromiseExecution } from 'stream-chat';
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type {
+  MessageInputReducerAction,
+  MessageInputState,
+} from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
 
@@ -9,7 +12,7 @@ import type { EnrichURLsController } from './useLinkPreviews';
 
 export const useMessageInputText = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: MessageInputProps<StreamChatGenerics, V>,
   state: MessageInputState<StreamChatGenerics>,
@@ -55,7 +58,9 @@ export const useMessageInputText = <
       dispatch({
         getNewText: (prevText) => {
           const updatedText =
-            prevText.slice(0, selectionStart) + textToInsert + prevText.slice(selectionEnd);
+            prevText.slice(0, selectionStart) +
+            textToInsert +
+            prevText.slice(selectionEnd);
 
           if (maxLength && updatedText.length > maxLength) {
             return updatedText.slice(0, maxLength);
diff --git a/src/components/MessageInput/hooks/useSubmitHandler.ts b/src/components/MessageInput/hooks/useSubmitHandler.ts
index 5df169afd..f40ea4047 100644
--- a/src/components/MessageInput/hooks/useSubmitHandler.ts
+++ b/src/components/MessageInput/hooks/useSubmitHandler.ts
@@ -6,7 +6,10 @@ import { LinkPreviewState } from '../types';
 
 import type { Attachment, Message, UpdatedMessage } from 'stream-chat';
 
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type {
+  MessageInputReducerAction,
+  MessageInputState,
+} from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
 
 import type {
@@ -18,7 +21,7 @@ import type { EnrichURLsController } from './useLinkPreviews';
 
 export const useSubmitHandler = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: MessageInputProps<StreamChatGenerics, V>,
   state: MessageInputState<StreamChatGenerics>,
@@ -26,15 +29,20 @@ export const useSubmitHandler = <
   numberOfUploads: number,
   enrichURLsController: EnrichURLsController,
 ) => {
-  const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent } = props;
+  const {
+    clearEditingState,
+    message,
+    overrideSubmitHandler,
+    parent,
+    publishTypingEvent,
+  } = props;
 
   const { attachments, linkPreviews, mentioned_users, text } = state;
 
   const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
   const { channel } = useChannelStateContext<StreamChatGenerics>('useSubmitHandler');
-  const { addNotification, editMessage, sendMessage } = useChannelActionContext<StreamChatGenerics>(
-    'useSubmitHandler',
-  );
+  const { addNotification, editMessage, sendMessage } =
+    useChannelActionContext<StreamChatGenerics>('useSubmitHandler');
   const { t } = useTranslationContext('useSubmitHandler');
 
   const textReference = useRef({ hasChanged: false, initialText: text });
@@ -87,6 +95,7 @@ export const useSubmitHandler = <
           (findAndEnqueueURLsToEnrich && !att.og_scrape_url), // filter out all the attachments scraped before the message was edited
       )
       .map((localAttachment) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { localMetadata: _, ...attachment } = localAttachment;
         return attachment as Attachment;
       });
@@ -96,8 +105,9 @@ export const useSubmitHandler = <
     if (findAndEnqueueURLsToEnrich) {
       // prevent showing link preview in MessageInput after the message has been sent
       cancelURLEnrichment();
-      const someLinkPreviewsLoading = Array.from(linkPreviews.values()).some((linkPreview) =>
-        [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state),
+      const someLinkPreviewsLoading = Array.from(linkPreviews.values()).some(
+        (linkPreview) =>
+          [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state),
       );
       const someLinkPreviewsDismissed = Array.from(linkPreviews.values()).some(
         (linkPreview) => linkPreview.state === LinkPreviewState.DISMISSED,
@@ -110,11 +120,16 @@ export const useSubmitHandler = <
               (linkPreview) =>
                 linkPreview.state === LinkPreviewState.LOADED &&
                 !attachmentsFromUploads.find(
-                  (attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url,
+                  (attFromUpload) =>
+                    attFromUpload.og_scrape_url === linkPreview.og_scrape_url,
                 ),
             )
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            .map(({ state: linkPreviewState, ...ogAttachment }) => ogAttachment as Attachment);
+
+            .map(
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              ({ state: linkPreviewState, ...ogAttachment }) =>
+                ogAttachment as Attachment,
+            );
 
       // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
       sendOptions.skip_enrich_url =
@@ -146,11 +161,11 @@ export const useSubmitHandler = <
 
       try {
         await editMessage(
-          ({
+          {
             ...message,
             ...updatedMessage,
             ...customMessageData,
-          } as unknown) as UpdatedMessage<StreamChatGenerics>,
+          } as unknown as UpdatedMessage<StreamChatGenerics>,
           sendOptions,
         );
 
diff --git a/src/components/MessageInput/hooks/useUserTrigger.ts b/src/components/MessageInput/hooks/useUserTrigger.ts
index 0d7acdc52..061c624b2 100644
--- a/src/components/MessageInput/hooks/useUserTrigger.ts
+++ b/src/components/MessageInput/hooks/useUserTrigger.ts
@@ -16,7 +16,7 @@ import type { UserTriggerSetting } from '../../MessageInput/DefaultTriggerProvid
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export type UserTriggerParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   onSelectUser: (item: UserResponse<StreamChatGenerics>) => void;
   disableMentions?: boolean;
@@ -26,7 +26,7 @@ export type UserTriggerParams<
 };
 
 export const useUserTrigger = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: UserTriggerParams<StreamChatGenerics>,
 ): UserTriggerSetting<StreamChatGenerics> => {
@@ -66,7 +66,10 @@ export const useUserTrigger = <
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const queryMembersThrottled = useCallback(
     throttle(
-      async (query: string, onReady: (users: UserResponse<StreamChatGenerics>[]) => void) => {
+      async (
+        query: string,
+        onReady: (users: UserResponse<StreamChatGenerics>[]) => void,
+      ) => {
         try {
           // @ts-expect-error valid query
           const response = await channel.queryMembers({
@@ -144,7 +147,9 @@ export const useUserTrigger = <
             mutes.some((mute) => mute.target.id === suggestion.id),
           );
         }
-        return data.filter((suggestion) => mutes.every((mute) => mute.target.id !== suggestion.id));
+        return data.filter((suggestion) =>
+          mutes.every((mute) => mute.target.id !== suggestion.id),
+        );
       };
 
       if (mentionAllAppUsers) {
diff --git a/src/components/MessageInput/hooks/utils.ts b/src/components/MessageInput/hooks/utils.ts
index 84917dcd6..c0a54f42f 100644
--- a/src/components/MessageInput/hooks/utils.ts
+++ b/src/components/MessageInput/hooks/utils.ts
@@ -60,7 +60,7 @@ export const calculateLevenshtein = (query: string, name: string) => {
 };
 
 export type SearchLocalUserParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   ownUserId: string | undefined;
   query: string;
@@ -70,7 +70,7 @@ export type SearchLocalUserParams<
 };
 
 export const searchLocalUsers = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: SearchLocalUserParams<StreamChatGenerics>,
 ): UserResponse<StreamChatGenerics>[] => {
@@ -99,7 +99,10 @@ export const searchLocalUsers = <
 
     if (updatedName) {
       const levenshtein = calculateLevenshtein(updatedQuery, updatedName);
-      if (updatedName.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits)) {
+      if (
+        updatedName.includes(updatedQuery) ||
+        (levenshtein <= maxDistance && lastDigits)
+      ) {
         return true;
       }
     }
@@ -113,7 +116,7 @@ export const searchLocalUsers = <
 };
 
 type CheckUploadPermissionsParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   addNotification: ChannelActionContextValue<StreamChatGenerics>['addNotification'];
   file: File;
@@ -123,7 +126,7 @@ type CheckUploadPermissionsParams<
 };
 
 export const checkUploadPermissions = async <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: CheckUploadPermissionsParams<StreamChatGenerics>,
 ) => {
@@ -145,7 +148,9 @@ export const checkUploadPermissions = async <
 
   const sendNotAllowedErrorNotification = () =>
     addNotification(
-      t(`Upload type: "{{ type }}" is not allowed`, { type: file.type || 'unknown type' }),
+      t(`Upload type: "{{ type }}" is not allowed`, {
+        type: file.type || 'unknown type',
+      }),
       'error',
     );
 
@@ -210,7 +215,10 @@ export const checkUploadPermissions = async <
 
 export function prettifyFileSize(bytes: number, precision = 3) {
   const units = ['B', 'kB', 'MB', 'GB'];
-  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const exponent = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    units.length - 1,
+  );
   const mantissa = bytes / 1024 ** exponent;
   const formattedMantissa =
     precision === 0 ? Math.round(mantissa).toString() : mantissa.toPrecision(precision);
diff --git a/src/components/MessageInput/icons.tsx b/src/components/MessageInput/icons.tsx
index 8e7310066..710f32c00 100644
--- a/src/components/MessageInput/icons.tsx
+++ b/src/components/MessageInput/icons.tsx
@@ -16,7 +16,13 @@ export const LoadingIndicatorIcon = ({ size = 20 }: { size?: number }) => {
         xmlns='http://www.w3.org/2000/svg'
       >
         <defs>
-          <linearGradient id={`${id}-linear-gradient`} x1='50%' x2='50%' y1='0%' y2='100%'>
+          <linearGradient
+            id={`${id}-linear-gradient`}
+            x1='50%'
+            x2='50%'
+            y1='0%'
+            y2='100%'
+          >
             <stop offset='0%' stopColor='#FFF' stopOpacity='0' />
             <stop data-testid='stop-color' offset='100%' stopOpacity='1' />
           </linearGradient>
@@ -107,7 +113,13 @@ export const DownloadIcon = () => (
 );
 
 export const LinkIcon = () => (
-  <svg fill='none' height='11' viewBox='0 0 20 11' width='20' xmlns='http://www.w3.org/2000/svg'>
+  <svg
+    fill='none'
+    height='11'
+    viewBox='0 0 20 11'
+    width='20'
+    xmlns='http://www.w3.org/2000/svg'
+  >
     <path
       clipRule='evenodd'
       d='M1.9 5.5C1.9 3.79 3.29 2.4 5 2.4H8.05C8.57467 2.4 9 1.97467 9 1.45C9 0.925329 8.57467 0.5 8.05 0.5H5C2.24 0.5 0 2.74 0 5.5C0 8.26 2.24 10.5 5 10.5H8.05C8.57467 10.5 9 10.0747 9 9.55C9 9.02533 8.57467 8.6 8.05 8.6H5C3.29 8.6 1.9 7.21 1.9 5.5ZM6 5.5C6 6.05228 6.44772 6.5 7 6.5H13C13.5523 6.5 14 6.05228 14 5.5C14 4.94772 13.5523 4.5 13 4.5H7C6.44772 4.5 6 4.94772 6 5.5ZM15 0.5H11.95C11.4253 0.5 11 0.925329 11 1.45C11 1.97467 11.4253 2.4 11.95 2.4H15C16.71 2.4 18.1 3.79 18.1 5.5C18.1 7.21 16.71 8.6 15 8.6H11.95C11.4253 8.6 11 9.02533 11 9.55C11 10.0747 11.4253 10.5 11.95 10.5H15C17.76 10.5 20 8.26 20 5.5C20 2.74 17.76 0.5 15 0.5Z'
diff --git a/src/components/MessageInput/types.ts b/src/components/MessageInput/types.ts
index b9b2a77f2..325cfc556 100644
--- a/src/components/MessageInput/types.ts
+++ b/src/components/MessageInput/types.ts
@@ -1,4 +1,9 @@
-import type { Attachment, DefaultGenerics, ExtendableGenerics, OGAttachment } from 'stream-chat';
+import type {
+  Attachment,
+  DefaultGenerics,
+  ExtendableGenerics,
+  OGAttachment,
+} from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AttachmentLoadingState = 'uploading' | 'finished' | 'failed';
@@ -31,7 +36,7 @@ export enum SetLinkPreviewMode {
 export type LinkPreviewMap = Map<LinkURL, LinkPreview>;
 
 export type VoiceRecordingAttachment<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
+  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics,
 > = Attachment<StreamChatGenerics> & {
   asset_url: string;
   type: 'voiceRecording';
@@ -42,18 +47,17 @@ export type VoiceRecordingAttachment<
   waveform_data?: Array<number>;
 };
 
-type FileAttachment<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
-> = Attachment<StreamChatGenerics> & {
-  type: 'file';
-  asset_url?: string;
-  file_size?: number;
-  mime_type?: string;
-  title?: string;
-};
+type FileAttachment<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> =
+  Attachment<StreamChatGenerics> & {
+    type: 'file';
+    asset_url?: string;
+    file_size?: number;
+    mime_type?: string;
+    title?: string;
+  };
 
 export type AudioAttachment<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
+  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics,
 > = Attachment<StreamChatGenerics> & {
   type: 'audio';
   asset_url?: string;
@@ -63,7 +67,7 @@ export type AudioAttachment<
 };
 
 export type VideoAttachment<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
+  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics,
 > = Attachment<StreamChatGenerics> & {
   type: 'video';
   asset_url?: string;
@@ -72,15 +76,14 @@ export type VideoAttachment<
   title?: string;
 };
 
-type ImageAttachment<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
-> = Attachment<StreamChatGenerics> & {
-  type: 'image';
-  fallback?: string;
-  image_url?: string;
-  original_height?: number;
-  original_width?: number;
-};
+type ImageAttachment<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> =
+  Attachment<StreamChatGenerics> & {
+    type: 'image';
+    fallback?: string;
+    image_url?: string;
+    original_height?: number;
+    original_width?: number;
+  };
 
 export type BaseLocalAttachmentMetadata = {
   id: string;
@@ -99,13 +102,12 @@ export type LocalAttachmentCast<A, L = Record<string, unknown>> = A & {
   localMetadata: L & BaseLocalAttachmentMetadata;
 };
 
-export type LocalAttachmentMetadata<
-  CustomLocalMetadata = Record<string, unknown>
-> = CustomLocalMetadata & BaseLocalAttachmentMetadata & LocalImageAttachmentUploadMetadata;
+export type LocalAttachmentMetadata<CustomLocalMetadata = Record<string, unknown>> =
+  CustomLocalMetadata & BaseLocalAttachmentMetadata & LocalImageAttachmentUploadMetadata;
 
 export type LocalVoiceRecordingAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   VoiceRecordingAttachment<StreamChatGenerics>,
   LocalAttachmentUploadMetadata & CustomLocalMetadata
@@ -113,7 +115,7 @@ export type LocalVoiceRecordingAttachment<
 
 export type LocalAudioAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   AudioAttachment<StreamChatGenerics>,
   LocalAttachmentUploadMetadata & CustomLocalMetadata
@@ -121,7 +123,7 @@ export type LocalAudioAttachment<
 
 export type LocalVideoAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   VideoAttachment<StreamChatGenerics>,
   LocalAttachmentUploadMetadata & CustomLocalMetadata
@@ -129,7 +131,7 @@ export type LocalVideoAttachment<
 
 export type LocalImageAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   ImageAttachment<StreamChatGenerics>,
   LocalImageAttachmentUploadMetadata & CustomLocalMetadata
@@ -137,7 +139,7 @@ export type LocalImageAttachment<
 
 export type LocalFileAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   FileAttachment<StreamChatGenerics>,
   LocalAttachmentUploadMetadata & CustomLocalMetadata
@@ -145,14 +147,14 @@ export type LocalFileAttachment<
 
 export type AnyLocalAttachment<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = LocalAttachmentCast<
   Attachment<StreamChatGenerics>,
   LocalAttachmentMetadata<CustomLocalMetadata>
 >;
 
 export type LocalAttachment<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > =
   | AnyLocalAttachment<StreamChatGenerics>
   | LocalFileAttachment<StreamChatGenerics>
@@ -163,7 +165,7 @@ export type LocalAttachment<
 
 export type LocalAttachmentToUpload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  CustomLocalMetadata = Record<string, unknown>
+  CustomLocalMetadata = Record<string, unknown>,
 > = Partial<Attachment<StreamChatGenerics>> & {
   localMetadata: Partial<BaseLocalAttachmentMetadata> &
     LocalAttachmentUploadMetadata &
diff --git a/src/components/MessageList/ConnectionStatus.tsx b/src/components/MessageList/ConnectionStatus.tsx
index 8099baa62..388f4d351 100644
--- a/src/components/MessageList/ConnectionStatus.tsx
+++ b/src/components/MessageList/ConnectionStatus.tsx
@@ -7,7 +7,7 @@ import { useChatContext, useTranslationContext } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const UnMemoizedConnectionStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const { client } = useChatContext<StreamChatGenerics>('ConnectionStatus');
   const { t } = useTranslationContext('ConnectionStatus');
@@ -15,7 +15,9 @@ const UnMemoizedConnectionStatus = <
   const [online, setOnline] = useState(true);
 
   useEffect(() => {
-    const connectionChanged = ({ online: onlineStatus = false }: Event<StreamChatGenerics>) => {
+    const connectionChanged = ({
+      online: onlineStatus = false,
+    }: Event<StreamChatGenerics>) => {
       if (online !== onlineStatus) {
         setOnline(onlineStatus);
       }
diff --git a/src/components/MessageList/CustomNotification.tsx b/src/components/MessageList/CustomNotification.tsx
index 5afe9c809..7c721f237 100644
--- a/src/components/MessageList/CustomNotification.tsx
+++ b/src/components/MessageList/CustomNotification.tsx
@@ -7,7 +7,9 @@ export type CustomNotificationProps = {
   className?: string;
 };
 
-const UnMemoizedCustomNotification = (props: PropsWithChildren<CustomNotificationProps>) => {
+const UnMemoizedCustomNotification = (
+  props: PropsWithChildren<CustomNotificationProps>,
+) => {
   const { active, children, className, type } = props;
 
   if (!active) return null;
diff --git a/src/components/MessageList/GiphyPreviewMessage.tsx b/src/components/MessageList/GiphyPreviewMessage.tsx
index 66ae87b34..91f0ad4b5 100644
--- a/src/components/MessageList/GiphyPreviewMessage.tsx
+++ b/src/components/MessageList/GiphyPreviewMessage.tsx
@@ -6,13 +6,13 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type GiphyPreviewMessageProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   message: StreamMessage<StreamChatGenerics>;
 };
 
 export const GiphyPreviewMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: GiphyPreviewMessageProps<StreamChatGenerics>,
 ) => {
diff --git a/src/components/MessageList/MessageList.tsx b/src/components/MessageList/MessageList.tsx
index ddeb86d19..405288d05 100644
--- a/src/components/MessageList/MessageList.tsx
+++ b/src/components/MessageList/MessageList.tsx
@@ -26,7 +26,10 @@ import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageListContextProvider } from '../../context/MessageListContext';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
+import {
+  InfiniteScroll,
+  InfiniteScrollProps,
+} from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
@@ -46,12 +49,12 @@ import {
 } from '../../constants/limits';
 
 type MessageListWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<ChannelStateContextValue<StreamChatGenerics>, 'members' | 'mutes' | 'watchers'> &
   MessageListProps<StreamChatGenerics>;
 
 const MessageListWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageListWithContextProps<StreamChatGenerics>,
 ) => {
@@ -60,36 +63,36 @@ const MessageListWithContext = <
     channelUnreadUiState,
     disableDateSeparator = false,
     groupStyles,
+    hasMoreNewer = false,
+    headerPosition,
     hideDeletedMessages = false,
     hideNewMessageSeparator = false,
+    highlightedMessageId,
     internalInfiniteScrollProps: {
       threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,
       ...restInternalInfiniteScrollProps
     } = {},
+    jumpToLatestMessage = () => Promise.resolve(),
+    loadMore: loadMoreCallback,
+    loadMoreNewer: loadMoreNewerCallback, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     maxTimeBetweenGroupedMessages,
     messageActions = Object.keys(MESSAGE_ACTIONS),
+    messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
     messages = [],
-    notifications,
     noGroupByUser = false,
-    pinPermissions = defaultPinPermissions, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = false,
-    threadList = false,
-    unsafeHTML = false,
-    headerPosition,
+    notifications,
+    pinPermissions = defaultPinPermissions,
+    reactionDetailsSort,
     read,
     renderMessages = defaultRenderMessages,
+    returnAllReadData = false,
     reviewProcessedMessage,
-    messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
-    loadMore: loadMoreCallback,
-    loadMoreNewer: loadMoreNewerCallback,
-    hasMoreNewer = false,
-    reactionDetailsSort,
     showUnreadNotificationAlways,
     sortReactionDetails,
     sortReactions,
     suppressAutoscroll,
-    highlightedMessageId,
-    jumpToLatestMessage = () => Promise.resolve(),
+    threadList = false,
+    unsafeHTML = false,
   } = props;
 
   const [listElement, setListElement] = React.useState<HTMLDivElement | null>(null);
@@ -100,11 +103,11 @@ const MessageListWithContext = <
   const {
     EmptyStateIndicator = DefaultEmptyStateIndicator,
     LoadingIndicator = DefaultLoadingIndicator,
+    MessageListMainPanel = DefaultMessageListMainPanel,
     MessageListNotifications = DefaultMessageListNotifications,
     MessageNotification = DefaultMessageNotification,
     TypingIndicator = DefaultTypingIndicator,
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
-    MessageListMainPanel = DefaultMessageListMainPanel,
   } = useComponentContext<StreamChatGenerics>('MessageList');
 
   const {
@@ -160,7 +163,8 @@ const MessageListWithContext = <
       getFlagMessageErrorNotification: props.getFlagMessageErrorNotification,
       getFlagMessageSuccessNotification: props.getFlagMessageSuccessNotification,
       getMarkMessageUnreadErrorNotification: props.getMarkMessageUnreadErrorNotification,
-      getMarkMessageUnreadSuccessNotification: props.getMarkMessageUnreadSuccessNotification,
+      getMarkMessageUnreadSuccessNotification:
+        props.getMarkMessageUnreadSuccessNotification,
       getMuteUserErrorNotification: props.getMuteUserErrorNotification,
       getMuteUserSuccessNotification: props.getMuteUserSuccessNotification,
       getPinMessageErrorNotification: props.getPinMessageErrorNotification,
@@ -213,7 +217,9 @@ const MessageListWithContext = <
 
   React.useLayoutEffect(() => {
     if (highlightedMessageId) {
-      const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+      const element = ulElement?.querySelector(
+        `[data-message-id='${highlightedMessageId}']`,
+      );
       element?.scrollIntoView({ block: 'center' });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -228,7 +234,9 @@ const MessageListWithContext = <
       <MessageListMainPanel>
         <DialogManagerProvider id={dialogManagerId}>
           {!threadList && showUnreadMessagesNotification && (
-            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
+            <UnreadMessagesNotification
+              unreadCount={channelUnreadUiState?.unread_messages}
+            />
           )}
           <div
             className={clsx(messageListClass, customClasses?.threadList)}
@@ -312,7 +320,7 @@ type PropsDrilledToMessage =
   | 'unsafeHTML';
 
 export type MessageListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
   /** Disables the injection of date separator components in MessageList, defaults to `false` */
   disableDateSeparator?: boolean;
@@ -388,15 +396,12 @@ export type MessageListProps<
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
 export const MessageList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageListProps<StreamChatGenerics>,
 ) => {
-  const {
-    jumpToLatestMessage,
-    loadMore,
-    loadMoreNewer,
-  } = useChannelActionContext<StreamChatGenerics>('MessageList');
+  const { jumpToLatestMessage, loadMore, loadMoreNewer } =
+    useChannelActionContext<StreamChatGenerics>('MessageList');
 
   const {
     members: membersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
diff --git a/src/components/MessageList/MessageListMainPanel.tsx b/src/components/MessageList/MessageListMainPanel.tsx
index 8dd72069a..3c2635ac1 100644
--- a/src/components/MessageList/MessageListMainPanel.tsx
+++ b/src/components/MessageList/MessageListMainPanel.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import type { PropsWithChildrenOnly } from '../../types/types';
 
-export const MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner str-chat__message-list-main-panel' as const;
+export const MESSAGE_LIST_MAIN_PANEL_CLASS =
+  'str-chat__main-panel-inner str-chat__message-list-main-panel' as const;
 
 export const MessageListMainPanel = ({ children }: PropsWithChildrenOnly) => (
   <div className={MESSAGE_LIST_MAIN_PANEL_CLASS}>{children}</div>
diff --git a/src/components/MessageList/MessageListNotifications.tsx b/src/components/MessageList/MessageListNotifications.tsx
index e1f393d96..3db3a9918 100644
--- a/src/components/MessageList/MessageListNotifications.tsx
+++ b/src/components/MessageList/MessageListNotifications.tsx
@@ -49,7 +49,9 @@ export const MessageListNotifications = (props: MessageListNotificationsProps) =
         threadList={threadList}
         unreadCount={unreadCount}
       >
-        {isNotAtLatestMessageSet ? t<string>('Latest Messages') : t<string>('New Messages!')}
+        {isNotAtLatestMessageSet
+          ? t<string>('Latest Messages')
+          : t<string>('New Messages!')}
       </MessageNotification>
     </div>
   );
diff --git a/src/components/MessageList/ScrollToBottomButton.tsx b/src/components/MessageList/ScrollToBottomButton.tsx
index 0daf248d5..d8508867c 100644
--- a/src/components/MessageList/ScrollToBottomButton.tsx
+++ b/src/components/MessageList/ScrollToBottomButton.tsx
@@ -9,7 +9,10 @@ import type { Event } from 'stream-chat';
 import type { MessageNotificationProps } from './MessageNotification';
 
 const UnMemoizedScrollToBottomButton = (
-  props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList'>,
+  props: Pick<
+    MessageNotificationProps,
+    'isMessageListScrolledToBottom' | 'onClick' | 'threadList'
+  >,
 ) => {
   const { isMessageListScrolledToBottom, onClick, threadList } = props;
 
diff --git a/src/components/MessageList/UnreadMessagesSeparator.tsx b/src/components/MessageList/UnreadMessagesSeparator.tsx
index 0ea91c7f2..d09178da9 100644
--- a/src/components/MessageList/UnreadMessagesSeparator.tsx
+++ b/src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -20,7 +20,10 @@ export const UnreadMessagesSeparator = ({
 }: UnreadMessagesSeparatorProps) => {
   const { t } = useTranslationContext('UnreadMessagesSeparator');
   return (
-    <div className={UNREAD_MESSAGE_SEPARATOR_CLASS} data-testid='unread-messages-separator'>
+    <div
+      className={UNREAD_MESSAGE_SEPARATOR_CLASS}
+      data-testid='unread-messages-separator'
+    >
       {unreadCount && showCount
         ? t<string>('unreadMessagesSeparatorText', { count: unreadCount })
         : t<string>('Unread messages')}
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index a1139886d..eae09ee05 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -59,10 +59,17 @@ import {
   useChannelStateContext,
 } from '../../context/ChannelStateContext';
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
-import { ComponentContextValue, useComponentContext } from '../../context/ComponentContext';
+import {
+  ComponentContextValue,
+  useComponentContext,
+} from '../../context/ComponentContext';
 import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 
-import type { Channel, ChannelState as StreamChannelState, UserResponse } from 'stream-chat';
+import type {
+  Channel,
+  ChannelState as StreamChannelState,
+  UserResponse,
+} from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 
@@ -90,14 +97,17 @@ type VirtualizedMessageListPropsForContext =
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
 export type VirtuosoContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Required<
   Pick<
     ComponentContextValue<StreamChatGenerics>,
     'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'
   >
 > &
-  Pick<VirtualizedMessageListProps<StreamChatGenerics>, VirtualizedMessageListPropsForContext> &
+  Pick<
+    VirtualizedMessageListProps<StreamChatGenerics>,
+    VirtualizedMessageListPropsForContext
+  > &
   Pick<ChatContextValue<StreamChatGenerics>, 'customClasses'> & {
     /** Latest received message id in the current channel */
     lastReceivedMessageId: string | null | undefined;
@@ -124,7 +134,7 @@ export type VirtuosoContext<
   };
 
 type VirtualizedMessageListWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = VirtualizedMessageListProps<StreamChatGenerics> & {
   channel: Channel<StreamChatGenerics>;
   hasMore: boolean;
@@ -176,7 +186,7 @@ function calculateInitialTopMostItemIndex(
 }
 
 const VirtualizedMessageListWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: VirtualizedMessageListWithContextProps<StreamChatGenerics>,
 ) => {
@@ -210,6 +220,7 @@ const VirtualizedMessageListWithContext = <
     openThread,
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0,
+    reactionDetailsSort,
     read,
     returnAllReadData = false,
     reviewProcessedMessage,
@@ -218,7 +229,6 @@ const VirtualizedMessageListWithContext = <
     separateGiphyPreview = false,
     shouldGroupByUser = false,
     showUnreadNotificationAlways,
-    reactionDetailsSort,
     sortReactionDetails,
     sortReactions,
     stickToBottomScrollBehavior = 'smooth',
@@ -226,10 +236,8 @@ const VirtualizedMessageListWithContext = <
     threadList,
   } = props;
 
-  const {
-    components: virtuosoComponentsFromProps,
-    ...overridingVirtuosoProps
-  } = additionalVirtuosoProps;
+  const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } =
+    additionalVirtuosoProps;
 
   // Stops errors generated from react-virtuoso to bubble up
   // to Sentry or other tracking tools.
@@ -238,35 +246,34 @@ const VirtualizedMessageListWithContext = <
   const {
     DateSeparator = DefaultDateSeparator,
     GiphyPreviewMessage = DefaultGiphyPreviewMessage,
+    MessageListMainPanel = DefaultMessageListMainPanel,
     MessageListNotifications = DefaultMessageListNotifications,
     MessageNotification = DefaultMessageNotification,
     MessageSystem = DefaultMessageSystem,
-    MessageListMainPanel = DefaultMessageListMainPanel,
+    TypingIndicator,
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
     UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
-    TypingIndicator,
   } = useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
   const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
 
-  const { client, customClasses } = useChatContext<StreamChatGenerics>('VirtualizedMessageList');
+  const { client, customClasses } = useChatContext<StreamChatGenerics>(
+    'VirtualizedMessageList',
+  );
 
   const virtuoso = useRef<VirtuosoHandle>(null);
 
   const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
 
-  const {
-    show: showUnreadMessagesNotification,
-    toggleShowUnreadMessagesNotification,
-  } = useUnreadMessagesNotificationVirtualized({
-    lastRead: channelUnreadUiState?.last_read,
-    showAlways: !!showUnreadNotificationAlways,
-    unreadCount: channelUnreadUiState?.unread_messages ?? 0,
-  });
+  const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } =
+    useUnreadMessagesNotificationVirtualized({
+      lastRead: channelUnreadUiState?.last_read,
+      showAlways: !!showUnreadNotificationAlways,
+      unreadCount: channelUnreadUiState?.unread_messages ?? 0,
+    });
 
-  const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview<StreamChatGenerics>(
-    separateGiphyPreview,
-  );
+  const { giphyPreviewMessage, setGiphyPreviewMessage } =
+    useGiphyPreview<StreamChatGenerics>(separateGiphyPreview);
 
   const processedMessages = useMemo(() => {
     if (typeof messages === 'undefined') {
@@ -311,9 +318,10 @@ const VirtualizedMessageListWithContext = <
     userID: client.userID,
   });
 
-  const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [
-    processedMessages,
-  ]);
+  const lastReceivedMessageId = useMemo(
+    () => getLastReceived(processedMessages),
+    [processedMessages],
+  );
 
   const groupStylesFn = groupStyles || getGroupStyles;
   const messageGroupStyles = useMemo(
@@ -331,7 +339,12 @@ const VirtualizedMessageListWithContext = <
       }, {}),
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxTimeBetweenGroupedMessages, processedMessages.length, shouldGroupByUser, groupStylesFn],
+    [
+      maxTimeBetweenGroupedMessages,
+      processedMessages.length,
+      shouldGroupByUser,
+      groupStylesFn,
+    ],
   );
 
   const {
@@ -370,16 +383,27 @@ const VirtualizedMessageListWithContext = <
     jumpToLatestMessage,
   ]);
 
-  useScrollToBottomOnNewMessage({ messages, scrollToBottom, scrollToLatestMessageOnFocus });
+  useScrollToBottomOnNewMessage({
+    messages,
+    scrollToBottom,
+    scrollToLatestMessageOnFocus,
+  });
 
-  const numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
+  const numItemsPrepended = usePrependedMessagesCount(
+    processedMessages,
+    !disableDateSeparator,
+  );
 
   const { messageSetKey } = useMessageSetKey({ messages });
 
-  const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
+  const shouldForceScrollToBottom = useShouldForceScrollToBottom(
+    processedMessages,
+    client.userID,
+  );
 
   const handleItemsRendered = useMemo(
-    () => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages),
+    () =>
+      makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages),
     [processedMessages, toggleShowUnreadMessagesNotification],
   );
   const followOutput = (isAtBottom: boolean) => {
@@ -443,9 +467,13 @@ const VirtualizedMessageListWithContext = <
       <MessageListMainPanel>
         <DialogManagerProvider id={dialogManagerId}>
           {!threadList && showUnreadMessagesNotification && (
-            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
+            <UnreadMessagesNotification
+              unreadCount={channelUnreadUiState?.unread_messages}
+            />
           )}
-          <div className={customClasses?.virtualizedMessageList || 'str-chat__virtual-list'}>
+          <div
+            className={customClasses?.virtualizedMessageList || 'str-chat__virtual-list'}
+          >
             <Virtuoso<UnknownType, VirtuosoContext<StreamChatGenerics>>
               atBottomStateChange={atBottomStateChange}
               atBottomThreshold={100}
@@ -529,10 +557,13 @@ const VirtualizedMessageListWithContext = <
 };
 
 export type VirtualizedMessageListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
   /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
-  additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;
+  additionalVirtuosoProps?: VirtuosoProps<
+    UnknownType,
+    VirtuosoContext<StreamChatGenerics>
+  >;
   channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];
   /** If true, picking a reaction from the `ReactionSelector` component will close the selector */
   closeReactionSelectorOnClick?: boolean;
@@ -639,13 +670,10 @@ export type VirtualizedMessageListProps<
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
  */
 export function VirtualizedMessageList<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(props: VirtualizedMessageListProps<StreamChatGenerics>) {
-  const {
-    jumpToLatestMessage,
-    loadMore,
-    loadMoreNewer,
-  } = useChannelActionContext<StreamChatGenerics>('VirtualizedMessageList');
+  const { jumpToLatestMessage, loadMore, loadMoreNewer } =
+    useChannelActionContext<StreamChatGenerics>('VirtualizedMessageList');
   const {
     channel,
     channelUnreadUiState,
diff --git a/src/components/MessageList/VirtualizedMessageListComponents.tsx b/src/components/MessageList/VirtualizedMessageListComponents.tsx
index 6a4615b0d..e1b8f9716 100644
--- a/src/components/MessageList/VirtualizedMessageListComponents.tsx
+++ b/src/components/MessageList/VirtualizedMessageListComponents.tsx
@@ -25,7 +25,7 @@ export function calculateFirstItemIndex(numItemsPrepended: number) {
 }
 
 export const makeItemsRenderedHandler = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   renderedItemsActions: Array<(msg: StreamMessage<StreamChatGenerics>[]) => void>,
   processedMessages: StreamMessage<StreamChatGenerics>[],
@@ -43,14 +43,14 @@ export const makeItemsRenderedHandler = <
   }, 200);
 
 type CommonVirtuosoComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   context?: VirtuosoContext<StreamChatGenerics>;
 };
 // using 'display: inline-block'
 // traps CSS margins of the item elements, preventing incorrect item measurements
 export const Item = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   context,
   ...props
@@ -76,13 +76,12 @@ export const Item = <
   );
 };
 export const Header = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   context,
 }: CommonVirtuosoComponentProps<StreamChatGenerics>) => {
-  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext<StreamChatGenerics>(
-    'VirtualizedMessageListHeader',
-  );
+  const { LoadingIndicator = DefaultLoadingIndicator } =
+    useComponentContext<StreamChatGenerics>('VirtualizedMessageListHeader');
 
   return (
     <>
@@ -96,13 +95,12 @@ export const Header = <
   );
 };
 export const EmptyPlaceholder = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   context,
 }: CommonVirtuosoComponentProps<StreamChatGenerics>) => {
-  const {
-    EmptyStateIndicator = DefaultEmptyStateIndicator,
-  } = useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
+  const { EmptyStateIndicator = DefaultEmptyStateIndicator } =
+    useComponentContext<StreamChatGenerics>('VirtualizedMessageList');
   return (
     <>
       {EmptyStateIndicator && (
@@ -113,7 +111,7 @@ export const EmptyPlaceholder = <
 };
 
 export const messageRenderer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   virtuosoIndex: number,
   _data: UnknownType,
@@ -159,7 +157,9 @@ export const messageRenderer = <
   if (!message) return <div style={{ height: '1px' }}></div>; // returning null or zero height breaks the virtuoso
 
   if (isDateSeparatorMessage(message)) {
-    return DateSeparator ? <DateSeparator date={message.date} unread={message.unread} /> : null;
+    return DateSeparator ? (
+      <DateSeparator date={message.date} unread={message.unread} />
+    ) : null;
   }
 
   if (message.type === 'system') {
diff --git a/src/components/MessageList/__tests__/CustomNotification.test.js b/src/components/MessageList/__tests__/CustomNotification.test.js
index 04f10c3fd..bc1e121fc 100644
--- a/src/components/MessageList/__tests__/CustomNotification.test.js
+++ b/src/components/MessageList/__tests__/CustomNotification.test.js
@@ -5,16 +5,20 @@ import '@testing-library/jest-dom';
 
 import { CustomNotification } from '../CustomNotification';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('CustomNotification', () => {
   it('should render nothing if active is false', () => {
-    const { container } = render(<CustomNotification active={false}>test</CustomNotification>);
+    const { container } = render(
+      <CustomNotification active={false}>test</CustomNotification>,
+    );
     expect(container).toBeEmptyDOMElement();
   });
 
   it('should render children when active', () => {
-    const { container } = render(<CustomNotification active={true}>children</CustomNotification>);
+    const { container } = render(
+      <CustomNotification active={true}>children</CustomNotification>,
+    );
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
diff --git a/src/components/MessageList/__tests__/MessageList.test.js b/src/components/MessageList/__tests__/MessageList.test.js
index fd3bc1eaa..b001cb9c0 100644
--- a/src/components/MessageList/__tests__/MessageList.test.js
+++ b/src/components/MessageList/__tests__/MessageList.test.js
@@ -74,7 +74,9 @@ describe('MessageList', () => {
       channelProps: { channel },
       chatClient,
     });
-    const markReadMock = jest.spyOn(channel, 'markRead').mockReturnValueOnce(markReadApi(channel));
+    const markReadMock = jest
+      .spyOn(channel, 'markRead')
+      .mockReturnValueOnce(markReadApi(channel));
     await waitFor(() => {
       expect(getByTestId('reverse-infinite-scroll')).toBeInTheDocument();
     });
@@ -182,7 +184,9 @@ describe('MessageList', () => {
 
   it('should accept a custom group style function', async () => {
     const classNameSuffix = 'msg-list-test';
-    const markReadMock = jest.spyOn(channel, 'markRead').mockReturnValueOnce(markReadApi(channel));
+    const markReadMock = jest
+      .spyOn(channel, 'markRead')
+      .mockReturnValueOnce(markReadApi(channel));
 
     await act(() => {
       renderComponent({
@@ -201,13 +205,15 @@ describe('MessageList', () => {
 
     for (let i = 0; i < 3; i++) {
       const newMessage = generateMessage({ text: `text-${i}`, user: user2 });
-      act(() => dispatchMessageNewEvent(chatClient, newMessage, mockedChannelData.channel));
+      act(() =>
+        dispatchMessageNewEvent(chatClient, newMessage, mockedChannelData.channel),
+      );
     }
 
     await waitFor(() => {
-      expect(screen.getAllByTestId(`str-chat__li str-chat__li--${classNameSuffix}`)).toHaveLength(
-        4,
-      ); // 1 for channel initial message + 3 just sent
+      expect(
+        screen.getAllByTestId(`str-chat__li str-chat__li--${classNameSuffix}`),
+      ).toHaveLength(4); // 1 for channel initial message + 3 just sent
     });
     // MessageErrorIcon has path with id "background" - that is not permitted from the a11i standpoint
     // const results = await axe(renderResult.container);
@@ -273,7 +279,10 @@ describe('MessageList', () => {
   });
 
   it('should render system messages', async () => {
-    const system = generateMessage({ text: 'system message is rendered', type: 'system' });
+    const system = generateMessage({
+      text: 'system message is rendered',
+      type: 'system',
+    });
 
     await act(() => {
       renderComponent({
@@ -364,7 +373,7 @@ describe('MessageList', () => {
           return null;
         }
       }
-      // eslint-disable-next-line jest/prefer-spy-on
+
       window.IntersectionObserver = IntersectionObserverMock;
     });
     afterEach(jest.clearAllMocks);
@@ -444,7 +453,9 @@ describe('MessageList', () => {
 
     it('should display custom unread messages separator when channel is marked unread', async () => {
       const customUnreadMessagesSeparatorText = 'CustomUnreadMessagesSeparator';
-      const UnreadMessagesSeparator = () => <div>{customUnreadMessagesSeparatorText}</div>;
+      const UnreadMessagesSeparator = () => (
+        <div>{customUnreadMessagesSeparatorText}</div>
+      );
       const {
         channels: [channel],
         client,
@@ -458,7 +469,9 @@ describe('MessageList', () => {
         });
       });
 
-      expect(screen.queryByText(customUnreadMessagesSeparatorText)).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(customUnreadMessagesSeparatorText),
+      ).not.toBeInTheDocument();
 
       await act(() => {
         dispatchMarkUnreadForChannel({ channel, client });
@@ -468,7 +481,9 @@ describe('MessageList', () => {
 
     it('should not display custom unread messages separator when last read message is the newest channel message', async () => {
       const customUnreadMessagesSeparatorText = 'CustomUnreadMessagesSeparator';
-      const UnreadMessagesSeparator = () => <div>{customUnreadMessagesSeparatorText}</div>;
+      const UnreadMessagesSeparator = () => (
+        <div>{customUnreadMessagesSeparatorText}</div>
+      );
       const {
         channels: [channel],
         client,
@@ -482,7 +497,9 @@ describe('MessageList', () => {
         });
       });
 
-      expect(screen.queryByText(customUnreadMessagesSeparatorText)).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(customUnreadMessagesSeparatorText),
+      ).not.toBeInTheDocument();
 
       await act(() => {
         const lastReadMessage = messages.slice(-1)[0];
@@ -527,7 +544,11 @@ describe('MessageList', () => {
         });
 
         await act(() => {
-          dispatchMarkUnreadForChannel({ channel, client, payload: dispatchMarkUnreadPayload });
+          dispatchMarkUnreadForChannel({
+            channel,
+            client,
+            payload: dispatchMarkUnreadPayload,
+          });
         });
 
         await act(() => {
@@ -537,7 +558,9 @@ describe('MessageList', () => {
 
       it('should not display unread messages notification when scrolled to unread messages separator', async () => {
         await setupTest({ entries: [{ isIntersecting: true }] });
-        expect(screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID),
+        ).not.toBeInTheDocument();
       });
 
       it.each([
@@ -611,7 +634,9 @@ describe('MessageList', () => {
         });
 
         await waitFor(() =>
-          expect(screen.getByTestId(customUnreadMessagesNotificationText)).toBeInTheDocument(),
+          expect(
+            screen.getByTestId(customUnreadMessagesNotificationText),
+          ).toBeInTheDocument(),
         );
       });
 
@@ -620,13 +645,17 @@ describe('MessageList', () => {
           dispatchMarkUnreadPayload: { unread_messages: 0 },
           entries: observerEntriesScrolledBelowSeparator,
         });
-        expect(screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID),
+        ).not.toBeInTheDocument();
       });
 
       it('should not display unread messages notification IntersectionObserver is undefined', async () => {
         window.IntersectionObserver = undefined;
         await setupTest({ entries: observerEntriesScrolledBelowSeparator });
-        expect(screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID),
+        ).not.toBeInTheDocument();
       });
 
       it('should not display unread messages notification in thread', async () => {
@@ -634,7 +663,9 @@ describe('MessageList', () => {
           entries: observerEntriesScrolledBelowSeparator,
           msgListProps: { threadList: true },
         });
-        expect(screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID)).not.toBeInTheDocument();
+        expect(
+          screen.queryByTestId(UNREAD_MESSAGES_NOTIFICATION_TEST_ID),
+        ).not.toBeInTheDocument();
       });
     });
 
diff --git a/src/components/MessageList/__tests__/MessageNotification.test.js b/src/components/MessageList/__tests__/MessageNotification.test.js
index 02eef9cf9..067aa735f 100644
--- a/src/components/MessageList/__tests__/MessageNotification.test.js
+++ b/src/components/MessageList/__tests__/MessageNotification.test.js
@@ -7,7 +7,7 @@ expect.extend(toHaveNoViolations);
 
 import { MessageNotification } from '../MessageNotification';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('MessageNotification', () => {
   it('should render nothing if showNotification is false', () => {
diff --git a/src/components/MessageList/__tests__/ScrollToBottomButton.test.js b/src/components/MessageList/__tests__/ScrollToBottomButton.test.js
index 8901acce9..10b18bb07 100644
--- a/src/components/MessageList/__tests__/ScrollToBottomButton.test.js
+++ b/src/components/MessageList/__tests__/ScrollToBottomButton.test.js
@@ -49,7 +49,9 @@ describe.each([
     channel = result.channel;
     users = result.users;
     containerIsThread = containerMsgList === threadList;
-    anotherUser = Object.values(channel.state.members).find((u) => u.id !== client.user.id);
+    anotherUser = Object.values(channel.state.members).find(
+      (u) => u.id !== client.user.id,
+    );
     parentMsg = { ...Object.values(channel.state.messages)[0], reply_count: 0 };
     channelStateContext = {
       thread: containerIsThread ? parentMsg : null,
@@ -94,7 +96,6 @@ describe.each([
     });
 
     await waitFor(() => {
-      // eslint-disable-next-line jest/prefer-called-with
       expect(onClick).toHaveBeenCalled();
     });
   });
@@ -248,7 +249,13 @@ describe.each([
     for (let i = 1; i <= 2; i++) {
       const newMessage = generateMessage({ user: anotherUser });
       await act(() => {
-        dispatchMessageEvents({ channel, client, newMessage, parentMsg, user: anotherUser });
+        dispatchMessageEvents({
+          channel,
+          client,
+          newMessage,
+          parentMsg,
+          user: anotherUser,
+        });
       });
       const counter = screen.queryByTestId(NEW_MESSAGE_COUNTER_TEST_ID);
       await waitFor(() => {
@@ -273,7 +280,10 @@ describe.each([
       <ChatProvider value={{ channel, client }}>
         <ChannelStateProvider value={channelStateContext}>
           <div id={mainListId}>
-            <ScrollToBottomButton isMessageListScrolledToBottom={false} onClick={onClick} />
+            <ScrollToBottomButton
+              isMessageListScrolledToBottom={false}
+              onClick={onClick}
+            />
           </div>
           <div id={threadListId}>
             <ScrollToBottomButton
@@ -287,16 +297,27 @@ describe.each([
     );
 
     await act(() => {
-      dispatchMessageEvents({ channel, client, newMessage, parentMsg, user: anotherUser });
+      dispatchMessageEvents({
+        channel,
+        client,
+        newMessage,
+        parentMsg,
+        user: anotherUser,
+      });
     });
 
-    const [containerMsgListCounterSelector, otherMsgListCounterSelector] = containerIsThread
-      ? [threadListCounterSelector, mainListCounterSelector]
-      : [mainListCounterSelector, threadListCounterSelector];
+    const [containerMsgListCounterSelector, otherMsgListCounterSelector] =
+      containerIsThread
+        ? [threadListCounterSelector, mainListCounterSelector]
+        : [mainListCounterSelector, threadListCounterSelector];
 
     await waitFor(() => {
-      expect(container.querySelector(containerMsgListCounterSelector)).toBeInTheDocument();
-      expect(container.querySelector(otherMsgListCounterSelector)).not.toBeInTheDocument();
+      expect(
+        container.querySelector(containerMsgListCounterSelector),
+      ).toBeInTheDocument();
+      expect(
+        container.querySelector(otherMsgListCounterSelector),
+      ).not.toBeInTheDocument();
     });
   });
 });
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
index 23f8c9e8e..7ee6b0e86 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
@@ -77,7 +77,9 @@ describe('VirtualizedMessageComponents', () => {
           processedMessages,
         };
 
-        const { container } = renderElements(<Item context={virtuosoContext} {...props} />);
+        const { container } = renderElements(
+          <Item context={virtuosoContext} {...props} />,
+        );
         expect(container).toMatchSnapshot();
       },
     );
@@ -109,7 +111,10 @@ describe('VirtualizedMessageComponents', () => {
     it('should render custom LoadingIndicator in Header when loading more messages', () => {
       const componentContext = { LoadingIndicator: CustomLoadingIndicator };
       const context = { loadingMore: true };
-      const { container } = renderElements(<Header context={context} />, componentContext);
+      const { container } = renderElements(
+        <Header context={context} />,
+        componentContext,
+      );
       expect(container).toMatchInlineSnapshot(`
         <div>
           <div
@@ -157,7 +162,10 @@ describe('VirtualizedMessageComponents', () => {
         LoadingIndicator: null,
       };
       const context = { head, loadingMore: true };
-      const { container } = renderElements(<Header context={context} />, componentContext);
+      const { container } = renderElements(
+        <Header context={context} />,
+        componentContext,
+      );
       expect(container).toMatchInlineSnapshot(`
         <div>
           <div>
@@ -194,7 +202,10 @@ describe('VirtualizedMessageComponents', () => {
     it('should render custom LoadingIndicator instead of head when loading more', () => {
       const componentContext = { LoadingIndicator: CustomLoadingIndicator };
       const context = { head, loadingMore: true };
-      const { container } = renderElements(<Header context={context} />, componentContext);
+      const { container } = renderElements(
+        <Header context={context} />,
+        componentContext,
+      );
       expect(container).toMatchInlineSnapshot(`
         <div>
           <div>
@@ -230,7 +241,9 @@ describe('VirtualizedMessageComponents', () => {
     });
 
     it('should render empty for thread by default', () => {
-      const { container } = renderElements(<EmptyPlaceholder context={{ threadList: true }} />);
+      const { container } = renderElements(
+        <EmptyPlaceholder context={{ threadList: true }} />,
+      );
       expect(container).toMatchInlineSnapshot(`
         <div>
           <div
@@ -295,7 +308,11 @@ describe('VirtualizedMessageComponents', () => {
     beforeAll(async () => {
       client = await getTestClientWithUser();
       const channelData = generateChannel();
-      channel = client.channel(channelData.channel.type, channelData.channel.id, channelData);
+      channel = client.channel(
+        channelData.channel.type,
+        channelData.channel.id,
+        channelData,
+      );
     });
 
     it('should allow to execute custom item rendering logic instead of the default', () => {
@@ -353,7 +370,9 @@ describe('VirtualizedMessageComponents', () => {
           processedMessages: [generateMessage({ type: 'system' })],
         };
 
-        const { container } = render(messageRenderer(virtuosoIndex, undefined, virtuosoContext));
+        const { container } = render(
+          messageRenderer(virtuosoIndex, undefined, virtuosoContext),
+        );
         expect(container).toMatchInlineSnapshot(`<div />`);
       });
 
@@ -373,9 +392,13 @@ describe('VirtualizedMessageComponents', () => {
       it('should render nothing if DateSeparator component is undefined for custom message type date', () => {
         const virtuosoContext = {
           numItemsPrepended,
-          processedMessages: [generateMessage({ customType: 'message.date', date: new Date() })],
+          processedMessages: [
+            generateMessage({ customType: 'message.date', date: new Date() }),
+          ],
         };
-        const { container } = render(messageRenderer(virtuosoIndex, undefined, virtuosoContext));
+        const { container } = render(
+          messageRenderer(virtuosoIndex, undefined, virtuosoContext),
+        );
         expect(container).toMatchInlineSnapshot(`<div />`);
       });
 
@@ -385,7 +408,9 @@ describe('VirtualizedMessageComponents', () => {
         const virtuosoContext = {
           DateSeparator,
           numItemsPrepended,
-          processedMessages: [generateMessage({ customType: 'message.date', date: new Date() })],
+          processedMessages: [
+            generateMessage({ customType: 'message.date', date: new Date() }),
+          ],
         };
         render(messageRenderer(virtuosoIndex, undefined, virtuosoContext));
         expect(screen.getByText(text)).toBeInTheDocument();
@@ -398,7 +423,9 @@ describe('VirtualizedMessageComponents', () => {
           processedMessages: [generateMessage()],
         };
 
-        const { container } = render(messageRenderer(virtuosoIndex, undefined, virtuosoContext));
+        const { container } = render(
+          messageRenderer(virtuosoIndex, undefined, virtuosoContext),
+        );
         expect(container).toMatchInlineSnapshot(`
                   <div>
                     <div
@@ -426,7 +453,11 @@ describe('VirtualizedMessageComponents', () => {
                 <ComponentProvider value={{}}>
                   <ChannelActionProvider value={{}}>
                     <ChannelStateProvider value={{ channel }}>
-                      {messageRenderer(virtuosoIndex ?? PREPEND_OFFSET, undefined, virtuosoContext)}
+                      {messageRenderer(
+                        virtuosoIndex ?? PREPEND_OFFSET,
+                        undefined,
+                        virtuosoContext,
+                      )}
                     </ChannelStateProvider>
                   </ChannelActionProvider>
                 </ComponentProvider>
@@ -639,9 +670,15 @@ describe('VirtualizedMessageComponents', () => {
             expect(messageElements[0]).toHaveClass(firstGroupItemClass);
             expect(messageElements[0]).toHaveClass(lastGroupItemClass);
             expect(messageElements[1]).toHaveClass(firstGroupItemClass);
-            expect(messageElements[processedMessages.length - 2]).toHaveClass(lastGroupItemClass);
-            expect(messageElements[processedMessages.length - 1]).toHaveClass(firstGroupItemClass);
-            expect(messageElements[processedMessages.length - 1]).toHaveClass(lastGroupItemClass);
+            expect(messageElements[processedMessages.length - 2]).toHaveClass(
+              lastGroupItemClass,
+            );
+            expect(messageElements[processedMessages.length - 1]).toHaveClass(
+              firstGroupItemClass,
+            );
+            expect(messageElements[processedMessages.length - 1]).toHaveClass(
+              lastGroupItemClass,
+            );
           }
         },
       );
diff --git a/src/components/MessageList/__tests__/utils.test.js b/src/components/MessageList/__tests__/utils.test.js
index 3b1fc20e7..323d860a3 100644
--- a/src/components/MessageList/__tests__/utils.test.js
+++ b/src/components/MessageList/__tests__/utils.test.js
@@ -1,6 +1,15 @@
-import { generateFileAttachment, generateMessage, generateUser } from '../../../mock-builders';
-
-import { getGroupStyles, getReadStates, makeDateMessageId, processMessages } from '../utils';
+import {
+  generateFileAttachment,
+  generateMessage,
+  generateUser,
+} from '../../../mock-builders';
+
+import {
+  getGroupStyles,
+  getReadStates,
+  makeDateMessageId,
+  processMessages,
+} from '../utils';
 import { CUSTOM_MESSAGE_TYPE } from '../../../constants/messageTypes';
 
 const mockedNanoId = 'V1StGXR8_Z5jdHi6B-myT';
@@ -307,8 +316,14 @@ describe('processMessages', () => {
       const expectedWhere = ['start'];
       const shouldExpectUnreadSeparator = true;
       const lastRead = new Date();
-      const oldMsg = { created_at: new Date('1970-01-01'), updated_at: new Date('1970-01-01') };
-      const unreadMsg = { created_at: new Date('9999-12-31'), updated_at: new Date('9999-12-31') };
+      const oldMsg = {
+        created_at: new Date('1970-01-01'),
+        updated_at: new Date('1970-01-01'),
+      };
+      const unreadMsg = {
+        created_at: new Date('9999-12-31'),
+        updated_at: new Date('9999-12-31'),
+      };
       const myNewMessages = [
         { user: { id: myUserId }, ...unreadMsg },
         { user: { id: myUserId }, ...unreadMsg },
@@ -371,7 +386,9 @@ describe('processMessages', () => {
 
     it('is set if provided with preview message setter and messages contain ephemeral giphy message', () => {
       const messagesData = [{}, { command: 'giphy', type: 'ephemeral' }, {}];
-      runMessageProcessing(messagesData, { setGiphyPreviewMessage: setGiphyPreviewMessageMock });
+      runMessageProcessing(messagesData, {
+        setGiphyPreviewMessage: setGiphyPreviewMessageMock,
+      });
       expect(setGiphyPreviewMessageMock).toHaveBeenLastCalledWith(
         expect.objectContaining(messagesData[1]),
       );
@@ -383,12 +400,16 @@ describe('processMessages', () => {
     });
     it('is set to undefined if messages do not contain ephemeral message', () => {
       const messagesData = [{}, { command: 'giphy' }, {}];
-      runMessageProcessing(messagesData, { setGiphyPreviewMessage: setGiphyPreviewMessageMock });
+      runMessageProcessing(messagesData, {
+        setGiphyPreviewMessage: setGiphyPreviewMessageMock,
+      });
       expect(setGiphyPreviewMessageMock).toHaveBeenLastCalledWith(undefined);
     });
     it('is no set to undefined if messages do not contain message of command giphy', () => {
       const messagesData = [{}, { type: 'ephemeral' }, {}];
-      runMessageProcessing(messagesData, { setGiphyPreviewMessage: setGiphyPreviewMessageMock });
+      runMessageProcessing(messagesData, {
+        setGiphyPreviewMessage: setGiphyPreviewMessageMock,
+      });
       expect(setGiphyPreviewMessageMock).toHaveBeenLastCalledWith(undefined);
     });
   });
@@ -446,7 +467,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = undefined;
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is intro message', () => {
@@ -456,7 +479,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, customType: CUSTOM_MESSAGE_TYPE.intro };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is date message', () => {
@@ -466,7 +491,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, customType: CUSTOM_MESSAGE_TYPE.date };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is a system message', () => {
@@ -476,7 +503,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, type: 'system' };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is an error message', () => {
@@ -486,7 +515,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, type: 'error' };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('has attachments', () => {
@@ -496,7 +527,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, attachments: [generateFileAttachment()] };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is posted by another user', () => {
@@ -507,7 +540,9 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, user };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
 
     it('is deleted', () => {
@@ -517,28 +552,38 @@ describe('getGroupStyles', () => {
       if (position === 'top') {
         previousMessage = { ...previousMessage, deleted_at: new Date() };
       }
-      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(position);
+      expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+        position,
+      );
     });
   });
 
   it('marks a message as bottom when the message is edited', () => {
     message = { ...message, message_text_updated_at: new Date() };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('bottom');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'bottom',
+    );
   });
 
   it('marks a message as top when the previous message is edited', () => {
     previousMessage = { ...previousMessage, message_text_updated_at: new Date() };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('top');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'top',
+    );
   });
 
   it('marks a message a top if it has reactions', () => {
     message = { ...message, reaction_groups: { X: 'Y' } };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('top');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'top',
+    );
   });
 
   it('marks a message a bottom if next message has reactions', () => {
     nextMessage = { ...nextMessage, reaction_groups: { X: 'Y' } };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('bottom');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'bottom',
+    );
   });
 
   it('marks a message as top when next message is created later than maxTimeBetweenGroupedMessages milliseconds', () => {
@@ -597,29 +642,39 @@ describe('getGroupStyles', () => {
   });
 
   it('marks message as middle if not being top, neither bottom message', () => {
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('middle');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'middle',
+    );
   });
 
   it('marks message as single if not being top, neither bottom message being deleted', () => {
     message = { ...message, deleted_at: new Date() };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('single');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'single',
+    );
   });
 
   it('marks message as single if not being top, neither bottom message being error message', () => {
     message = { ...message, type: 'error' };
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('single');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'single',
+    );
   });
 
   it('marks message at the bottom as single being deleted message', () => {
     message = { ...message, deleted_at: new Date() };
     nextMessage = undefined;
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('single');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'single',
+    );
   });
 
   it('marks message at the bottom as single being error message', () => {
     message = { ...message, type: 'error' };
     nextMessage = undefined;
-    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe('single');
+    expect(getGroupStyles(message, previousMessage, nextMessage, noGroupByUser)).toBe(
+      'single',
+    );
   });
 });
 
diff --git a/src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts b/src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
index f85af4c10..98092c51c 100644
--- a/src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
+++ b/src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
@@ -18,7 +18,7 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export const useEnrichedMessages = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(args: {
   channel: Channel<StreamChatGenerics>;
   disableDateSeparator: boolean;
@@ -51,7 +51,8 @@ export const useEnrichedMessages = <
   } = args;
 
   const { client } = useChatContext<StreamChatGenerics>('useEnrichedMessages');
-  const { HeaderComponent } = useComponentContext<StreamChatGenerics>('useEnrichedMessages');
+  const { HeaderComponent } =
+    useComponentContext<StreamChatGenerics>('useEnrichedMessages');
 
   const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
 
diff --git a/src/components/MessageList/hooks/MessageList/useMessageListElements.tsx b/src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
index c7c77be12..1a49cd5b8 100644
--- a/src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
+++ b/src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
@@ -9,11 +9,14 @@ import { useComponentContext } from '../../../../context/ComponentContext';
 import type { ChannelState as StreamChannelState } from 'stream-chat';
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 
-import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../../../types/types';
+import type {
+  ChannelUnreadUiState,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
 import { MessageRenderer, SharedMessageProps } from '../../renderMessages';
 
 type UseMessageListElementsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   enrichedMessages: StreamMessage<StreamChatGenerics>[];
   internalMessageProps: SharedMessageProps<StreamChatGenerics>;
@@ -26,7 +29,7 @@ type UseMessageListElementsProps<
 };
 
 export const useMessageListElements = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: UseMessageListElementsProps<StreamChatGenerics>,
 ) => {
@@ -41,7 +44,9 @@ export const useMessageListElements = <
     threadList,
   } = props;
 
-  const { client, customClasses } = useChatContext<StreamChatGenerics>('useMessageListElements');
+  const { client, customClasses } = useChatContext<StreamChatGenerics>(
+    'useMessageListElements',
+  );
   const components = useComponentContext<StreamChatGenerics>('useMessageListElements');
 
   // get the readData, but only for messages submitted by the user themselves
@@ -52,9 +57,10 @@ export const useMessageListElements = <
     userID: client.userID,
   });
 
-  const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [
-    enrichedMessages,
-  ]);
+  const lastReceivedMessageId = useMemo(
+    () => getLastReceived(enrichedMessages),
+    [enrichedMessages],
+  );
 
   const elements: React.ReactNode[] = useMemo(
     () =>
diff --git a/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts b/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
index ea7638b6e..670911817 100644
--- a/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
+++ b/src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
@@ -12,7 +12,7 @@ export type ContainerMeasures = {
 };
 
 export type UseMessageListScrollManagerParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   loadMoreScrollThreshold: number;
   messages: StreamMessage<StreamChatGenerics>[];
@@ -25,7 +25,7 @@ export type UseMessageListScrollManagerParams<
 
 // FIXME: change this generic name to something like useAdjustScrollPositionToListSize
 export function useMessageListScrollManager<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(params: UseMessageListScrollManagerParams<StreamChatGenerics>) {
   const {
     loadMoreScrollThreshold,
@@ -80,7 +80,8 @@ export function useMessageListScrollManager<
       // message list length didn't change, but check if last message had reaction/reply update
       else {
         const hasNewReactions =
-          lastPrevMessage?.latest_reactions?.length !== lastNewMessage.latest_reactions?.length;
+          lastPrevMessage?.latest_reactions?.length !==
+          lastNewMessage.latest_reactions?.length;
         const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;
 
         if ((hasNewReactions || hasNewReplies) && wasAtBottom) {
diff --git a/src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx b/src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
index ab4b18a40..261cd18c5 100644
--- a/src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
+++ b/src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
@@ -7,7 +7,7 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export type UseScrollLocationLogicParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   hasMoreNewer: boolean;
   listElement: HTMLDivElement | null;
@@ -18,23 +18,24 @@ export type UseScrollLocationLogicParams<
 };
 
 export const useScrollLocationLogic = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: UseScrollLocationLogicParams<StreamChatGenerics>,
 ) => {
   const {
+    hasMoreNewer,
+    listElement,
     loadMoreScrollThreshold,
     messages = [],
     scrolledUpThreshold = 200,
-    hasMoreNewer,
     suppressAutoscroll,
-    listElement,
   } = params;
 
   const [hasNewMessages, setHasNewMessages] = useState(false);
   const [wrapperRect, setWrapperRect] = useState<DOMRect>();
 
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] =
+    useState(true);
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
 
@@ -84,7 +85,8 @@ export const useScrollLocationLogic = <
       const scrollHeight = element.scrollHeight;
 
       const prevCloseToBottom = closeToBottom.current;
-      closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+      closeToBottom.current =
+        scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
       closeToTop.current = scrollTop < scrolledUpThreshold;
 
       if (closeToBottom.current) {
diff --git a/src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts b/src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
index 59d7f35ef..466e36099 100644
--- a/src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
+++ b/src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
@@ -8,7 +8,10 @@ const targetScrolledAboveVisibleContainerArea = (element: Element) => {
   return targetBottom < 0;
 };
 
-const targetScrolledBelowVisibleContainerArea = (element: Element, container: Element) => {
+const targetScrolledBelowVisibleContainerArea = (
+  element: Element,
+  container: Element,
+) => {
   const { top: targetTop } = element.getBoundingClientRect();
   const { top: containerBottom } = container.getBoundingClientRect();
   return targetTop > containerBottom;
@@ -39,19 +42,26 @@ export const useUnreadMessagesNotification = ({
     const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
     if (!msgListPanel) return;
 
-    const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
+    const [observedTarget] = document.getElementsByClassName(
+      UNREAD_MESSAGE_SEPARATOR_CLASS,
+    );
     if (!observedTarget) {
       setShow(true);
       return;
     }
 
-    const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget);
+    const scrolledBelowSeparator =
+      targetScrolledAboveVisibleContainerArea(observedTarget);
     const scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(
       observedTarget,
       msgListPanel,
     );
 
-    setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
+    setShow(
+      showAlways
+        ? scrolledBelowSeparator || scrolledAboveSeparator
+        : scrolledBelowSeparator,
+    );
 
     const observer = new IntersectionObserver(
       (elements) => {
@@ -87,7 +97,11 @@ export const useUnreadMessagesNotification = ({
      * and at the same time scrolled above the observed target.
      */
 
-    if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
+    if (
+      unreadCount &&
+      isMessageListScrolledToBottom &&
+      isScrolledAboveTargetTop.current
+    ) {
       setShow(true);
       isScrolledAboveTargetTop.current = false;
     }
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
index 6e67f1890..8566e800d 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
@@ -9,13 +9,12 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export const useGiphyPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   separateGiphyPreview: boolean,
 ) => {
-  const [giphyPreviewMessage, setGiphyPreviewMessage] = useState<
-    StreamMessage<StreamChatGenerics>
-  >();
+  const [giphyPreviewMessage, setGiphyPreviewMessage] =
+    useState<StreamMessage<StreamChatGenerics>>();
 
   const { client } = useChatContext<StreamChatGenerics>('useGiphyPreview');
 
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
index 1a0f0c569..085219877 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
@@ -3,13 +3,13 @@ import { StreamMessage } from '../../../../context';
 import { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type UseMessageSetKeyParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   messages?: StreamMessage<StreamChatGenerics>[];
 };
 
 export const useMessageSetKey = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   messages,
 }: UseMessageSetKeyParams<StreamChatGenerics>) => {
@@ -20,7 +20,9 @@ export const useMessageSetKey = <
   const firstMessageId = useRef<string | undefined>(undefined);
 
   useEffect(() => {
-    const continuousSet = messages?.find((message) => message.id === firstMessageId.current);
+    const continuousSet = messages?.find(
+      (message) => message.id === firstMessageId.current,
+    );
     if (!continuousSet) {
       setMessageSetKey(+new Date());
     }
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
index ad4fda0f3..551df7136 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
@@ -5,14 +5,15 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export function useNewMessageNotification<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   messages: StreamMessage<StreamChatGenerics>[],
   currentUserId: string | undefined,
   hasMoreNewer?: boolean,
 ) {
   const [newMessagesNotification, setNewMessagesNotification] = useState(false);
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] =
+    useState(true);
   /**
    * use the flag to avoid the initial "new messages" quick blink
    */
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts b/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
index 414932aee..6aa1b4e18 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
@@ -4,19 +4,19 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
-const STATUSES_EXCLUDED_FROM_PREPEND = ({
+const STATUSES_EXCLUDED_FROM_PREPEND = {
   failed: true,
   sending: true,
-} as const) as Record<string, boolean>;
+} as const as Record<string, boolean>;
 
 export function usePrependedMessagesCount<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean) {
   const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-  const firstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>(undefined);
-  const previousFirstMessageOnFirstLoadedPage = useRef<StreamMessage<StreamChatGenerics>>(
-    undefined,
-  );
+  const firstMessageOnFirstLoadedPage =
+    useRef<StreamMessage<StreamChatGenerics>>(undefined);
+  const previousFirstMessageOnFirstLoadedPage =
+    useRef<StreamMessage<StreamChatGenerics>>(undefined);
   const previousNumItemsPrepended = useRef(0);
 
   const numItemsPrepended = useMemo(() => {
@@ -42,7 +42,8 @@ export function usePrependedMessagesCount<
     // 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]
+      currentFirstMessage?.status &&
+      STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]
     );
 
     if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
index 3a9762c2a..60c238985 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
@@ -3,7 +3,7 @@ import { StreamMessage } from '../../../../context';
 import { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type UseScrollToBottomOnNewMessageParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   scrollToBottom: () => void;
   messages?: StreamMessage<StreamChatGenerics>[];
@@ -12,13 +12,14 @@ type UseScrollToBottomOnNewMessageParams<
 };
 
 export const useScrollToBottomOnNewMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus,
 }: UseScrollToBottomOnNewMessageParams<StreamChatGenerics>) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] =
+    useState(false);
 
   const scrollToBottomIfConfigured = useRef<(e: Event) => void>(undefined);
 
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
index 11103b60f..fb18dd24a 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
@@ -5,7 +5,7 @@ import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 export function useShouldForceScrollToBottom<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(messages: StreamMessage<StreamChatGenerics>[], currentUserId?: string) {
   const lastFocusedOwnMessage = useRef('');
   const initialFocusRegistered = useRef(false);
diff --git a/src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts b/src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
index f86f9395e..652b1984b 100644
--- a/src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
+++ b/src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
@@ -21,7 +21,7 @@ export type UseUnreadMessagesNotificationParams = {
  * @param unreadCount
  */
 export const useUnreadMessagesNotificationVirtualized = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   lastRead,
   showAlways,
@@ -37,13 +37,17 @@ export const useUnreadMessagesNotificationVirtualized = <
       if (!(firstRenderedMessage && lastRenderedMessage)) return;
       const scrolledBelowSeparator =
         !!lastRead &&
-        new Date(firstRenderedMessage.created_at as string | Date).getTime() > lastRead.getTime();
+        new Date(firstRenderedMessage.created_at as string | Date).getTime() >
+          lastRead.getTime();
       const scrolledAboveSeparator =
         !!lastRead &&
-        new Date(lastRenderedMessage.created_at as string | Date).getTime() < lastRead.getTime();
+        new Date(lastRenderedMessage.created_at as string | Date).getTime() <
+          lastRead.getTime();
 
       setShow(
-        showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator,
+        showAlways
+          ? scrolledBelowSeparator || scrolledAboveSeparator
+          : scrolledBelowSeparator,
       );
     },
     [lastRead, showAlways, unreadCount],
diff --git a/src/components/MessageList/hooks/__tests__/useGiphyPreview.test.js b/src/components/MessageList/hooks/__tests__/useGiphyPreview.test.js
index 8f93f48b0..ba227a909 100644
--- a/src/components/MessageList/hooks/__tests__/useGiphyPreview.test.js
+++ b/src/components/MessageList/hooks/__tests__/useGiphyPreview.test.js
@@ -20,7 +20,9 @@ const ownNonGiphyMessage = generateMessage({ user: me });
 const foreignNonGiphyMessage = generateMessage({ user: otherUser });
 
 const render = ({ client, separateGiphyPreview }) => {
-  const wrapper = ({ children }) => <ChatProvider value={{ client }}>{children}</ChatProvider>;
+  const wrapper = ({ children }) => (
+    <ChatProvider value={{ client }}>{children}</ChatProvider>
+  );
   return renderHook(() => useGiphyPreview(separateGiphyPreview), { wrapper });
 };
 describe('useGiphyPreview', () => {
diff --git a/src/components/MessageList/hooks/__tests__/useMarkRead.test.js b/src/components/MessageList/hooks/__tests__/useMarkRead.test.js
index 331c668ae..89723f3e0 100644
--- a/src/components/MessageList/hooks/__tests__/useMarkRead.test.js
+++ b/src/components/MessageList/hooks/__tests__/useMarkRead.test.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
 import { useMarkRead } from '../useMarkRead';
-import { ChannelActionProvider, ChannelStateProvider, ChatProvider } from '../../../../context';
+import {
+  ChannelActionProvider,
+  ChannelStateProvider,
+  ChatProvider,
+} from '../../../../context';
 import {
   dispatchMessageNewEvent,
   generateChannel,
@@ -342,7 +346,9 @@ describe('useMarkRead', () => {
       });
 
       let channelUnreadUiStateCb;
-      setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+      setChannelUnreadUiState.mockImplementationOnce(
+        (cb) => (channelUnreadUiStateCb = cb),
+      );
       await act(() => {
         dispatchMessageNewEvent(client, generateMessage(), channel);
       });
@@ -372,7 +378,9 @@ describe('useMarkRead', () => {
       });
 
       let channelUnreadUiStateCb;
-      setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+      setChannelUnreadUiState.mockImplementationOnce(
+        (cb) => (channelUnreadUiStateCb = cb),
+      );
       await act(() => {
         dispatchMessageNewEvent(client, generateMessage(), channel);
       });
@@ -478,7 +486,9 @@ describe('useMarkRead', () => {
     describe('update unread UI state unread_messages', () => {
       it('should be performed when message list is not scrolled to bottom', async () => {
         let channelUnreadUiStateCb;
-        setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+        setChannelUnreadUiState.mockImplementationOnce(
+          (cb) => (channelUnreadUiStateCb = cb),
+        );
         const {
           channels: [channel],
           client,
@@ -504,7 +514,9 @@ describe('useMarkRead', () => {
 
       it('should be performed when channel was marked unread and is scrolled to the bottom', async () => {
         let channelUnreadUiStateCb;
-        setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+        setChannelUnreadUiState.mockImplementationOnce(
+          (cb) => (channelUnreadUiStateCb = cb),
+        );
         const {
           channels: [channel],
           client,
@@ -530,7 +542,9 @@ describe('useMarkRead', () => {
 
       it('should be performed when document is hidden and is scrolled to the bottom', async () => {
         let channelUnreadUiStateCb;
-        setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+        setChannelUnreadUiState.mockImplementationOnce(
+          (cb) => (channelUnreadUiStateCb = cb),
+        );
         const {
           channels: [channel],
           client,
@@ -542,7 +556,9 @@ describe('useMarkRead', () => {
           params: shouldMarkReadParams,
         });
 
-        const docHiddenSpy = jest.spyOn(document, 'hidden', 'get').mockReturnValueOnce(true);
+        const docHiddenSpy = jest
+          .spyOn(document, 'hidden', 'get')
+          .mockReturnValueOnce(true);
         await act(() => {
           dispatchMessageNewEvent(client, generateMessage(), channel);
         });
@@ -557,7 +573,9 @@ describe('useMarkRead', () => {
     describe('update unread UI state last_read', () => {
       it('should be performed when message list is not scrolled to bottom', async () => {
         let channelUnreadUiStateCb;
-        setChannelUnreadUiState.mockImplementationOnce((cb) => (channelUnreadUiStateCb = cb));
+        setChannelUnreadUiState.mockImplementationOnce(
+          (cb) => (channelUnreadUiStateCb = cb),
+        );
         const channelsData = [
           generateChannel({ messages: Array.from({ length: 2 }, generateMessage) }),
         ];
@@ -652,7 +670,9 @@ describe('useMarkRead', () => {
           params: shouldMarkReadParams,
         });
 
-        const docHiddenSpy = jest.spyOn(document, 'hidden', 'get').mockReturnValueOnce(true);
+        const docHiddenSpy = jest
+          .spyOn(document, 'hidden', 'get')
+          .mockReturnValueOnce(true);
         await act(async () => {
           await dispatchMessageNewEvent(client, generateMessage(), channel);
         });
diff --git a/src/components/MessageList/hooks/__tests__/useMessageListScrollManager.test.js b/src/components/MessageList/hooks/__tests__/useMessageListScrollManager.test.js
index 482ba5c86..029445352 100644
--- a/src/components/MessageList/hooks/__tests__/useMessageListScrollManager.test.js
+++ b/src/components/MessageList/hooks/__tests__/useMessageListScrollManager.test.js
@@ -190,7 +190,8 @@ describe('useMessageListScrollManager', () => {
     const messages = generateMessages(20);
     const { rerender } = render(
       <ChatProvider value={{ client }}>
-        <Comp messages={messages} offsetHeight={100} scrollHeight={400} scrollTop={300} />,
+        <Comp messages={messages} offsetHeight={100} scrollHeight={400} scrollTop={300} />
+        ,
       </ChatProvider>,
     );
 
diff --git a/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js b/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js
index 461fc6c83..c1c6ffb45 100644
--- a/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js
+++ b/src/components/MessageList/hooks/__tests__/usePrependMessagesCount.test.js
@@ -22,13 +22,18 @@ const page1WithDateSeparator = messagesWithDateSeparator({ messages: page1 });
 const page2WithDateSeparator = messagesWithDateSeparator({ messages: page2 });
 
 const render = ({ hasDateSeparator, messages } = {}) =>
-  renderHook((props) => usePrependedMessagesCount(props.messages, props.hasDateSeparator), {
-    initialProps: { hasDateSeparator, messages },
-  });
+  renderHook(
+    (props) => usePrependedMessagesCount(props.messages, props.hasDateSeparator),
+    {
+      initialProps: { hasDateSeparator, messages },
+    },
+  );
 describe('usePrependMessagesCount', function () {
   it('is 0 when not messages are available', () => {
     const { result: resultMessagesUndefined } = render();
-    const { result: resultMessagesUndefinedHasDateSeparator } = render({ hasDateSeparator: true });
+    const { result: resultMessagesUndefinedHasDateSeparator } = render({
+      hasDateSeparator: true,
+    });
     const { result: resultMessagesEmpty } = render({ messages: [] });
     const { result: resultMessagesEmptyHasDateSeparator } = render({
       hasDateSeparator: true,
diff --git a/src/components/MessageList/hooks/useLastReadData.ts b/src/components/MessageList/hooks/useLastReadData.ts
index 814cd4596..f631f53a9 100644
--- a/src/components/MessageList/hooks/useLastReadData.ts
+++ b/src/components/MessageList/hooks/useLastReadData.ts
@@ -9,7 +9,7 @@ import type { StreamMessage } from '../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 type UseLastReadDataParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   messages: StreamMessage<StreamChatGenerics>[];
   returnAllReadData: boolean;
@@ -18,7 +18,7 @@ type UseLastReadDataParams<
 };
 
 export const useLastReadData = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: UseLastReadDataParams<StreamChatGenerics>,
 ) => {
diff --git a/src/components/MessageList/hooks/useMarkRead.ts b/src/components/MessageList/hooks/useMarkRead.ts
index b1bd357d3..26181cd98 100644
--- a/src/components/MessageList/hooks/useMarkRead.ts
+++ b/src/components/MessageList/hooks/useMarkRead.ts
@@ -9,7 +9,7 @@ import type { Channel, Event, MessageResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 const hasReadLastMessage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   channel: Channel<StreamChatGenerics>,
   userId: string,
@@ -35,7 +35,7 @@ type UseMarkReadParams = {
  * @param wasChannelMarkedUnread
  */
 export const useMarkRead = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   isMessageListScrolledToBottom,
   messageListIsThread,
@@ -59,7 +59,8 @@ export const useMarkRead = <
     };
 
     const handleMessageNew = (event: Event<StreamChatGenerics>) => {
-      const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+      const mainChannelUpdated =
+        !event.message?.parent_id || event.message?.show_in_channel;
 
       if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {
         setChannelUnreadUiState((prev) => {
@@ -106,8 +107,11 @@ export const useMarkRead = <
 };
 
 function getPreviousLastMessage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(messages: StreamMessage<StreamChatGenerics>[], newMessage?: MessageResponse<StreamChatGenerics>) {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  messages: StreamMessage<StreamChatGenerics>[],
+  newMessage?: MessageResponse<StreamChatGenerics>,
+) {
   if (!newMessage) return;
   let previousLastMessage;
   for (let i = messages.length - 1; i >= 0; i--) {
diff --git a/src/components/MessageList/renderMessages.tsx b/src/components/MessageList/renderMessages.tsx
index fb144a387..0da5803a1 100644
--- a/src/components/MessageList/renderMessages.tsx
+++ b/src/components/MessageList/renderMessages.tsx
@@ -15,7 +15,7 @@ import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { MessageProps } from '../Message';
 
 export interface RenderMessagesOptions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > {
   components: ComponentContextValue<StreamChatGenerics>;
   lastReceivedMessageId: string | null;
@@ -39,11 +39,11 @@ export interface RenderMessagesOptions<
 }
 
 export type SharedMessageProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<MessageProps<StreamChatGenerics>, MessagePropsToOmit>;
 
 export type MessageRenderer<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (options: RenderMessagesOptions<StreamChatGenerics>) => Array<ReactNode>;
 
 type MessagePropsToOmit =
@@ -55,7 +55,7 @@ type MessagePropsToOmit =
   | 'readBy';
 
 export function defaultRenderMessages<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channelUnreadUiState,
   components,
@@ -96,7 +96,10 @@ export function defaultRenderMessages<
       );
     } else if (message.type === 'system') {
       renderedMessages.push(
-        <li data-message-id={message.id} key={message.id || (message.created_at as string)}>
+        <li
+          data-message-id={message.id}
+          key={message.id || (message.created_at as string)}
+        >
           <MessageSystem message={message} />
         </li>,
       );
@@ -105,7 +108,8 @@ export function defaultRenderMessages<
         firstMessage = message;
       }
       const groupStyles: GroupStyle = messageGroupStyles[message.id] || '';
-      const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
+      const messageClass =
+        customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
 
       const isFirstUnreadMessage = getIsFirstUnreadMessage({
         firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
@@ -121,10 +125,16 @@ export function defaultRenderMessages<
         <Fragment key={message.id || (message.created_at as string)}>
           {isFirstUnreadMessage && UnreadMessagesSeparator && (
             <li className='str-chat__li str-chat__unread-messages-separator-wrapper'>
-              <UnreadMessagesSeparator unreadCount={channelUnreadUiState?.unread_messages} />
+              <UnreadMessagesSeparator
+                unreadCount={channelUnreadUiState?.unread_messages}
+              />
             </li>
           )}
-          <li className={messageClass} data-message-id={message.id} data-testid={messageClass}>
+          <li
+            className={messageClass}
+            data-message-id={message.id}
+            data-testid={messageClass}
+          >
             <Message
               groupStyles={[groupStyles]} /* TODO: convert to simple string */
               lastReceivedId={lastReceivedId}
diff --git a/src/components/MessageList/utils.ts b/src/components/MessageList/utils.ts
index dcf5bc94d..565df7b66 100644
--- a/src/components/MessageList/utils.ts
+++ b/src/components/MessageList/utils.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-continue */
 import { nanoid } from 'nanoid';
 
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
@@ -23,7 +22,7 @@ type ProcessMessagesContext = {
 };
 
 export type ProcessMessagesParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ProcessMessagesContext & {
   messages: StreamMessage<StreamChatGenerics>[];
   reviewProcessedMessage?: (params: {
@@ -61,7 +60,7 @@ export type ProcessMessagesParams<
  * @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
  */
 export const processMessages = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: ProcessMessagesParams<StreamChatGenerics>,
 ) => {
@@ -86,7 +85,11 @@ export const processMessages = <
       continue;
     }
 
-    if (setGiphyPreviewMessage && message.type === 'ephemeral' && message.command === 'giphy') {
+    if (
+      setGiphyPreviewMessage &&
+      message.type === 'ephemeral' &&
+      message.command === 'giphy'
+    ) {
       ephemeralMessagePresent = true;
       setGiphyPreviewMessage(message);
       continue;
@@ -94,16 +97,25 @@ export const processMessages = <
 
     const changes: StreamMessage<StreamChatGenerics>[] = [];
     const messageDate =
-      (message.created_at && isDate(message.created_at) && message.created_at.toDateString()) || '';
+      (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) {
@@ -171,7 +183,7 @@ export const makeDateMessageId = (date?: string | Date) => {
 
 // fast since it usually iterates just the last few messages
 export const getLastReceived = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   messages: StreamMessage<StreamChatGenerics>[],
 ) => {
@@ -185,7 +197,7 @@ export const getLastReceived = <
 };
 
 export const getReadStates = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   messages: StreamMessage<StreamChatGenerics>[],
   read: Record<string, { last_read: Date; user: UserResponse<StreamChatGenerics> }> = {},
@@ -229,15 +241,15 @@ export const getReadStates = <
 };
 
 export const insertIntro = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   messages: StreamMessage<StreamChatGenerics>[],
   headerPosition?: number,
 ) => {
   const newMessages = messages;
-  const intro = ({
+  const intro = {
     customType: CUSTOM_MESSAGE_TYPE.intro,
-  } as unknown) as StreamMessage<StreamChatGenerics>;
+  } as unknown as StreamMessage<StreamChatGenerics>;
 
   // if no headerPosition is set, HeaderComponent will go at the top
   if (!headerPosition) {
@@ -255,7 +267,9 @@ export const insertIntro = <
   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;
+      message.created_at && isDate(message.created_at)
+        ? message.created_at.getTime()
+        : null;
 
     const nextMessage = messages[i + 1];
     const nextMessageTime =
@@ -267,7 +281,8 @@ export const insertIntro = <
     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) continue;
+        if (messages[i + 1] && messages[i + 1].customType === CUSTOM_MESSAGE_TYPE.date)
+          continue;
         if (!nextMessageTime) {
           newMessages.push(intro);
           return newMessages;
@@ -285,7 +300,7 @@ export const insertIntro = <
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 export const getGroupStyles = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   message: StreamMessage<StreamChatGenerics>,
   previousMessage: StreamMessage<StreamChatGenerics>,
@@ -312,7 +327,8 @@ export const getGroupStyles = <
     (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 =
@@ -324,12 +340,14 @@ export const getGroupStyles = <
     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) {
@@ -368,10 +386,13 @@ type DateSeparatorMessage = {
 };
 
 export function isDateSeparatorMessage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-  // @ts-ignore
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage {
-  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 = ({
@@ -402,6 +423,8 @@ export const getIsFirstUnreadMessage = ({
 
   return (
     firstUnreadMessageId === message.id ||
-    (!!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead))
+    (!!unreadMessageCount &&
+      messageIsUnread &&
+      (isFirstMessage || previousMessageIsLastRead))
   );
 };
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index f1e21c7ec..b93b95d0f 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -17,7 +17,12 @@ export type ModalProps = {
   ) => void;
 };
 
-export const Modal = ({ children, className, onClose, open }: PropsWithChildren<ModalProps>) => {
+export const Modal = ({
+  children,
+  className,
+  onClose,
+  open,
+}: PropsWithChildren<ModalProps>) => {
   const { t } = useTranslationContext('Modal');
 
   const innerRef = useRef<HTMLDivElement | null>(null);
@@ -27,14 +32,15 @@ export const Modal = ({ children, className, onClose, open }: PropsWithChildren<
     const target = event.target as HTMLButtonElement | HTMLDivElement;
     if (!innerRef.current || !closeRef.current) return;
 
-    if (!innerRef.current.contains(target) || closeRef.current.contains(target)) onClose?.(event);
+    if (!innerRef.current.contains(target) || closeRef.current.contains(target))
+      onClose?.(event);
   };
 
   useEffect(() => {
     if (!open) return;
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose?.((event as unknown) as React.KeyboardEvent);
+      if (event.key === 'Escape') onClose?.(event as unknown as React.KeyboardEvent);
     };
 
     document.addEventListener('keydown', handleKeyDown);
@@ -44,12 +50,22 @@ export const Modal = ({ children, className, onClose, open }: PropsWithChildren<
   if (!open) return null;
 
   return (
-    <div className={clsx('str-chat__modal str-chat__modal--open', className)} onClick={handleClick}>
+    <div
+      className={clsx('str-chat__modal str-chat__modal--open', className)}
+      onClick={handleClick}
+    >
       <FocusScope autoFocus contain>
-        <button className='str-chat__modal__close-button' ref={closeRef} title={t<string>('Close')}>
+        <button
+          className='str-chat__modal__close-button'
+          ref={closeRef}
+          title={t<string>('Close')}
+        >
           <CloseIconRound />
         </button>
-        <div className='str-chat__modal__inner str-chat-react__modal__inner' ref={innerRef}>
+        <div
+          className='str-chat__modal__inner str-chat-react__modal__inner'
+          ref={innerRef}
+        >
           {children}
         </div>
       </FocusScope>
diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx
index 6bb84591e..fb7a2372c 100644
--- a/src/components/Modal/ModalHeader.tsx
+++ b/src/components/Modal/ModalHeader.tsx
@@ -10,7 +10,9 @@ export type ModalHeaderProps = {
 
 export const ModalHeader = ({ className, close, goBack, title }: ModalHeaderProps) => (
   <div className={clsx('str-chat__modal-header', className)}>
-    {goBack && <button className='str-chat__modal-header__go-back-button' onClick={goBack} />}
+    {goBack && (
+      <button className='str-chat__modal-header__go-back-button' onClick={goBack} />
+    )}
     <div className='str-chat__modal-header__title'>{title}</div>
     {close && <button className='str-chat__modal-header__close-button' onClick={close} />}
   </div>
diff --git a/src/components/Modal/__tests__/Modal.test.js b/src/components/Modal/__tests__/Modal.test.js
index b6d692d30..6d78a13b2 100644
--- a/src/components/Modal/__tests__/Modal.test.js
+++ b/src/components/Modal/__tests__/Modal.test.js
@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 import { Modal } from '../Modal';
 
 describe('Modal', () => {
-  afterEach(cleanup); // eslint-disable-line
+  afterEach(cleanup);
 
   it('should be closed (null) if the `open` prop is set to false', () => {
     const { container } = render(<Modal onClose={() => {}} open={false} />);
diff --git a/src/components/Poll/Poll.tsx b/src/components/Poll/Poll.tsx
index 55dcbb058..016864244 100644
--- a/src/components/Poll/Poll.tsx
+++ b/src/components/Poll/Poll.tsx
@@ -6,7 +6,7 @@ import type { Poll as PollClass } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types';
 
 export const Poll = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   isQuoted,
   poll,
@@ -14,10 +14,8 @@ export const Poll = <
   poll: PollClass<StreamChatGenerics>;
   isQuoted?: boolean;
 }) => {
-  const {
-    PollContent = DefaultPollContent,
-    QuotedPoll = DefaultQuotedPoll,
-  } = useComponentContext();
+  const { PollContent = DefaultPollContent, QuotedPoll = DefaultQuotedPoll } =
+    useComponentContext();
   return poll ? (
     <PollProvider poll={poll}>{isQuoted ? <QuotedPoll /> : <PollContent />}</PollProvider>
   ) : null;
diff --git a/src/components/Poll/PollActions/AddCommentForm.tsx b/src/components/Poll/PollActions/AddCommentForm.tsx
index 71530f52a..ff3b0d51a 100644
--- a/src/components/Poll/PollActions/AddCommentForm.tsx
+++ b/src/components/Poll/PollActions/AddCommentForm.tsx
@@ -7,7 +7,7 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 type PollStateSelectorReturnValue = { ownAnswer: PollAnswer | undefined };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue => ({ ownAnswer: nextValue.ownAnswer });
@@ -18,7 +18,7 @@ export type AddCommentFormProps = {
 };
 
 export const AddCommentForm = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
   messageId,
diff --git a/src/components/Poll/PollActions/EndPollDialog.tsx b/src/components/Poll/PollActions/EndPollDialog.tsx
index a1b851e76..103243bda 100644
--- a/src/components/Poll/PollActions/EndPollDialog.tsx
+++ b/src/components/Poll/PollActions/EndPollDialog.tsx
@@ -8,7 +8,7 @@ export type EndPollDialogProps = {
 };
 
 export const EndPollDialog = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
 }: EndPollDialogProps) => {
diff --git a/src/components/Poll/PollActions/PollActions.tsx b/src/components/Poll/PollActions/PollActions.tsx
index 99fac20da..cd633a505 100644
--- a/src/components/Poll/PollActions/PollActions.tsx
+++ b/src/components/Poll/PollActions/PollActions.tsx
@@ -1,12 +1,21 @@
 import React, { useCallback, useState } from 'react';
 import { PollAction } from './PollAction';
-import { AddCommentFormProps, AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
+import {
+  AddCommentFormProps,
+  AddCommentForm as DefaultAddCommentForm,
+} from './AddCommentForm';
 import {
   SuggestPollOptionForm as DefaultSuggestPollOptionForm,
   SuggestPollOptionFormProps,
 } from './SuggestPollOptionForm';
-import { EndPollDialog as DefaultEndPollDialog, EndPollDialogProps } from './EndPollDialog';
-import { PollAnswerList as DefaultPollAnswerList, PollAnswerListProps } from './PollAnswerList';
+import {
+  EndPollDialog as DefaultEndPollDialog,
+  EndPollDialogProps,
+} from './EndPollDialog';
+import {
+  PollAnswerList as DefaultPollAnswerList,
+  PollAnswerListProps,
+} from './PollAnswerList';
 import {
   PollOptionsFullList as DefaultPollOptionsFullList,
   FullPollOptionsListingProps,
@@ -43,7 +52,7 @@ type PollStateSelectorReturnValue = {
   ownAnswer: PollAnswer | undefined;
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue => ({
@@ -66,7 +75,7 @@ export type PollActionsProps = {
 };
 
 export const PollActions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   AddCommentForm = DefaultAddCommentForm,
   EndPollDialog = DefaultEndPollDialog,
@@ -77,7 +86,8 @@ export const PollActions = <
 }: PollActionsProps) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext('PollActions');
-  const { channelCapabilities = {} } = useChannelStateContext<StreamChatGenerics>('PollActions');
+  const { channelCapabilities = {} } =
+    useChannelStateContext<StreamChatGenerics>('PollActions');
   const { message } = useMessageContext('PollActions');
   const { poll } = usePollContext<StreamChatGenerics>();
   const {
@@ -109,21 +119,25 @@ export const PollActions = <
         </PollAction>
       )}
 
-      {!is_closed && allow_user_suggested_options && options.length < MAX_POLL_OPTIONS && (
-        <PollAction
-          buttonText={t<string>('Suggest an option')}
-          closeModal={closeModal}
-          modalClassName='str-chat__suggest-poll-option-modal'
-          modalIsOpen={modalOpen === 'suggest-option'}
-          openModal={() => setModalOpen('suggest-option')}
-        >
-          <SuggestPollOptionForm close={closeModal} messageId={message.id} />
-        </PollAction>
-      )}
+      {!is_closed &&
+        allow_user_suggested_options &&
+        options.length < MAX_POLL_OPTIONS && (
+          <PollAction
+            buttonText={t<string>('Suggest an option')}
+            closeModal={closeModal}
+            modalClassName='str-chat__suggest-poll-option-modal'
+            modalIsOpen={modalOpen === 'suggest-option'}
+            openModal={() => setModalOpen('suggest-option')}
+          >
+            <SuggestPollOptionForm close={closeModal} messageId={message.id} />
+          </PollAction>
+        )}
 
       {!is_closed && allow_answers && (
         <PollAction
-          buttonText={ownAnswer ? t<string>('Update your comment') : t<string>('Add a comment')}
+          buttonText={
+            ownAnswer ? t<string>('Update your comment') : t<string>('Add a comment')
+          }
           closeModal={closeModal}
           modalClassName='str-chat__add-poll-answer-modal'
           modalIsOpen={modalOpen === 'add-comment'}
@@ -141,7 +155,10 @@ export const PollActions = <
           modalIsOpen={modalOpen === 'view-comments'}
           openModal={() => setModalOpen('view-comments')}
         >
-          <PollAnswerList close={closeModal} onUpdateOwnAnswerClick={onUpdateAnswerClick} />
+          <PollAnswerList
+            close={closeModal}
+            onUpdateOwnAnswerClick={onUpdateAnswerClick}
+          />
         </PollAction>
       )}
 
diff --git a/src/components/Poll/PollActions/PollAnswerList.tsx b/src/components/Poll/PollActions/PollAnswerList.tsx
index 78a6e59b8..c651d2e1f 100644
--- a/src/components/Poll/PollActions/PollAnswerList.tsx
+++ b/src/components/Poll/PollActions/PollAnswerList.tsx
@@ -15,7 +15,7 @@ type PollStateSelectorReturnValue = {
   ownAnswer: PollAnswer | undefined;
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue => ({
@@ -29,7 +29,7 @@ export type PollAnswerListProps = {
 };
 
 export const PollAnswerList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
   onUpdateOwnAnswerClick,
@@ -38,13 +38,8 @@ export const PollAnswerList = <
   const { poll } = usePollContext<StreamChatGenerics>();
   const { is_closed, ownAnswer } = useStateStore(poll.state, pollStateSelector);
 
-  const {
-    answers,
-    error,
-    hasNextPage,
-    loading,
-    loadMore,
-  } = usePollAnswerPagination<StreamChatGenerics>();
+  const { answers, error, hasNextPage, loading, loadMore } =
+    usePollAnswerPagination<StreamChatGenerics>();
 
   return (
     <div className='str-chat__modal__poll-answer-list'>
diff --git a/src/components/Poll/PollActions/PollOptionsFullList.tsx b/src/components/Poll/PollActions/PollOptionsFullList.tsx
index 505b56207..0fae91f8f 100644
--- a/src/components/Poll/PollActions/PollOptionsFullList.tsx
+++ b/src/components/Poll/PollActions/PollOptionsFullList.tsx
@@ -9,7 +9,7 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 
 type PollStateSelectorReturnValue = { name: string };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue => ({ name: nextValue.name });
@@ -19,7 +19,7 @@ export type FullPollOptionsListingProps = {
 };
 
 export const PollOptionsFullList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
 }: FullPollOptionsListingProps) => {
diff --git a/src/components/Poll/PollActions/PollResults/PollOptionVotesList.tsx b/src/components/Poll/PollActions/PollResults/PollOptionVotesList.tsx
index ffdeb740c..da98bbe6b 100644
--- a/src/components/Poll/PollActions/PollResults/PollOptionVotesList.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollOptionVotesList.tsx
@@ -8,13 +8,13 @@ import type { PollOption, PollOptionVotesQueryParams } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types';
 
 export type PollOptionVotesListingProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   option: PollOption<StreamChatGenerics>;
 };
 
 export const PollOptionVotesList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   option,
 }: PollOptionVotesListingProps<StreamChatGenerics>) => {
@@ -22,15 +22,10 @@ export const PollOptionVotesList = <
     () => ({ filter: { option_id: option.id } }),
     [option.id],
   );
-  const {
-    error,
-    hasNextPage,
-    loading,
-    loadMore,
-    votes,
-  } = usePollOptionVotesPagination<StreamChatGenerics>({
-    paginationParams,
-  });
+  const { error, hasNextPage, loading, loadMore, votes } =
+    usePollOptionVotesPagination<StreamChatGenerics>({
+      paginationParams,
+    });
 
   return (
     <div className='str-chat__poll-option str-chat__poll-option--full-vote-list'>
diff --git a/src/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.tsx b/src/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.tsx
index 2eb867b8a..18df5886a 100644
--- a/src/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.tsx
@@ -2,22 +2,28 @@ import React from 'react';
 import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
 import { PollVoteListing } from '../../PollVote';
 import { useStateStore } from '../../../../store';
-import { useChannelStateContext, usePollContext, useTranslationContext } from '../../../../context';
+import {
+  useChannelStateContext,
+  usePollContext,
+  useTranslationContext,
+} from '../../../../context';
 import type { PollOption, PollState, PollVote } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types';
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = { latest_votes_by_option: Record<string, PollVote<StreamChatGenerics>[]> };
 
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
-): PollStateSelectorReturnValue => ({ latest_votes_by_option: nextValue.latest_votes_by_option });
+): PollStateSelectorReturnValue => ({
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+});
 
 export type PollOptionWithVotesProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   option: PollOption<StreamChatGenerics>;
   countVotesPreview?: number;
@@ -25,7 +31,7 @@ export type PollOptionWithVotesProps<
 };
 
 export const PollOptionWithLatestVotes = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   countVotesPreview = 5,
   option,
@@ -47,7 +53,10 @@ export const PollOptionWithLatestVotes = <
       {channelCapabilities['query-poll-votes'] &&
         showAllVotes &&
         votes?.length > countVotesPreview && (
-          <button className='str-chat__poll-option__show-all-votes-button' onClick={showAllVotes}>
+          <button
+            className='str-chat__poll-option__show-all-votes-button'
+            onClick={showAllVotes}
+          >
             {t<string>('Show all')}
           </button>
         )}
diff --git a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
index 55febf958..4af19ede8 100644
--- a/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
@@ -9,7 +9,7 @@ type PollStateSelectorReturnValue = {
   vote_counts_by_option: Record<string, number>;
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue => ({
@@ -22,13 +22,16 @@ export type PollResultOptionVoteCounterProps = {
 };
 
 export const PollResultOptionVoteCounter = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   optionId,
 }: PollResultOptionVoteCounterProps) => {
   const { t } = useTranslationContext();
   const { poll } = usePollContext<StreamChatGenerics>();
-  const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+  const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(
+    poll.state,
+    pollStateSelector,
+  );
 
   return (
     <div className='str-chat__poll-result-option-vote-counter'>
@@ -43,13 +46,13 @@ export const PollResultOptionVoteCounter = <
 };
 
 export type PollOptionWithVotesHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   option: PollOption<StreamChatGenerics>;
 };
 
 export const PollOptionWithVotesHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   option,
 }: PollOptionWithVotesHeaderProps<StreamChatGenerics>) => (
diff --git a/src/components/Poll/PollActions/PollResults/PollResults.tsx b/src/components/Poll/PollActions/PollResults/PollResults.tsx
index c76b99871..3797f1b8b 100644
--- a/src/components/Poll/PollActions/PollResults/PollResults.tsx
+++ b/src/components/Poll/PollActions/PollResults/PollResults.tsx
@@ -9,14 +9,14 @@ import type { PollOption, PollState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../../types';
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   name: string;
   options: PollOption<StreamChatGenerics>[];
   vote_counts_by_option: Record<string, number>;
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue<StreamChatGenerics> => ({
@@ -30,13 +30,16 @@ export type PollResultsProps = {
 };
 
 export const PollResults = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
 }: PollResultsProps) => {
   const { t } = useTranslationContext();
   const { poll } = usePollContext<StreamChatGenerics>();
-  const { name, options, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+  const { name, options, vote_counts_by_option } = useStateStore(
+    poll.state,
+    pollStateSelector,
+  );
   const [optionToView, setOptionToView] = useState<PollOption<StreamChatGenerics>>();
 
   const goBack = useCallback(() => setOptionToView(undefined), []);
@@ -65,7 +68,8 @@ export const PollResults = <
             <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)
+                  (vote_counts_by_option[current.id] ?? 0) >=
+                  (vote_counts_by_option[next.id] ?? 0)
                     ? 1
                     : -1,
                 )
diff --git a/src/components/Poll/PollActions/SuggestPollOptionForm.tsx b/src/components/Poll/PollActions/SuggestPollOptionForm.tsx
index 3629450ff..f7baf8fcc 100644
--- a/src/components/Poll/PollActions/SuggestPollOptionForm.tsx
+++ b/src/components/Poll/PollActions/SuggestPollOptionForm.tsx
@@ -6,10 +6,10 @@ import type { PollOption, PollState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = { options: PollOption<StreamChatGenerics>[] };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue<StreamChatGenerics> => ({ options: nextValue.options });
@@ -20,7 +20,7 @@ export type SuggestPollOptionFormProps = {
 };
 
 export const SuggestPollOptionForm = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   close,
   messageId,
diff --git a/src/components/Poll/PollContent.tsx b/src/components/Poll/PollContent.tsx
index 96100a2fa..286ace28a 100644
--- a/src/components/Poll/PollContent.tsx
+++ b/src/components/Poll/PollContent.tsx
@@ -11,17 +11,15 @@ import type { DefaultStreamChatGenerics } from '../../types';
 
 type PollStateSelectorPollContentReturnValue = { is_closed: boolean | undefined };
 const pollStateSelectorPollContent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorPollContentReturnValue => ({ is_closed: nextValue.is_closed });
 export const PollContent = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const {
-    PollHeader = DefaultPollHeader,
-    PollActions = DefaultPollActions,
-  } = useComponentContext<StreamChatGenerics>();
+  const { PollActions = DefaultPollActions, PollHeader = DefaultPollHeader } =
+    useComponentContext<StreamChatGenerics>();
   const { poll } = usePollContext<StreamChatGenerics>();
   const { is_closed } = useStateStore(poll.state, pollStateSelectorPollContent);
 
diff --git a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
index 0246c564c..6b1489e69 100644
--- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
+++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
@@ -7,7 +7,10 @@ import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
 import { useTranslationContext } from '../../../context';
 import type { OptionErrors, PollFormState, PollOptionFormData } from './types';
 
-const VALIDATION_ERRORS = ({ 'Option already exists': true } as const) as Record<string, boolean>;
+const VALIDATION_ERRORS = { 'Option already exists': true } as const as Record<
+  string,
+  boolean
+>;
 
 export type OptionFieldSetProps = {
   errors: OptionErrors;
@@ -16,7 +19,12 @@ export type OptionFieldSetProps = {
   setState: (fn: (prev: PollFormState) => PollFormState) => void;
 };
 
-export const OptionFieldSet = ({ errors, options, setErrors, setState }: OptionFieldSetProps) => {
+export const OptionFieldSet = ({
+  errors,
+  options,
+  setErrors,
+  setState,
+}: OptionFieldSetProps) => {
   const { t } = useTranslationContext('OptionFieldSet');
 
   const findOptionDuplicate = (sourceOption: PollOptionFormData) => {
@@ -30,7 +38,10 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }: OptionF
 
   const onSetNewOrder = useCallback(
     (newOrder: number[]) => {
-      setState((prev) => ({ ...prev, options: newOrder.map((index) => prev.options[index]) }));
+      setState((prev) => ({
+        ...prev,
+        options: newOrder.map((index) => prev.options[index]),
+      }));
     },
     [setState],
   );
@@ -76,7 +87,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }: OptionF
                       (!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;
+                      prev.options &&
+                      prev.options.slice(i + 1).length > 0 &&
+                      !e.target.value;
 
                     const optionListHead = prev.options ? prev.options.slice(0, i) : [];
                     const optionListTail = shouldAddEmptyOption
@@ -98,7 +111,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }: OptionF
                       ...prev,
                       options: [
                         ...optionListHead,
-                        ...(shouldRemoveOption ? [] : [{ ...option, text: e.target.value }]),
+                        ...(shouldRemoveOption
+                          ? []
+                          : [{ ...option, text: e.target.value }]),
                         ...optionListTail,
                       ],
                     };
diff --git a/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx b/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
index 3750b2bef..9d8b09b6a 100644
--- a/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
+++ b/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
@@ -36,7 +36,7 @@ export const PollCreationDialog = ({ close }: PollCreationDialogProps) => {
         options: [{ id: nanoid(), text: '' }],
         user_id: client.user?.id,
         voting_visibility: 'public',
-      } as PollFormState),
+      }) as PollFormState,
   );
 
   return (
@@ -123,13 +123,19 @@ export const PollCreationDialog = ({ close }: PollCreationDialogProps) => {
                     id='max_votes_allowed'
                     onChange={(e) => {
                       const isValidValue =
-                        !e.target.value || e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                        !e.target.value ||
+                        e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
                       if (!isValidValue) {
-                        setMultipleAnswerCountError(t<string>('Type a number from 2 to 10'));
+                        setMultipleAnswerCountError(
+                          t<string>('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<string>('Maximum number of votes (from 2 to 10)')}
                     type='number'
@@ -146,7 +152,9 @@ export const PollCreationDialog = ({ close }: PollCreationDialogProps) => {
             onChange={(e) =>
               setState((prev) => ({
                 ...prev,
-                voting_visibility: (e.target.checked ? 'anonymous' : 'public') as VotingVisibility,
+                voting_visibility: (e.target.checked
+                  ? 'anonymous'
+                  : 'public') as VotingVisibility,
               }))
             }
           />
@@ -155,14 +163,19 @@ export const PollCreationDialog = ({ close }: PollCreationDialogProps) => {
             id='allow_user_suggested_options'
             labelText={t<string>('Allow option suggestion')}
             onChange={(e) =>
-              setState((prev) => ({ ...prev, allow_user_suggested_options: e.target.checked }))
+              setState((prev) => ({
+                ...prev,
+                allow_user_suggested_options: e.target.checked,
+              }))
             }
           />
           <SimpleSwitchField
             checked={state.allow_answers}
             id='allow_answers'
             labelText={t<string>('Allow comments')}
-            onChange={(e) => setState((prev) => ({ ...prev, allow_answers: e.target.checked }))}
+            onChange={(e) =>
+              setState((prev) => ({ ...prev, allow_answers: e.target.checked }))
+            }
           />
         </form>
       </div>
diff --git a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
index a7d53d46a..cbec914dd 100644
--- a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
+++ b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
-import { useChatContext, useMessageInputContext, useTranslationContext } from '../../../context';
+import {
+  useChatContext,
+  useMessageInputContext,
+  useTranslationContext,
+} from '../../../context';
 import type { PollFormState } from './types';
 
 export type PollCreationDialogControlsProps = {
@@ -29,7 +33,8 @@ export const PollCreationDialogControls = ({
 
     const validMaxVotesAllowed =
       state.max_votes_allowed === '' ||
-      (!!maxVotesAllowedNumber && (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
+      (!!maxVotesAllowedNumber &&
+        (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
 
     const noErrors = errors.length === 0;
 
@@ -55,7 +60,9 @@ export const PollCreationDialogControls = ({
               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;
           } catch (e) {
diff --git a/src/components/Poll/PollHeader.tsx b/src/components/Poll/PollHeader.tsx
index 673da1767..902a93a48 100644
--- a/src/components/Poll/PollHeader.tsx
+++ b/src/components/Poll/PollHeader.tsx
@@ -5,7 +5,7 @@ import type { PollOption, PollState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types';
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   enforce_unique_vote: boolean;
   is_closed: boolean | undefined;
@@ -14,7 +14,7 @@ type PollStateSelectorReturnValue<
   options: PollOption<StreamChatGenerics>[];
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue<StreamChatGenerics> => ({
@@ -26,15 +26,13 @@ const pollStateSelector = <
 });
 
 export const PollHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const { t } = useTranslationContext('PollHeader');
 
   const { poll } = usePollContext<StreamChatGenerics>();
-  const { enforce_unique_vote, is_closed, max_votes_allowed, name, options } = useStateStore(
-    poll.state,
-    pollStateSelector,
-  );
+  const { enforce_unique_vote, is_closed, max_votes_allowed, name, options } =
+    useStateStore(poll.state, pollStateSelector);
 
   const selectionInstructions = useMemo(() => {
     if (is_closed) return t<string>('Vote ended');
diff --git a/src/components/Poll/PollOptionList.tsx b/src/components/Poll/PollOptionList.tsx
index 16c816420..3de14f549 100644
--- a/src/components/Poll/PollOptionList.tsx
+++ b/src/components/Poll/PollOptionList.tsx
@@ -7,11 +7,11 @@ import type { PollOption, PollState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types';
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = { options: PollOption<StreamChatGenerics>[] };
 
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue<StreamChatGenerics> => ({ options: nextValue.options });
@@ -21,13 +21,12 @@ export type PollOptionListProps = {
 };
 
 export const PollOptionList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   optionsDisplayCount,
 }: PollOptionListProps) => {
-  const {
-    PollOptionSelector = DefaultPollOptionSelector,
-  } = useComponentContext<StreamChatGenerics>();
+  const { PollOptionSelector = DefaultPollOptionSelector } =
+    useComponentContext<StreamChatGenerics>();
   const { poll } = usePollContext<StreamChatGenerics>();
   const { options } = useStateStore(poll.state, pollStateSelector);
 
diff --git a/src/components/Poll/PollOptionSelector.tsx b/src/components/Poll/PollOptionSelector.tsx
index 4b253ab9b..7576c8a21 100644
--- a/src/components/Poll/PollOptionSelector.tsx
+++ b/src/components/Poll/PollOptionSelector.tsx
@@ -34,11 +34,13 @@ export const AmountBar = ({ amount, className }: AmountBarProps) => (
 export type CheckmarkProps = { checked?: boolean };
 
 export const Checkmark = ({ checked }: CheckmarkProps) => (
-  <div className={clsx('str-chat__checkmark', { 'str-chat__checkmark--checked': checked })} />
+  <div
+    className={clsx('str-chat__checkmark', { 'str-chat__checkmark--checked': checked })}
+  />
 );
 
 type PollStateSelectorReturnValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   is_closed: boolean | undefined;
   latest_votes_by_option: Record<string, PollVote<StreamChatGenerics>[]>;
@@ -48,7 +50,7 @@ type PollStateSelectorReturnValue<
   voting_visibility: VotingVisibility | undefined;
 };
 const pollStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorReturnValue<StreamChatGenerics> => ({
@@ -61,7 +63,7 @@ const pollStateSelector = <
 });
 
 export type PollOptionSelectorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   option: PollOption<StreamChatGenerics>;
   displayAvatarCount?: number;
@@ -69,16 +71,15 @@ export type PollOptionSelectorProps<
 };
 
 export const PollOptionSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   displayAvatarCount,
   option,
   voteCountVerbose,
 }: PollOptionSelectorProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
-  const { channelCapabilities = {} } = useChannelStateContext<StreamChatGenerics>(
-    'PollOptionsShortlist',
-  );
+  const { channelCapabilities = {} } =
+    useChannelStateContext<StreamChatGenerics>('PollOptionsShortlist');
   const { message } = useMessageContext();
 
   const { poll } = usePollContext<StreamChatGenerics>();
@@ -91,7 +92,9 @@ export const PollOptionSelector = <
     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(
     () =>
@@ -133,17 +136,22 @@ export const PollOptionSelector = <
         )}
         <div className='str-chat__poll-option-vote-count'>
           {voteCountVerbose
-            ? t<string>('{{count}} votes', { count: vote_counts_by_option[option.id] ?? 0 })
-            : vote_counts_by_option[option.id] ?? 0}
+            ? t<string>('{{count}} votes', {
+                count: vote_counts_by_option[option.id] ?? 0,
+              })
+            : (vote_counts_by_option[option.id] ?? 0)}
         </div>
       </div>
       <AmountBar
         amount={
-          (winningOptionCount && (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100
+          (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,
+            is_closed &&
+            maxVotedOptionIds.length === 1 &&
+            maxVotedOptionIds[0] === option.id,
         })}
       />
     </div>
diff --git a/src/components/Poll/PollVote.tsx b/src/components/Poll/PollVote.tsx
index 439dbaa28..78d7d3d51 100644
--- a/src/components/Poll/PollVote.tsx
+++ b/src/components/Poll/PollVote.tsx
@@ -9,7 +9,8 @@ import type { DefaultStreamChatGenerics } from '../../types';
 
 const PollVoteTimestamp = ({ timestamp }: { timestamp: string }) => {
   const { t } = useTranslationContext();
-  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
+  const { handleEnter, handleLeave, tooltipVisible } =
+    useEnterLeaveHandlers<HTMLSpanElement>();
   const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
   const timestampDate = new Date(timestamp);
   return (
@@ -33,19 +34,20 @@ const PollVoteTimestamp = ({ timestamp }: { timestamp: string }) => {
 };
 
 type PollVoteProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   vote: PollVoteType<StreamChatGenerics>;
 };
 
 const PollVoteAuthor = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   vote,
 }: PollVoteProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
-  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
+  const { handleEnter, handleLeave, tooltipVisible } =
+    useEnterLeaveHandlers<HTMLSpanElement>();
   const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
   const displayName =
     client.user?.id && client.user.id === vote.user?.id
@@ -81,7 +83,7 @@ const PollVoteAuthor = <
 };
 
 export const PollVote = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   vote,
 }: PollVoteProps<StreamChatGenerics>) => (
@@ -92,13 +94,13 @@ export const PollVote = <
 );
 
 export type PollVoteListingProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   votes: PollVoteType<StreamChatGenerics>[];
 };
 
 export const PollVoteListing = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   votes,
 }: PollVoteListingProps<StreamChatGenerics>) => (
diff --git a/src/components/Poll/QuotedPoll.tsx b/src/components/Poll/QuotedPoll.tsx
index e995c6fa0..c2a4e5111 100644
--- a/src/components/Poll/QuotedPoll.tsx
+++ b/src/components/Poll/QuotedPoll.tsx
@@ -5,9 +5,12 @@ import { useStateStore } from '../../store';
 import type { PollState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types';
 
-type PollStateSelectorQuotedPollReturnValue = { is_closed: boolean | undefined; name: string };
+type PollStateSelectorQuotedPollReturnValue = {
+  is_closed: boolean | undefined;
+  name: string;
+};
 const pollStateSelectorQuotedPoll = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   nextValue: PollState<StreamChatGenerics>,
 ): PollStateSelectorQuotedPollReturnValue => ({
@@ -16,7 +19,7 @@ const pollStateSelectorQuotedPoll = <
 });
 
 export const QuotedPoll = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const { poll } = usePollContext<StreamChatGenerics>();
   const { is_closed, name } = useStateStore(poll.state, pollStateSelectorQuotedPoll);
diff --git a/src/components/Poll/__tests__/Poll.test.js b/src/components/Poll/__tests__/Poll.test.js
index be2d36981..0bedfb955 100644
--- a/src/components/Poll/__tests__/Poll.test.js
+++ b/src/components/Poll/__tests__/Poll.test.js
@@ -10,7 +10,11 @@ import {
   MessageProvider,
   TranslationProvider,
 } from '../../../context';
-import { generateMessage, generatePoll, getTestClientWithUser } from '../../../mock-builders';
+import {
+  generateMessage,
+  generatePoll,
+  getTestClientWithUser,
+} from '../../../mock-builders';
 
 const POLL_ACTIONS__CLASS = '.str-chat__poll-actions';
 const POLL_OPTION_LIST__CLASS = '.str-chat__poll-option-list';
@@ -39,7 +43,9 @@ const renderComponent = async ({
     <ChatProvider value={{ client }}>
       <TranslationProvider value={{ t }}>
         <ComponentProvider value={componentContext ?? {}}>
-          <ChannelStateProvider value={{ ...defaultChannelStateContext, ...channelStateContext }}>
+          <ChannelStateProvider
+            value={{ ...defaultChannelStateContext, ...channelStateContext }}
+          >
             <MessageProvider value={{ ...defaultMessageContext, ...messageContext }}>
               <Poll {...props} />
             </MessageProvider>
diff --git a/src/components/Poll/__tests__/PollActions.test.js b/src/components/Poll/__tests__/PollActions.test.js
index a33b13c98..b9d713f61 100644
--- a/src/components/Poll/__tests__/PollActions.test.js
+++ b/src/components/Poll/__tests__/PollActions.test.js
@@ -46,7 +46,9 @@ const renderComponent = async ({
   return render(
     <ChatProvider value={{ client }}>
       <TranslationProvider value={{ t }}>
-        <ChannelStateProvider value={{ ...defaultChannelStateContext, ...channelStateContext }}>
+        <ChannelStateProvider
+          value={{ ...defaultChannelStateContext, ...channelStateContext }}
+        >
           <MessageProvider value={{ ...defaultMessageContext, ...messageContext }}>
             <PollProvider poll={poll}>
               <PollActions {...props} />
@@ -86,21 +88,30 @@ describe('PollActions', () => {
   });
 
   it('shows "Suggest an option" action if poll is not closed and suggestions are allowed', async () => {
-    const pollData = generatePoll({ allow_user_suggested_options: true, is_closed: false });
+    const pollData = generatePoll({
+      allow_user_suggested_options: true,
+      is_closed: false,
+    });
     const poll = new Poll({ client: {}, poll: pollData });
     await renderComponent({ poll });
     expect(screen.getByText(SUGGEST_OPTION_ACTION_TEXT)).toBeInTheDocument();
   });
 
   it('hides "Suggest an option" action if poll is closed', async () => {
-    const pollData = generatePoll({ allow_user_suggested_options: true, is_closed: true });
+    const pollData = generatePoll({
+      allow_user_suggested_options: true,
+      is_closed: true,
+    });
     const poll = new Poll({ client: {}, poll: pollData });
     await renderComponent({ poll });
     expect(screen.queryByText(SUGGEST_OPTION_ACTION_TEXT)).not.toBeInTheDocument();
   });
 
   it('hides "Suggest an option" action if suggestions are not allowed', async () => {
-    const pollData = generatePoll({ allow_user_suggested_options: false, is_closed: false });
+    const pollData = generatePoll({
+      allow_user_suggested_options: false,
+      is_closed: false,
+    });
     const poll = new Poll({ client: {}, poll: pollData });
     await renderComponent({ poll });
     expect(screen.queryByText(SUGGEST_OPTION_ACTION_TEXT)).not.toBeInTheDocument();
@@ -202,7 +213,9 @@ describe('PollActions', () => {
     const poll = new Poll({ client, poll: pollData });
 
     const PollOptionsFullList = () => <div data-testid='poll-options-full-list-custom' />;
-    const SuggestPollOptionForm = () => <div data-testid='suggest-poll-option-form-custom' />;
+    const SuggestPollOptionForm = () => (
+      <div data-testid='suggest-poll-option-form-custom' />
+    );
     const AddCommentForm = () => <div data-testid='add-comment-form-custom' />;
     const PollAnswerList = () => <div data-testid='poll-answer-list-custom' />;
     const PollResults = () => <div data-testid='poll-results-custom' />;
diff --git a/src/components/Poll/__tests__/PollCreationDialog.test.js b/src/components/Poll/__tests__/PollCreationDialog.test.js
index ac1c03dcd..d195a2ac9 100644
--- a/src/components/Poll/__tests__/PollCreationDialog.test.js
+++ b/src/components/Poll/__tests__/PollCreationDialog.test.js
@@ -2,7 +2,11 @@ import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PollCreationDialog } from '../PollCreationDialog';
-import { ChatProvider, MessageInputContextProvider, TranslationProvider } from '../../../context';
+import {
+  ChatProvider,
+  MessageInputContextProvider,
+  TranslationProvider,
+} from '../../../context';
 import { generateUser, getTestClientWithUser } from '../../../mock-builders';
 
 const NAME_FIELD_PLACEHOLDER = 'Ask a question';
@@ -16,7 +20,8 @@ const CANCEL_BUTTON_TEXT = 'Cancel';
 const CREATE_BUTTON_TEXT = 'Create';
 const NAME_INPUT_FIELD_ERROR_TEST_ID = 'poll-name-input-field-error';
 const OPTION_INPUT_FIELD_ERROR_TEST_ID = 'poll-option-input-field-error';
-const MAX_VOTE_COUT_INPUT_FIELD_ERROR_TEST_ID = 'poll-max-votes-allowed-input-field-error';
+const MAX_VOTE_COUT_INPUT_FIELD_ERROR_TEST_ID =
+  'poll-max-votes-allowed-input-field-error';
 const REQUIRED_FIELD_ERROR_TEXT = 'The field is required';
 const DUPLICATE_OPTION_FIELD_ERROR_TEXT = 'Option already exists';
 const MAX_VOTE_COUNT_FIELD_ERROR_TEXT = 'Type a number from 2 to 10';
@@ -52,11 +57,15 @@ describe('PollCreationDialog', () => {
   it('initiates with default state', async () => {
     await renderComponent();
     expect(getNameInput()).toHaveValue('');
-    const optionFieldCount = screen.getAllByPlaceholderText(OPTION_FIELD_PLACEHOLDER).length;
+    const optionFieldCount = screen.getAllByPlaceholderText(
+      OPTION_FIELD_PLACEHOLDER,
+    ).length;
     expect(optionFieldCount).toBe(1);
     expect(getOptionInput()).toHaveValue('');
     expect(screen.getByLabelText(MULTIPLE_ANSWERS_FIELD_LABEL)).not.toBeChecked();
-    expect(screen.queryByPlaceholderText(MAX_VOTES_FIELD_PLACEHOLDER)).not.toBeInTheDocument();
+    expect(
+      screen.queryByPlaceholderText(MAX_VOTES_FIELD_PLACEHOLDER),
+    ).not.toBeInTheDocument();
     expect(screen.getByLabelText(VOTING_VISIBILITY_FIELD_LABEL)).not.toBeChecked();
     expect(screen.getByLabelText(OPTION_SUGGESTION_FIELD_LABEL)).not.toBeChecked();
     expect(screen.getByLabelText(ALLOW_COMMENTS_FIELD_LABEL)).not.toBeChecked();
@@ -166,7 +175,7 @@ describe('PollCreationDialog', () => {
       await fireEvent.blur(optionFields[1]);
     });
     const optionErrors = screen.getAllByTestId(OPTION_INPUT_FIELD_ERROR_TEST_ID);
-    // eslint-disable-next-line jest-dom/prefer-in-document
+
     expect(optionErrors).toHaveLength(3);
     expect(optionErrors[1]).toHaveTextContent(DUPLICATE_OPTION_FIELD_ERROR_TEXT);
     expect(screen.getByText(CANCEL_BUTTON_TEXT)).toBeEnabled();
@@ -196,7 +205,7 @@ describe('PollCreationDialog', () => {
     expect(optionFields[1]).toHaveValue(text);
     expect(optionFields[2]).toHaveValue('');
     const optionErrors = screen.getAllByTestId(OPTION_INPUT_FIELD_ERROR_TEST_ID);
-    // eslint-disable-next-line jest-dom/prefer-in-document
+
     expect(optionErrors).toHaveLength(3);
     expect(optionErrors[0]).not.toHaveTextContent();
     expect(optionErrors[1]).not.toHaveTextContent();
@@ -221,7 +230,7 @@ describe('PollCreationDialog', () => {
       await fireEvent.change(optionFields[0], { target: { value: '' } });
     });
     optionFields = screen.getAllByPlaceholderText(OPTION_FIELD_PLACEHOLDER);
-    // eslint-disable-next-line jest-dom/prefer-in-document
+
     expect(optionFields).toHaveLength(1);
     expect(screen.getByText(CANCEL_BUTTON_TEXT)).toBeEnabled();
     expect(screen.getByText(CREATE_BUTTON_TEXT)).toBeDisabled();
@@ -283,8 +292,10 @@ describe('PollCreationDialog', () => {
       fireEvent.change(maxVoteCountInput, { target: { value: '1' } });
     });
 
-    const maxVoteCountErrors = screen.getAllByTestId(MAX_VOTE_COUT_INPUT_FIELD_ERROR_TEST_ID);
-    // eslint-disable-next-line jest-dom/prefer-in-document
+    const maxVoteCountErrors = screen.getAllByTestId(
+      MAX_VOTE_COUT_INPUT_FIELD_ERROR_TEST_ID,
+    );
+
     expect(maxVoteCountErrors).toHaveLength(1);
     expect(maxVoteCountErrors[0]).toHaveTextContent(MAX_VOTE_COUNT_FIELD_ERROR_TEXT);
     expect(screen.getByPlaceholderText(MAX_VOTES_FIELD_PLACEHOLDER).value).toBe('1');
@@ -341,17 +352,21 @@ describe('PollCreationDialog', () => {
 
     const client = await getTestClientWithUser(user);
     let pollId;
-    const createPollSpy = jest.spyOn(client, 'createPoll').mockImplementationOnce((poll) => {
-      pollId = poll.id;
-      return Promise.resolve({ poll });
-    });
+    const createPollSpy = jest
+      .spyOn(client, 'createPoll')
+      .mockImplementationOnce((poll) => {
+        pollId = poll.id;
+        return Promise.resolve({ poll });
+      });
 
     await renderComponent({ client });
     act(() => {
       fireEvent.change(getNameInput(), { target: { value: formState.name } });
     });
     act(() => {
-      fireEvent.change(getOptionInput(), { target: { value: formState.options[0].text } });
+      fireEvent.change(getOptionInput(), {
+        target: { value: formState.options[0].text },
+      });
     });
     const optionFields = screen.getAllByPlaceholderText(OPTION_FIELD_PLACEHOLDER);
     act(() => {
@@ -382,7 +397,9 @@ describe('PollCreationDialog', () => {
     });
 
     await waitFor(() => {
-      expect(createPollSpy).toHaveBeenCalledWith(expect.objectContaining(expectedPollPayload));
+      expect(createPollSpy).toHaveBeenCalledWith(
+        expect.objectContaining(expectedPollPayload),
+      );
       expect(close).toHaveBeenCalledTimes(1);
       expect(handleSubmit).toHaveBeenCalledWith(expect.any(Object), { poll_id: pollId });
     });
diff --git a/src/components/Poll/__tests__/PollHeader.test.js b/src/components/Poll/__tests__/PollHeader.test.js
index 1376cfc05..b6c5157b0 100644
--- a/src/components/Poll/__tests__/PollHeader.test.js
+++ b/src/components/Poll/__tests__/PollHeader.test.js
@@ -23,13 +23,17 @@ const renderComponent = ({ poll }) =>
 describe('PollHeader', () => {
   it('should not render if poll name is missing', () => {
     const pollData = generatePoll({ name: '' });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     expect(container).toBeEmptyDOMElement();
   });
 
   it('should render vote ended header', () => {
     const pollData = generatePoll({ is_closed: true });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const nameDiv = container.querySelector(TITLE_SELECTOR);
     const subtitleDiv = container.querySelector(SUBTITLE_SELECTOR);
     expect(nameDiv).toHaveTextContent(pollData.name);
@@ -38,7 +42,9 @@ describe('PollHeader', () => {
 
   it('should render select one header', () => {
     const pollData = generatePoll({ enforce_unique_vote: true });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const nameDiv = container.querySelector(TITLE_SELECTOR);
     const subtitleDiv = container.querySelector(SUBTITLE_SELECTOR);
     expect(nameDiv).toHaveTextContent(pollData.name);
@@ -47,7 +53,9 @@ describe('PollHeader', () => {
 
   it('should render Select up to {{count}} header', () => {
     const pollData = generatePoll({ max_votes_allowed: 2 });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const nameDiv = container.querySelector(TITLE_SELECTOR);
     const subtitleDiv = container.querySelector(SUBTITLE_SELECTOR);
     expect(nameDiv).toHaveTextContent(pollData.name);
@@ -56,7 +64,9 @@ describe('PollHeader', () => {
 
   it('should render Select one or more header', () => {
     const pollData = generatePoll({ max_votes_allowed: undefined });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const nameDiv = container.querySelector(TITLE_SELECTOR);
     const subtitleDiv = container.querySelector(SUBTITLE_SELECTOR);
     expect(nameDiv).toHaveTextContent(pollData.name);
diff --git a/src/components/Poll/__tests__/PollOptionList.test.js b/src/components/Poll/__tests__/PollOptionList.test.js
index a4381d217..78d4567b7 100644
--- a/src/components/Poll/__tests__/PollOptionList.test.js
+++ b/src/components/Poll/__tests__/PollOptionList.test.js
@@ -46,7 +46,9 @@ const defaultMessageContext = {
 const renderComponent = ({ channelStateContext, messageContext, poll }) =>
   render(
     <TranslationProvider value={{ t }}>
-      <ChannelStateProvider value={{ ...defaultChannelStateContext, ...channelStateContext }}>
+      <ChannelStateProvider
+        value={{ ...defaultChannelStateContext, ...channelStateContext }}
+      >
         <MessageProvider value={{ ...defaultMessageContext, ...messageContext }}>
           <PollProvider poll={poll}>
             <PollOptionList />
@@ -63,13 +65,17 @@ describe('PollOptionList', () => {
 
   it('renders empty container if no options', () => {
     const pollData = generatePoll({ options: [] });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     expect(container.firstChild).toBeEmptyDOMElement();
   });
 
   it('renders votable poll option selectors', () => {
     const pollData = generatePoll();
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const votableOptions = container.querySelectorAll(VOTABLE_OPTION_SELECTOR);
     expect(votableOptions).toHaveLength(pollData.options.length);
     votableOptions.forEach((o) => {
@@ -126,7 +132,9 @@ describe('PollOptionList', () => {
 
   it('renders voter avatars with each option', () => {
     const pollData = generatePoll();
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const votableOptions = container.querySelectorAll(VOTABLE_OPTION_SELECTOR);
     expect(votableOptions).toHaveLength(pollData.options.length);
     votableOptions.forEach((o, i) => {
@@ -139,7 +147,9 @@ describe('PollOptionList', () => {
 
   it('does not renders voter avatars with options for anonymous poll', () => {
     const pollData = generatePoll({ voting_visibility: 'anonymous' });
-    const { container } = renderComponent({ poll: new Poll({ client: {}, poll: pollData }) });
+    const { container } = renderComponent({
+      poll: new Poll({ client: {}, poll: pollData }),
+    });
     const votableOptions = container.querySelectorAll(VOTABLE_OPTION_SELECTOR);
     expect(votableOptions).toHaveLength(pollData.options.length);
     votableOptions.forEach((o) => {
@@ -233,10 +243,14 @@ describe('PollOptionList', () => {
     await waitFor(() => {
       votableOptions.forEach((votableOption, i) => {
         if (i === 0) {
-          expect(votableOption.querySelector(CHECKMARK_CHECKED_SELECTOR)).toBeInTheDocument();
+          expect(
+            votableOption.querySelector(CHECKMARK_CHECKED_SELECTOR),
+          ).toBeInTheDocument();
           expect(votableOption.querySelector(VOTE_COUNT_SELECTOR)).toHaveTextContent('1');
         } else {
-          expect(votableOption.querySelector(CHECKMARK_CHECKED_SELECTOR)).not.toBeInTheDocument();
+          expect(
+            votableOption.querySelector(CHECKMARK_CHECKED_SELECTOR),
+          ).not.toBeInTheDocument();
           expect(votableOption.querySelector(VOTE_COUNT_SELECTOR)).toHaveTextContent('0');
         }
       });
diff --git a/src/components/Poll/__tests__/SuggestPollOptionForm.test.js b/src/components/Poll/__tests__/SuggestPollOptionForm.test.js
index 51af83fe3..08d7a85ed 100644
--- a/src/components/Poll/__tests__/SuggestPollOptionForm.test.js
+++ b/src/components/Poll/__tests__/SuggestPollOptionForm.test.js
@@ -60,7 +60,9 @@ describe('SuggestPollOptionForm', () => {
     });
 
     await waitFor(() => {
-      expect(createPollOptionSpy).toHaveBeenCalledWith(poll.id, { text: newlyTypedValue });
+      expect(createPollOptionSpy).toHaveBeenCalledWith(poll.id, {
+        text: newlyTypedValue,
+      });
       expect(castVoteSpy).toHaveBeenCalledWith(createdPollOptionId, messageId);
     });
   });
diff --git a/src/components/Poll/hooks/useManagePollVotesRealtime.ts b/src/components/Poll/hooks/useManagePollVotesRealtime.ts
index 8682a1174..a12e56f46 100644
--- a/src/components/Poll/hooks/useManagePollVotesRealtime.ts
+++ b/src/components/Poll/hooks/useManagePollVotesRealtime.ts
@@ -9,7 +9,7 @@ export function useManagePollVotesRealtime<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   T extends
     | PollVote<StreamChatGenerics>
-    | PollAnswer<StreamChatGenerics> = PollVote<StreamChatGenerics>
+    | PollAnswer<StreamChatGenerics> = PollVote<StreamChatGenerics>,
 >(
   managedVoteType: 'answer' | 'vote',
   cursorPaginatorState?: CursorPaginatorStateStore<T>,
@@ -24,7 +24,8 @@ export function useManagePollVotesRealtime<
     () =>
       cursorPaginatorState?.subscribeWithSelector(
         (state) => [state.latestPageItems],
-        ([latestPageItems]) => setVotesInRealtime((prev) => [...prev, ...latestPageItems]),
+        ([latestPageItems]) =>
+          setVotesInRealtime((prev) => [...prev, ...latestPageItems]),
       ),
     [cursorPaginatorState],
   );
@@ -35,22 +36,29 @@ export function useManagePollVotesRealtime<
       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 as T).id) : prev,
+          event.poll_vote
+            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)
+            : prev,
         );
       }
       if (event.type === 'poll.vote_changed') {
         setVotesInRealtime((prev) =>
-          event.poll_vote ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id) : prev,
+          event.poll_vote
+            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)
+            : prev,
         );
       }
       if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {
-        setVotesInRealtime((prev) => (event.poll_vote ? [event.poll_vote as T, ...prev] : prev));
+        setVotesInRealtime((prev) =>
+          event.poll_vote ? [event.poll_vote as T, ...prev] : prev,
+        );
       }
     };
 
diff --git a/src/components/Poll/hooks/usePollAnswerPagination.ts b/src/components/Poll/hooks/usePollAnswerPagination.ts
index 5c7a8b876..69c125e5a 100644
--- a/src/components/Poll/hooks/usePollAnswerPagination.ts
+++ b/src/components/Poll/hooks/usePollAnswerPagination.ts
@@ -12,17 +12,21 @@ import type { PollAnswer, PollAnswersQueryParams, PollVote } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 const paginationStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   state: CursorPaginatorState<PollVote<StreamChatGenerics>>,
-): [Error | undefined, boolean, boolean] => [state.error, state.hasNextPage, state.loading];
+): [Error | undefined, boolean, boolean] => [
+  state.error,
+  state.hasNextPage,
+  state.loading,
+];
 
 type UsePollAnswerPaginationParams = {
   paginationParams?: PollAnswersQueryParams;
 };
 
 export const usePollAnswerPagination = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({ paginationParams }: UsePollAnswerPaginationParams = {}) => {
   const { poll } = usePollContext<StreamChatGenerics>();
 
@@ -30,7 +34,9 @@ export const usePollAnswerPagination = <
     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 };
@@ -39,10 +45,10 @@ export const usePollAnswerPagination = <
   );
 
   const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);
-  const answers = useManagePollVotesRealtime<StreamChatGenerics, PollAnswer<StreamChatGenerics>>(
-    'answer',
-    cursorPaginatorState,
-  );
+  const answers = useManagePollVotesRealtime<
+    StreamChatGenerics,
+    PollAnswer<StreamChatGenerics>
+  >('answer', cursorPaginatorState);
   const [error, hasNextPage, loading] = useStateStore(
     cursorPaginatorState,
     paginationStateSelector,
diff --git a/src/components/Poll/hooks/usePollOptionVotesPagination.ts b/src/components/Poll/hooks/usePollOptionVotesPagination.ts
index bde1627d0..d1bb08ca3 100644
--- a/src/components/Poll/hooks/usePollOptionVotesPagination.ts
+++ b/src/components/Poll/hooks/usePollOptionVotesPagination.ts
@@ -12,17 +12,21 @@ import type { DefaultStreamChatGenerics } from '../../../types';
 import type { PollOptionVotesQueryParams, PollVote } from 'stream-chat';
 
 const paginationStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   state: CursorPaginatorState<PollVote<StreamChatGenerics>>,
-): [Error | undefined, boolean, boolean] => [state.error, state.hasNextPage, state.loading];
+): [Error | undefined, boolean, boolean] => [
+  state.error,
+  state.hasNextPage,
+  state.loading,
+];
 
 type UsePollOptionVotesPaginationParams = {
   paginationParams: PollOptionVotesQueryParams;
 };
 
 export const usePollOptionVotesPagination = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   paginationParams,
 }: UsePollOptionVotesPaginationParams) => {
@@ -32,7 +36,9 @@ export const usePollOptionVotesPagination = <
     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 };
@@ -41,11 +47,10 @@ export const usePollOptionVotesPagination = <
   );
 
   const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);
-  const votes = useManagePollVotesRealtime<StreamChatGenerics, PollVote<StreamChatGenerics>>(
-    'vote',
-    cursorPaginatorState,
-    paginationParams.filter.option_id,
-  );
+  const votes = useManagePollVotesRealtime<
+    StreamChatGenerics,
+    PollVote<StreamChatGenerics>
+  >('vote', cursorPaginatorState, paginationParams.filter.option_id);
   const [error, hasNextPage, loading] = useStateStore(
     cursorPaginatorState,
     paginationStateSelector,
diff --git a/src/components/ReactFileUtilities/FileIcon/FileIcon.tsx b/src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
index 731e63d05..66eccfb9e 100644
--- a/src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
+++ b/src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
@@ -29,7 +29,14 @@ export function mimeTypeToIcon(type: IconType = 'standard', mimeType?: string) {
 }
 
 export const FileIcon = (props: FileIconProps) => {
-  const { big = false, mimeType, size = 50, sizeSmall = 20, type = 'standard', ...rest } = props;
+  const {
+    big = false,
+    mimeType,
+    size = 50,
+    sizeSmall = 20,
+    type = 'standard',
+    ...rest
+  } = props;
 
   const Icon = mimeTypeToIcon(type, mimeType);
 
diff --git a/src/components/ReactFileUtilities/FileIcon/FileIconSet.tsx b/src/components/ReactFileUtilities/FileIcon/FileIconSet.tsx
index 9e9a3c3ff..59658336a 100644
--- a/src/components/ReactFileUtilities/FileIcon/FileIconSet.tsx
+++ b/src/components/ReactFileUtilities/FileIcon/FileIconSet.tsx
@@ -11,7 +11,11 @@ export type IconProps = {
 
 const DEFAULT_SIZE = 40;
 
-export const FilePdfIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FilePdfIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-pdf', className)}
     fill='none'
@@ -43,7 +47,11 @@ export const FilePdfIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: I
   </svg>
 );
 
-export const FileWordIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileWordIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-word', className)}
     fill='none'
@@ -65,7 +73,11 @@ export const FileWordIcon = ({ className = '', size = DEFAULT_SIZE, ...props }:
   </svg>
 );
 
-export const FileWordIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileWordIconAlt = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-word-alt', className)}
     fill='none'
@@ -175,7 +187,11 @@ export const FilePowerPointIconAlt = ({
   </svg>
 );
 
-export const FileExcelIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileExcelIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-excel', className)}
     fill='none'
@@ -206,7 +222,11 @@ export const FileExcelIcon = ({ className = '', size = DEFAULT_SIZE, ...props }:
   </svg>
 );
 
-export const FileExcelIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileExcelIconAlt = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-excel-alt', className)}
     fill='none'
@@ -243,7 +263,11 @@ export const FileExcelIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props
   </svg>
 );
 
-export const FileArchiveIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileArchiveIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-archive', className)}
     fill='none'
@@ -315,7 +339,11 @@ export const FileArchiveIconAlt = ({
   </svg>
 );
 
-export const FileCodeIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileCodeIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-code', className)}
     fill='none'
@@ -340,7 +368,11 @@ export const FileCodeIcon = ({ className = '', size = DEFAULT_SIZE, ...props }:
   </svg>
 );
 
-export const FileCodeIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileCodeIconAlt = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-code-alt', className)}
     fill='none'
@@ -377,7 +409,11 @@ export const FileCodeIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props
   </svg>
 );
 
-export const FileAudioIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileAudioIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-audio', className)}
     fill='none'
@@ -408,7 +444,11 @@ export const FileAudioIcon = ({ className = '', size = DEFAULT_SIZE, ...props }:
   </svg>
 );
 
-export const FileAudioIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileAudioIconAlt = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-audio-alt', className)}
     fill='none'
@@ -445,7 +485,11 @@ export const FileAudioIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props
   </svg>
 );
 
-export const FileVideoIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileVideoIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-video', className)}
     fill='none'
@@ -474,7 +518,11 @@ export const FileVideoIcon = ({ className = '', size = DEFAULT_SIZE, ...props }:
   </svg>
 );
 
-export const FileVideoIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileVideoIconAlt = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-video-alt', className)}
     fill='none'
@@ -509,7 +557,11 @@ export const FileVideoIconAlt = ({ className = '', size = DEFAULT_SIZE, ...props
   </svg>
 );
 
-export const FileFallbackIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileFallbackIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-fallback ', className)}
     fill='none'
@@ -544,7 +596,11 @@ export const FileFallbackIcon = ({ className = '', size = DEFAULT_SIZE, ...props
 );
 
 // v1 icon without possibility to specify size via props
-export const FileImageIcon = ({ className = '', size = DEFAULT_SIZE, ...props }: IconProps) => (
+export const FileImageIcon = ({
+  className = '',
+  size = DEFAULT_SIZE,
+  ...props
+}: IconProps) => (
   <svg
     className={clsx('rfu-file-image', className)}
     height={size}
diff --git a/src/components/ReactFileUtilities/FileIcon/iconMap.ts b/src/components/ReactFileUtilities/FileIcon/iconMap.ts
index 8348b8a2e..08f817eb0 100644
--- a/src/components/ReactFileUtilities/FileIcon/iconMap.ts
+++ b/src/components/ReactFileUtilities/FileIcon/iconMap.ts
@@ -94,7 +94,10 @@ function generateGeneralTypeToIconMap<Props>({
 export type IconType = 'standard' | 'alt';
 
 type IconMap = {
-  standard: Record<SupportedMimeType | GeneralType | 'fallback', ComponentType<IconProps>>;
+  standard: Record<
+    SupportedMimeType | GeneralType | 'fallback',
+    ComponentType<IconProps>
+  >;
   alt?: Record<SupportedMimeType | GeneralType | 'fallback', ComponentType<IconProps>>;
 };
 
diff --git a/src/components/ReactFileUtilities/FileIcon/mimeTypes.ts b/src/components/ReactFileUtilities/FileIcon/mimeTypes.ts
index 765636fb3..2a9623ee5 100644
--- a/src/components/ReactFileUtilities/FileIcon/mimeTypes.ts
+++ b/src/components/ReactFileUtilities/FileIcon/mimeTypes.ts
@@ -1,11 +1,11 @@
 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];
+  | (typeof wordMimeTypes)[number]
+  | (typeof excelMimeTypes)[number]
+  | (typeof powerpointMimeTypes)[number]
+  | (typeof archiveFileTypes)[number]
+  | (typeof codeFileTypes)[number];
 
 export const wordMimeTypes = [
   // Microsoft Word
diff --git a/src/components/ReactFileUtilities/ImageDropzone.tsx b/src/components/ReactFileUtilities/ImageDropzone.tsx
index dd3c1696f..097dd122f 100644
--- a/src/components/ReactFileUtilities/ImageDropzone.tsx
+++ b/src/components/ReactFileUtilities/ImageDropzone.tsx
@@ -43,9 +43,10 @@ export const ImageDropzone = ({
 
   const accept = useMemo(
     () =>
-      (typeof acceptedFiles === 'string' ? acceptedFiles.split(',') : acceptedFiles).reduce<
-        Record<string, Array<string>>
-      >((mediaTypeMap, mediaType) => {
+      (typeof acceptedFiles === 'string'
+        ? acceptedFiles.split(',')
+        : acceptedFiles
+      ).reduce<Record<string, Array<string>>>((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ??= [];
         return mediaTypeMap;
       }, {}),
@@ -74,7 +75,12 @@ export const ImageDropzone = ({
     >
       <div className='rfu-dropzone__notifier'>
         <div className='rfu-dropzone__inner'>
-          <svg height='41' viewBox='0 0 41 41' width='41' xmlns='http://www.w3.org/2000/svg'>
+          <svg
+            height='41'
+            viewBox='0 0 41 41'
+            width='41'
+            xmlns='http://www.w3.org/2000/svg'
+          >
             <path
               d='M40.517 28.002V3.997c0-2.197-1.808-3.992-4.005-3.992H12.507a4.004 4.004 0 0 0-3.992 3.993v24.004a4.004 4.004 0 0 0 3.992 3.993h24.005c2.197 0 4.005-1.795 4.005-3.993zm-22.002-7.997l4.062 5.42 5.937-7.423 7.998 10H12.507l6.008-7.997zM.517 8.003V36c0 2.198 1.795 4.005 3.993 4.005h27.997V36H4.51V8.002H.517z'
               fill='#000'
diff --git a/src/components/ReactFileUtilities/UploadButton.tsx b/src/components/ReactFileUtilities/UploadButton.tsx
index 31821699b..a06e06f90 100644
--- a/src/components/ReactFileUtilities/UploadButton.tsx
+++ b/src/components/ReactFileUtilities/UploadButton.tsx
@@ -37,7 +37,7 @@ export type FileInputProps = UploadButtonProps;
 export const FileInput = UploadButton;
 
 export const UploadFileInput = forwardRef(function UploadFileInput<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   {
     className,
@@ -47,14 +47,10 @@ export const UploadFileInput = forwardRef(function UploadFileInput<
   ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const { t } = useTranslationContext('UploadFileInput');
-  const { acceptedFiles = [], multipleUploads } = useChannelStateContext<StreamChatGenerics>(
-    'UploadFileInput',
-  );
-  const {
-    isUploadEnabled,
-    maxFilesLeft,
-    uploadNewFiles,
-  } = useMessageInputContext<StreamChatGenerics>('UploadFileInput');
+  const { acceptedFiles = [], multipleUploads } =
+    useChannelStateContext<StreamChatGenerics>('UploadFileInput');
+  const { isUploadEnabled, maxFilesLeft, uploadNewFiles } =
+    useMessageInputContext<StreamChatGenerics>('UploadFileInput');
   const id = useMemo(() => nanoid(), []);
 
   const onFileChange = useCallback(
diff --git a/src/components/ReactFileUtilities/utils.ts b/src/components/ReactFileUtilities/utils.ts
index 13d2b6a80..7dce63a3b 100644
--- a/src/components/ReactFileUtilities/utils.ts
+++ b/src/components/ReactFileUtilities/utils.ts
@@ -34,7 +34,9 @@ export function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean
   return false;
 }
 
-export async function dataTransferItemsToFiles(items?: DataTransferItem[]): Promise<FileLike[]> {
+export async function dataTransferItemsToFiles(
+  items?: DataTransferItem[],
+): Promise<FileLike[]> {
   if (!items || !items.length) {
     return [];
   }
@@ -94,7 +96,9 @@ async function getImageSource(fileLikes: FileLike[], src: string) {
 }
 
 const extractImageSources = (s: string) => {
-  const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
+  const imageTags = new DOMParser()
+    .parseFromString(s, 'text/html')
+    .getElementsByTagName('img');
   return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
 };
 
@@ -119,7 +123,9 @@ export const getExtensionFromMimeType = (mimeType: string) => {
   return match && match[1];
 };
 
-export const getRecordedMediaTypeFromMimeType = (mimeType: string): RecordedMediaType | null => {
+export const getRecordedMediaTypeFromMimeType = (
+  mimeType: string,
+): RecordedMediaType | null => {
   const match = mimeType.match(/^(audio|video)\/.*$/);
   return match && (match[1] as RecordedMediaType);
 };
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index ceeea4c4b..b923cd371 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -15,14 +15,17 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 
 export type ReactionSelectorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
   Avatar?: React.ElementType<AvatarProps>;
   /** If true, shows the user's avatar with the reaction */
   detailedView?: boolean;
   /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
-  handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
+  handleReaction?: (
+    reactionType: string,
+    event: React.BaseSyntheticEvent,
+  ) => Promise<void>;
   /** An array of the reaction objects to display in the list */
   latest_reactions?: ReactionResponse<StreamChatGenerics>[];
   /** An array of the own reaction objects to distinguish own reactions visually */
@@ -44,7 +47,7 @@ export type ReactionSelectorProps<
 };
 
 const UnMemoizedReactionSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ReactionSelectorProps<StreamChatGenerics>,
 ) => {
@@ -106,7 +109,9 @@ const UnMemoizedReactionSelector = <
     const tooltip = tooltipRef.current?.getBoundingClientRect();
     const target = targetRef.current?.getBoundingClientRect();
 
-    const container = isMutableRef(rootRef) ? rootRef.current?.getBoundingClientRect() : null;
+    const container = isMutableRef(rootRef)
+      ? rootRef.current?.getBoundingClientRect()
+      : null;
 
     if (!tooltip || !target || !container) return;
 
@@ -179,9 +184,8 @@ const UnMemoizedReactionSelector = <
                 className={clsx(
                   'str-chat__message-reactions-list-item str-chat__message-reactions-option',
                   {
-                    'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(
-                      reactionType,
-                    ),
+                    'str-chat__message-reactions-option-selected':
+                      iHaveReactedWithReaction(reactionType),
                   },
                 )}
                 data-testid='select-reaction-button'
diff --git a/src/components/Reactions/ReactionSelectorWithButton.tsx b/src/components/Reactions/ReactionSelectorWithButton.tsx
index 07ad6b4a6..b0622a9de 100644
--- a/src/components/Reactions/ReactionSelectorWithButton.tsx
+++ b/src/components/Reactions/ReactionSelectorWithButton.tsx
@@ -1,7 +1,11 @@
 import React, { ElementRef, useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types';
 import type { IconProps } from '../../types/types';
 
@@ -15,13 +19,15 @@ type ReactionSelectorWithButtonProps = {
  * cluttering the parent component.
  */
 export const ReactionSelectorWithButton = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   ReactionIcon,
 }: ReactionSelectorWithButtonProps) => {
   const { t } = useTranslationContext('ReactionSelectorWithButton');
-  const { isMyMessage, message } = useMessageContext<StreamChatGenerics>('MessageOptions');
-  const { ReactionSelector = DefaultReactionSelector } = useComponentContext('MessageOptions');
+  const { isMyMessage, message } =
+    useMessageContext<StreamChatGenerics>('MessageOptions');
+  const { ReactionSelector = DefaultReactionSelector } =
+    useComponentContext('MessageOptions');
   const buttonRef = useRef<ElementRef<'button'>>(null);
   const dialogId = `reaction-selector--${message.id}`;
   const dialog = useDialog({ id: dialogId });
diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx
index e60c53775..14e2445fc 100644
--- a/src/components/Reactions/ReactionsList.tsx
+++ b/src/components/Reactions/ReactionsList.tsx
@@ -6,15 +6,22 @@ import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
-import type { ReactionDetailsComparator, ReactionsComparator, ReactionType } from './types';
+import type {
+  ReactionDetailsComparator,
+  ReactionsComparator,
+  ReactionType,
+} from './types';
 import { ReactionsListModal } from './ReactionsListModal';
 import { MessageContextValue, useTranslationContext } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 
 export type ReactionsListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<
-  Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'handleFetchReactions' | 'reactionDetailsSort'
+  >
 > & {
   /** An array of the own reaction objects to distinguish own reactions visually */
   own_reactions?: ReactionResponse<StreamChatGenerics>[];
@@ -43,7 +50,7 @@ export type ReactionsListProps<
 };
 
 const UnMemoizedReactionsList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ReactionsListProps<StreamChatGenerics>,
 ) => {
@@ -55,11 +62,10 @@ const UnMemoizedReactionsList = <
     sortReactionDetails,
     ...rest
   } = props;
-  const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-  const [
-    selectedReactionType,
-    setSelectedReactionType,
-  ] = useState<ReactionType<StreamChatGenerics> | null>(null);
+  const { existingReactions, hasReactions, totalReactionCount } =
+    useProcessReactions(rest);
+  const [selectedReactionType, setSelectedReactionType] =
+    useState<ReactionType<StreamChatGenerics> | null>(null);
   const { t } = useTranslationContext('ReactionsList');
 
   const handleReactionButtonClick = (reactionType: string) => {
@@ -136,4 +142,6 @@ const UnMemoizedReactionsList = <
 /**
  * Component that displays a list of reactions on a message.
  */
-export const ReactionsList = React.memo(UnMemoizedReactionsList) as typeof UnMemoizedReactionsList;
+export const ReactionsList = React.memo(
+  UnMemoizedReactionsList,
+) as typeof UnMemoizedReactionsList;
diff --git a/src/components/Reactions/ReactionsListModal.tsx b/src/components/Reactions/ReactionsListModal.tsx
index bdeb91c7e..dfaf91c69 100644
--- a/src/components/Reactions/ReactionsListModal.tsx
+++ b/src/components/Reactions/ReactionsListModal.tsx
@@ -12,14 +12,19 @@ import { DefaultStreamChatGenerics } from '../../types/types';
 import { ReactionSort } from 'stream-chat';
 
 type ReactionsListModalProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ModalProps &
   Partial<
-    Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>
+    Pick<
+      MessageContextValue<StreamChatGenerics>,
+      'handleFetchReactions' | 'reactionDetailsSort'
+    >
   > & {
     reactions: ReactionSummary[];
     selectedReactionType: ReactionType<StreamChatGenerics>;
-    onSelectedReactionTypeChange?: (reactionType: ReactionType<StreamChatGenerics>) => void;
+    onSelectedReactionTypeChange?: (
+      reactionType: ReactionType<StreamChatGenerics>,
+    ) => void;
     sort?: ReactionSort<StreamChatGenerics>;
     /** @deprecated use `sort` instead */
     sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
@@ -28,7 +33,7 @@ type ReactionsListModalProps<
 const defaultReactionDetailsSort = { created_at: -1 } as const;
 
 export function ReactionsListModal<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -49,15 +54,13 @@ export function ReactionsListModal<
   const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
   const reactionDetailsSort =
     propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
-  const {
-    isLoading: areReactionsLoading,
-    reactions: reactionDetails,
-  } = useFetchReactions<StreamChatGenerics>({
-    handleFetchReactions,
-    reactionType: selectedReactionType,
-    shouldFetch: modalProps.open,
-    sort: reactionDetailsSort,
-  });
+  const { isLoading: areReactionsLoading, reactions: reactionDetails } =
+    useFetchReactions<StreamChatGenerics>({
+      handleFetchReactions,
+      reactionType: selectedReactionType,
+      shouldFetch: modalProps.open,
+      sort: reactionDetailsSort,
+    });
 
   const reactionDetailsWithLegacyFallback = useMemo(
     () =>
@@ -72,7 +75,10 @@ export function ReactionsListModal<
       {...modalProps}
       className={clsx('str-chat__message-reactions-details-modal', modalProps.className)}
     >
-      <div className='str-chat__message-reactions-details' data-testid='reactions-list-modal'>
+      <div
+        className='str-chat__message-reactions-details'
+        data-testid='reactions-list-modal'
+      >
         <div className='str-chat__message-reactions-details-reaction-types'>
           {reactions.map(
             ({ EmojiComponent, reactionCount, reactionType }) =>
@@ -85,14 +91,18 @@ export function ReactionsListModal<
                   data-testid={`reaction-details-selector-${reactionType}`}
                   key={reactionType}
                   onClick={() =>
-                    onSelectedReactionTypeChange?.(reactionType as ReactionType<StreamChatGenerics>)
+                    onSelectedReactionTypeChange?.(
+                      reactionType as ReactionType<StreamChatGenerics>,
+                    )
                   }
                 >
                   <span className='str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback'>
                     <EmojiComponent />
                   </span>
                   &nbsp;
-                  <span className='str-chat__message-reaction-count'>{reactionCount}</span>
+                  <span className='str-chat__message-reaction-count'>
+                    {reactionCount}
+                  </span>
                 </div>
               ),
           )}
@@ -110,14 +120,20 @@ export function ReactionsListModal<
             <LoadingIndicator />
           ) : (
             reactionDetailsWithLegacyFallback.map(({ user }) => (
-              <div className='str-chat__message-reactions-details-reacting-user' key={user?.id}>
+              <div
+                className='str-chat__message-reactions-details-reacting-user'
+                key={user?.id}
+              >
                 <Avatar
                   className='stream-chat__avatar--reaction'
                   data-testid='avatar'
                   image={user?.image as string | undefined}
                   name={user?.name || user?.id}
                 />
-                <span className='str-chat__user-item--name' data-testid='reaction-user-username'>
+                <span
+                  className='str-chat__user-item--name'
+                  data-testid='reaction-user-username'
+                >
                   {user?.name || user?.id}
                 </span>
               </div>
diff --git a/src/components/Reactions/SimpleReactionsList.tsx b/src/components/Reactions/SimpleReactionsList.tsx
index c64e1fb34..99b6aec18 100644
--- a/src/components/Reactions/SimpleReactionsList.tsx
+++ b/src/components/Reactions/SimpleReactionsList.tsx
@@ -33,7 +33,11 @@ const WithTooltip = ({
       <PopperTooltip referenceElement={referenceElement} visible={tooltipVisible}>
         {title}
       </PopperTooltip>
-      <span onMouseEnter={handleEnter} onMouseLeave={handleLeave} ref={setReferenceElement}>
+      <span
+        onMouseEnter={handleEnter}
+        onMouseLeave={handleLeave}
+        ref={setReferenceElement}
+      >
         {children}
       </span>
     </>
@@ -41,7 +45,7 @@ const WithTooltip = ({
 };
 
 export type SimpleReactionsListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
   /** An array of the own reaction objects to distinguish own reactions visually */
   own_reactions?: ReactionResponse<StreamChatGenerics>[];
@@ -59,17 +63,17 @@ export type SimpleReactionsListProps<
 };
 
 const UnMemoizedSimpleReactionsList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: SimpleReactionsListProps<StreamChatGenerics>,
 ) => {
   const { handleReaction: propHandleReaction, ...rest } = props;
 
-  const { handleReaction: contextHandleReaction } = useMessageContext<StreamChatGenerics>(
-    'SimpleReactionsList',
-  );
+  const { handleReaction: contextHandleReaction } =
+    useMessageContext<StreamChatGenerics>('SimpleReactionsList');
 
-  const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
+  const { existingReactions, hasReactions, totalReactionCount } =
+    useProcessReactions(rest);
 
   const handleReaction = propHandleReaction || contextHandleReaction;
 
diff --git a/src/components/Reactions/SpriteImage.tsx b/src/components/Reactions/SpriteImage.tsx
index a8a959451..1874fdf9f 100644
--- a/src/components/Reactions/SpriteImage.tsx
+++ b/src/components/Reactions/SpriteImage.tsx
@@ -47,8 +47,12 @@ export const SpriteImage = ({
             'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',
           '--str-chat__sprite-item-height': `${spriteHeight / rows}`,
           '--str-chat__sprite-item-width': `${spriteWidth / columns}`,
-          ...(Number.isFinite(height) ? { '--str-chat__sprite-image-height': `${height}px` } : {}),
-          ...(Number.isFinite(width) ? { '--str-chat__sprite-image-width': `${width}px` } : {}),
+          ...(Number.isFinite(height)
+            ? { '--str-chat__sprite-image-height': `${height}px` }
+            : {}),
+          ...(Number.isFinite(width)
+            ? { '--str-chat__sprite-image-width': `${width}px` }
+            : {}),
           backgroundImage: `url('${spriteUrl}')`,
           backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
           backgroundSize: `${columns * 100}% ${rows * 100}%`,
diff --git a/src/components/Reactions/__tests__/ReactionSelector.test.js b/src/components/Reactions/__tests__/ReactionSelector.test.js
index 5b63fcb20..a2e5cbfaf 100644
--- a/src/components/Reactions/__tests__/ReactionSelector.test.js
+++ b/src/components/Reactions/__tests__/ReactionSelector.test.js
@@ -37,7 +37,9 @@ const handleReactionMock = jest.fn();
 const renderComponent = (props) =>
   render(
     <DialogManagerProvider>
-      <ComponentProvider value={{ Avatar: AvatarMock, reactionOptions: defaultReactionOptions }}>
+      <ComponentProvider
+        value={{ Avatar: AvatarMock, reactionOptions: defaultReactionOptions }}
+      >
         <MessageProvider value={{ message: generateMessage() }}>
           <ReactionSelector handleReaction={handleReactionMock} {...props} />
         </MessageProvider>
diff --git a/src/components/Reactions/__tests__/ReactionsList.test.js b/src/components/Reactions/__tests__/ReactionsList.test.js
index dfd7af012..cade672e4 100644
--- a/src/components/Reactions/__tests__/ReactionsList.test.js
+++ b/src/components/Reactions/__tests__/ReactionsList.test.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
@@ -27,7 +26,12 @@ const renderComponent = ({ reaction_groups = {}, ...props }) => {
   return render(
     <ComponentProvider value={{ reactionOptions: defaultReactionOptions }}>
       <MessageProvider value={{}}>
-        <ReactionsList reaction_groups={reaction_groups} reactions={reactions} {...props} />,
+        <ReactionsList
+          reaction_groups={reaction_groups}
+          reactions={reactions}
+          {...props}
+        />
+        ,
       </MessageProvider>
     </ComponentProvider>,
   );
@@ -123,15 +127,19 @@ describe('ReactionsList', () => {
     ];
 
     expect(
-      renderComponent({ reaction_groups, reactionOptions, reverse: true }).container.querySelector(
-        '.str-chat__reaction-list--reverse',
-      ),
+      renderComponent({
+        reaction_groups,
+        reactionOptions,
+        reverse: true,
+      }).container.querySelector('.str-chat__reaction-list--reverse'),
     ).toBeInTheDocument();
 
     expect(
-      renderComponent({ reaction_groups, reactionOptions, reverse: false }).container.querySelector(
-        '.str-chat__reaction-list--reverse',
-      ),
+      renderComponent({
+        reaction_groups,
+        reactionOptions,
+        reverse: false,
+      }).container.querySelector('.str-chat__reaction-list--reverse'),
     ).not.toBeInTheDocument();
   });
 
@@ -139,8 +147,14 @@ describe('ReactionsList', () => {
     const { getByTestId } = renderComponent({
       reaction_groups: {
         haha: { count: 2, first_reaction_at: new Date().toISOString() },
-        like: { count: 8, first_reaction_at: new Date(Date.now() + 60_000).toISOString() },
-        love: { count: 5, first_reaction_at: new Date(Date.now() + 120_000).toISOString() },
+        like: {
+          count: 8,
+          first_reaction_at: new Date(Date.now() + 60_000).toISOString(),
+        },
+        love: {
+          count: 5,
+          first_reaction_at: new Date(Date.now() + 120_000).toISOString(),
+        },
       },
     });
 
diff --git a/src/components/Reactions/hooks/useFetchReactions.ts b/src/components/Reactions/hooks/useFetchReactions.ts
index 0070ce91c..7e28f8567 100644
--- a/src/components/Reactions/hooks/useFetchReactions.ts
+++ b/src/components/Reactions/hooks/useFetchReactions.ts
@@ -5,7 +5,7 @@ import { DefaultStreamChatGenerics } from '../../../types/types';
 import { ReactionType } from '../types';
 
 export interface FetchReactionsOptions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > {
   reactionType: ReactionType<StreamChatGenerics>;
   shouldFetch: boolean;
@@ -14,11 +14,10 @@ export interface FetchReactionsOptions<
 }
 
 export function useFetchReactions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(options: FetchReactionsOptions<StreamChatGenerics>) {
-  const {
-    handleFetchReactions: contextHandleFetchReactions,
-  } = useMessageContext<StreamChatGenerics>('useFetchReactions');
+  const { handleFetchReactions: contextHandleFetchReactions } =
+    useMessageContext<StreamChatGenerics>('useFetchReactions');
   const [reactions, setReactions] = useState<ReactionResponse<StreamChatGenerics>[]>([]);
   const {
     handleFetchReactions: propHandleFetchReactions,
diff --git a/src/components/Reactions/hooks/useProcessReactions.tsx b/src/components/Reactions/hooks/useProcessReactions.tsx
index cded26fb5..7721dc0bd 100644
--- a/src/components/Reactions/hooks/useProcessReactions.tsx
+++ b/src/components/Reactions/hooks/useProcessReactions.tsx
@@ -27,7 +27,7 @@ export const defaultReactionsSort: ReactionsComparator = (a, b) => {
 };
 
 export const useProcessReactions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: UseProcessReactionsParams,
 ) => {
@@ -38,12 +38,10 @@ export const useProcessReactions = <
     reactions: propReactions,
     sortReactions: propSortReactions,
   } = params;
-  const { message, sortReactions: contextSortReactions } = useMessageContext<StreamChatGenerics>(
-    'useProcessReactions',
-  );
-  const {
-    reactionOptions: contextReactionOptions = defaultReactionOptions,
-  } = useComponentContext<StreamChatGenerics>('useProcessReactions');
+  const { message, sortReactions: contextSortReactions } =
+    useMessageContext<StreamChatGenerics>('useProcessReactions');
+  const { reactionOptions: contextReactionOptions = defaultReactionOptions } =
+    useComponentContext<StreamChatGenerics>('useProcessReactions');
 
   const reactionOptions = propReactionOptions ?? contextReactionOptions;
   const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
@@ -122,7 +120,8 @@ export const useProcessReactions = <
   const hasReactions = existingReactions.length > 0;
 
   const totalReactionCount = useMemo(
-    () => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
+    () =>
+      existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
     [existingReactions],
   );
 
diff --git a/src/components/Reactions/reactionOptions.tsx b/src/components/Reactions/reactionOptions.tsx
index a0dc77735..9ea01dedd 100644
--- a/src/components/Reactions/reactionOptions.tsx
+++ b/src/components/Reactions/reactionOptions.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable sort-keys */
-/* eslint-disable react/display-name */
+
 import React from 'react';
 
 import { StreamEmoji } from './StreamEmoji';
@@ -11,9 +11,25 @@ export type ReactionOptions = Array<{
 }>;
 
 export const defaultReactionOptions: ReactionOptions = [
-  { type: 'haha', Component: () => <StreamEmoji fallback='😂' type='haha' />, name: 'Joy' },
-  { type: 'like', Component: () => <StreamEmoji fallback='👍' type='like' />, name: 'Thumbs up' },
-  { type: 'love', Component: () => <StreamEmoji fallback='❤️' type='love' />, name: 'Heart' },
+  {
+    type: 'haha',
+    Component: () => <StreamEmoji fallback='😂' type='haha' />,
+    name: 'Joy',
+  },
+  {
+    type: 'like',
+    Component: () => <StreamEmoji fallback='👍' type='like' />,
+    name: 'Thumbs up',
+  },
+  {
+    type: 'love',
+    Component: () => <StreamEmoji fallback='❤️' type='love' />,
+    name: 'Heart',
+  },
   { type: 'sad', Component: () => <StreamEmoji fallback='😔' type='sad' />, name: 'Sad' },
-  { type: 'wow', Component: () => <StreamEmoji fallback='😲' type='wow' />, name: 'Astonished' },
+  {
+    type: 'wow',
+    Component: () => <StreamEmoji fallback='😲' type='wow' />,
+    name: 'Astonished',
+  },
 ];
diff --git a/src/components/Reactions/types.ts b/src/components/Reactions/types.ts
index 030bcc259..ab642fe4c 100644
--- a/src/components/Reactions/types.ts
+++ b/src/components/Reactions/types.ts
@@ -16,9 +16,12 @@ export interface ReactionSummary {
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
 
 export type ReactionDetailsComparator<
-  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics
-> = (a: ReactionResponse<StreamChatGenerics>, b: ReactionResponse<StreamChatGenerics>) => number;
+  StreamChatGenerics extends ExtendableGenerics = DefaultGenerics,
+> = (
+  a: ReactionResponse<StreamChatGenerics>,
+  b: ReactionResponse<StreamChatGenerics>,
+) => number;
 
 export type ReactionType<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ReactionResponse<StreamChatGenerics>['type'];
diff --git a/src/components/Reactions/utils/utils.ts b/src/components/Reactions/utils/utils.ts
index 5f793ea7a..5da26fd70 100644
--- a/src/components/Reactions/utils/utils.ts
+++ b/src/components/Reactions/utils/utils.ts
@@ -1,6 +1,8 @@
 import { ForwardedRef, MutableRefObject } from 'react';
 
-export const isMutableRef = <T>(ref: ForwardedRef<T> | null): ref is MutableRefObject<T> => {
+export const isMutableRef = <T>(
+  ref: ForwardedRef<T> | null,
+): ref is MutableRefObject<T> => {
   if (ref) {
     return (ref as MutableRefObject<T>).current !== undefined;
   }
diff --git a/src/components/SafeAnchor/__tests__/SafeAnchor.test.js b/src/components/SafeAnchor/__tests__/SafeAnchor.test.js
index cce9c4a96..a17d12b74 100644
--- a/src/components/SafeAnchor/__tests__/SafeAnchor.test.js
+++ b/src/components/SafeAnchor/__tests__/SafeAnchor.test.js
@@ -16,7 +16,9 @@ describe('SafeAnchor', () => {
       .mockImplementation(() => mockSanitizedUrl);
     const href = 'something';
     const anchorText = 'something else';
-    const { container, getByText } = render(<SafeAnchor href={href}>{anchorText}</SafeAnchor>);
+    const { container, getByText } = render(
+      <SafeAnchor href={href}>{anchorText}</SafeAnchor>,
+    );
 
     expect(sanitizeUrlSpy).toHaveBeenCalledWith(href);
     expect(getByText(anchorText).href).toBe(mockSanitizedUrl);
diff --git a/src/components/Thread/Thread.tsx b/src/components/Thread/Thread.tsx
index 3f1bcb100..0a1e87ba4 100644
--- a/src/components/Thread/Thread.tsx
+++ b/src/components/Thread/Thread.tsx
@@ -29,7 +29,7 @@ import type { ThreadState } from 'stream-chat';
 
 export type ThreadProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = {
   /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
   additionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;
@@ -58,11 +58,12 @@ export type ThreadProps<
  */
 export const Thread = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: ThreadProps<StreamChatGenerics, V>,
 ) => {
-  const { channel, channelConfig, thread } = useChannelStateContext<StreamChatGenerics>('Thread');
+  const { channel, channelConfig, thread } =
+    useChannelStateContext<StreamChatGenerics>('Thread');
   const threadInstance = useThreadContext();
 
   if ((!thread && !threadInstance) || channelConfig?.replies === false) return null;
@@ -70,7 +71,10 @@ export const Thread = <
   // the wrapper ensures a key variable is set and the component recreates on thread switch
   return (
     // FIXME: TS is having trouble here as at least one of the two would always be defined
-    <ThreadInner {...props} key={`thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`} />
+    <ThreadInner
+      {...props}
+      key={`thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`}
+    />
   );
 };
 
@@ -83,7 +87,7 @@ const selector = (nextValue: ThreadState) => ({
 
 const ThreadInner = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   props: ThreadProps<StreamChatGenerics, V> & { key: string },
 ) => {
@@ -111,13 +115,14 @@ const ThreadInner = <
     threadMessages = [],
     threadSuppressAutoscroll,
   } = useChannelStateContext<StreamChatGenerics>('Thread');
-  const { closeThread, loadMoreThread } = useChannelActionContext<StreamChatGenerics>('Thread');
+  const { closeThread, loadMoreThread } =
+    useChannelActionContext<StreamChatGenerics>('Thread');
   const { customClasses } = useChatContext<StreamChatGenerics>('Thread');
   const {
-    ThreadInput: ContextInput,
     Message: ContextMessage,
     ThreadHead = DefaultThreadHead,
     ThreadHeader = DefaultThreadHeader,
+    ThreadInput: ContextInput,
     VirtualMessage,
   } = useComponentContext<StreamChatGenerics>('Thread');
 
@@ -135,7 +140,6 @@ const ThreadInner = <
       // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
       loadMoreThread();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [thread, loadMoreThread]);
 
   const threadProps: Pick<
@@ -192,7 +196,9 @@ const ThreadInner = <
         suppressAutoscroll={threadSuppressAutoscroll}
         threadList
         {...threadProps}
-        {...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)}
+        {...(virtualized
+          ? additionalVirtualizedMessageListProps
+          : additionalMessageListProps)}
       />
       <MessageInput
         focus={autoFocus}
diff --git a/src/components/Thread/ThreadHead.tsx b/src/components/Thread/ThreadHead.tsx
index edb14884a..2ed96f30a 100644
--- a/src/components/Thread/ThreadHead.tsx
+++ b/src/components/Thread/ThreadHead.tsx
@@ -8,13 +8,12 @@ import { useComponentContext } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export const ThreadHead = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageProps<StreamChatGenerics>,
 ) => {
-  const { ThreadStart = DefaultThreadStart } = useComponentContext<StreamChatGenerics>(
-    'ThreadHead',
-  );
+  const { ThreadStart = DefaultThreadStart } =
+    useComponentContext<StreamChatGenerics>('ThreadHead');
   return (
     <div className='str-chat__parent-message-li'>
       <Message initialMessage threadList {...props} />
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index 3afa67487..270330561 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -12,7 +12,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ThreadHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Callback for closing the thread */
   closeThread: (event?: React.BaseSyntheticEvent) => void;
@@ -21,7 +21,7 @@ export type ThreadHeaderProps<
 };
 
 export const ThreadHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: ThreadHeaderProps<StreamChatGenerics> &
     Pick<ChannelPreviewInfoParams<StreamChatGenerics>, 'overrideImage' | 'overrideTitle'>,
diff --git a/src/components/Thread/__tests__/Thread.test.js b/src/components/Thread/__tests__/Thread.test.js
index 2d1210838..77811e5d7 100644
--- a/src/components/Thread/__tests__/Thread.test.js
+++ b/src/components/Thread/__tests__/Thread.test.js
@@ -70,16 +70,20 @@ const i18nMock = jest.fn((key, props) => {
 });
 
 const renderComponent = ({
-  chatClient,
-  threadProps = {},
-  channelStateOverrides = {},
   channelActionOverrides = {},
+  channelStateOverrides = {},
+  chatClient,
   componentOverrides = {},
+  threadProps = {},
 }) =>
   render(
     <ChatProvider value={{ client: chatClient, latestMessageDatesByChannels: {} }}>
-      <ChannelStateProvider value={{ ...channelStateContextMock, ...channelStateOverrides }}>
-        <ChannelActionProvider value={{ ...channelActionContextMock, ...channelActionOverrides }}>
+      <ChannelStateProvider
+        value={{ ...channelStateContextMock, ...channelStateOverrides }}
+      >
+        <ChannelActionProvider
+          value={{ ...channelActionContextMock, ...channelActionOverrides }}
+        >
           <ComponentProvider value={{ ...componentOverrides }}>
             <TranslationProvider value={{ t: i18nMock }}>
               <Thread {...threadProps} />
@@ -122,7 +126,9 @@ describe('Thread', () => {
       expect.objectContaining({
         disableDateSeparator: true,
         hasMore: channelStateContextMock.threadHasMore,
-        head: expect.objectContaining({ type: expect.objectContaining({ name: 'ThreadHead' }) }),
+        head: expect.objectContaining({
+          type: expect.objectContaining({ name: 'ThreadHead' }),
+        }),
         loadingMore: channelActionContextMock.threadLoadingMore,
         loadMore: channelStateContextMock.loadMoreThread,
         Message: MessageMock,
@@ -154,7 +160,9 @@ describe('Thread', () => {
       expect.objectContaining({
         disableDateSeparator: false,
         hasMore: channelStateContextMock.threadHasMore,
-        head: expect.objectContaining({ type: expect.objectContaining({ name: 'ThreadHead' }) }),
+        head: expect.objectContaining({
+          type: expect.objectContaining({ name: 'ThreadHead' }),
+        }),
         loadingMore: channelActionContextMock.threadLoadingMore,
         loadMore: channelStateContextMock.loadMoreThread,
         Message: MessageMock,
@@ -192,7 +200,10 @@ describe('Thread', () => {
     const CustomMessageInputMock = jest.fn();
     const CustomMessageInputMockAdditional = jest.fn();
     const props = {
-      additionalMessageInputProps: { Input: CustomMessageInputMockAdditional, propName: 'value' },
+      additionalMessageInputProps: {
+        Input: CustomMessageInputMockAdditional,
+        propName: 'value',
+      },
       autoFocus: true,
       Input: CustomMessageInputMock,
     };
@@ -217,7 +228,10 @@ describe('Thread', () => {
   it('should render a custom MessageInput from additional props', () => {
     const CustomMessageInputMockAdditional = jest.fn();
     const props = {
-      additionalMessageInputProps: { Input: CustomMessageInputMockAdditional, propName: 'value' },
+      additionalMessageInputProps: {
+        Input: CustomMessageInputMockAdditional,
+        propName: 'value',
+      },
       autoFocus: true,
     };
 
@@ -296,7 +310,9 @@ describe('Thread', () => {
       chatClient,
       threadProps: { virtualized: false },
     });
-    expect(container.querySelector('.str-chat__thread--virtualized')).not.toBeInTheDocument();
+    expect(
+      container.querySelector('.str-chat__thread--virtualized'),
+    ).not.toBeInTheDocument();
   });
 
   it('should not render anything if the thread in context is falsy', () => {
@@ -323,7 +339,9 @@ describe('Thread', () => {
     await channel.watch();
 
     const { container } = render(
-      <ChannelStateProvider value={{ ...channelStateContextMock, channel, channelConfig }}>
+      <ChannelStateProvider
+        value={{ ...channelStateContextMock, channel, channelConfig }}
+      >
         <Thread />
       </ChannelStateProvider>,
     );
diff --git a/src/components/Thread/__tests__/ThreadStart.test.js b/src/components/Thread/__tests__/ThreadStart.test.js
index 435c51b04..f255b3fe1 100644
--- a/src/components/Thread/__tests__/ThreadStart.test.js
+++ b/src/components/Thread/__tests__/ThreadStart.test.js
@@ -4,7 +4,11 @@ import { cleanup, render, screen } from '@testing-library/react';
 
 import { ThreadStart } from '../ThreadStart';
 
-import { ChannelStateProvider, ChatProvider, TranslationProvider } from '../../../context';
+import {
+  ChannelStateProvider,
+  ChatProvider,
+  TranslationProvider,
+} from '../../../context';
 
 import { generateMessage, getTestClientWithUser } from '../../../mock-builders';
 
diff --git a/src/components/Threads/ThreadContext.tsx b/src/components/Threads/ThreadContext.tsx
index fb9235c67..72ff146fa 100644
--- a/src/components/Threads/ThreadContext.tsx
+++ b/src/components/Threads/ThreadContext.tsx
@@ -15,7 +15,10 @@ export const useThreadContext = () => {
   return thread ?? undefined;
 };
 
-export const ThreadProvider = ({ children, thread }: PropsWithChildren<{ thread?: Thread }>) => (
+export const ThreadProvider = ({
+  children,
+  thread,
+}: PropsWithChildren<{ thread?: Thread }>) => (
   <ThreadContext.Provider value={thread}>
     <Channel channel={thread?.channel}>{children}</Channel>
   </ThreadContext.Provider>
diff --git a/src/components/Threads/ThreadList/ThreadList.tsx b/src/components/Threads/ThreadList/ThreadList.tsx
index 0f4239c9e..3ad8458b9 100644
--- a/src/components/Threads/ThreadList/ThreadList.tsx
+++ b/src/components/Threads/ThreadList/ThreadList.tsx
@@ -44,8 +44,8 @@ export const useThreadList = () => {
 export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
   const { client } = useChatContext();
   const {
-    ThreadListItem = DefaultThreadListItem,
     ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,
+    ThreadListItem = DefaultThreadListItem,
     ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,
     ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner,
   } = useComponentContext();
diff --git a/src/components/Threads/ThreadList/ThreadListItem.tsx b/src/components/Threads/ThreadList/ThreadListItem.tsx
index 78370dbf6..bd2ca7481 100644
--- a/src/components/Threads/ThreadList/ThreadListItem.tsx
+++ b/src/components/Threads/ThreadList/ThreadListItem.tsx
@@ -16,7 +16,10 @@ const ThreadListItemContext = createContext<Thread | undefined>(undefined);
 
 export const useThreadListItemContext = () => useContext(ThreadListItemContext);
 
-export const ThreadListItem = ({ thread, threadListItemUIProps }: ThreadListItemProps) => {
+export const ThreadListItem = ({
+  thread,
+  threadListItemUIProps,
+}: ThreadListItemProps) => {
   const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();
 
   return (
diff --git a/src/components/Threads/ThreadList/ThreadListItemUI.tsx b/src/components/Threads/ThreadList/ThreadListItemUI.tsx
index 5cfeebecb..8694b5710 100644
--- a/src/components/Threads/ThreadList/ThreadListItemUI.tsx
+++ b/src/components/Threads/ThreadList/ThreadListItemUI.tsx
@@ -44,8 +44,9 @@ const getTitleFromMessage = ({
 
   if (attachment) {
     attachmentIcon +=
-      attachmentTypeIconMap[(attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file'] ??
-      attachmentTypeIconMap.file;
+      attachmentTypeIconMap[
+        (attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file'
+      ] ?? attachmentTypeIconMap.file;
   }
 
   const messageBelongsToCurrentUser = message?.user?.id === currentUserId;
@@ -83,10 +84,8 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
     [client],
   );
 
-  const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage } = useStateStore(
-    thread.state,
-    selector,
-  );
+  const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage } =
+    useStateStore(thread.state, selector);
 
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
 
@@ -105,7 +104,9 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
     >
       <div className='str-chat__thread-list-item__channel'>
         <Icon.MessageBubble />
-        <div className='str-chat__thread-list-item__channel-text'>{channelDisplayTitle}</div>
+        <div className='str-chat__thread-list-item__channel-text'>
+          {channelDisplayTitle}
+        </div>
       </div>
       <div className='str-chat__thread-list-item__parent-message'>
         <div className='str-chat__thread-list-item__parent-message-text'>
@@ -126,7 +127,10 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
             <div className='str-chat__thread-list-item__latest-reply-text'>
               {deletedAt
                 ? 'This thread was deleted'
-                : getTitleFromMessage({ currentUserId: client.user?.id, message: latestReply })}
+                : getTitleFromMessage({
+                    currentUserId: client.user?.id,
+                    message: latestReply,
+                  })}
             </div>
             <div className='str-chat__thread-list-item__latest-reply-timestamp'>
               <Timestamp timestamp={deletedAt ?? latestReply?.created_at} />
diff --git a/src/components/Threads/icons.tsx b/src/components/Threads/icons.tsx
index d67e41627..9c4f82f1a 100644
--- a/src/components/Threads/icons.tsx
+++ b/src/components/Threads/icons.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index ae01ca588..a19039c09 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -21,8 +21,8 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
 export const PopperTooltip = <T extends HTMLElement>({
   children,
   offset = [0, 10],
-  referenceElement,
   placement = 'top',
+  referenceElement,
   visible = false,
 }: PopperTooltipProps<T>) => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
diff --git a/src/components/TypingIndicator/TypingIndicator.tsx b/src/components/TypingIndicator/TypingIndicator.tsx
index 2b1e81744..41176cd81 100644
--- a/src/components/TypingIndicator/TypingIndicator.tsx
+++ b/src/components/TypingIndicator/TypingIndicator.tsx
@@ -42,13 +42,14 @@ const useJoinTypingUsers = (names: string[]) => {
  * TypingIndicator lists users currently typing, it needs to be a child of Channel component
  */
 const UnMemoizedTypingIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: TypingIndicatorProps,
 ) => {
   const { threadList } = props;
 
-  const { channelConfig, thread } = useChannelStateContext<StreamChatGenerics>('TypingIndicator');
+  const { channelConfig, thread } =
+    useChannelStateContext<StreamChatGenerics>('TypingIndicator');
   const { client } = useChatContext<StreamChatGenerics>('TypingIndicator');
   const { typing = {} } = useTypingContext<StreamChatGenerics>('TypingIndicator');
 
diff --git a/src/components/TypingIndicator/__tests__/TypingIndicator.test.js b/src/components/TypingIndicator/__tests__/TypingIndicator.test.js
index fea784214..283da34ba 100644
--- a/src/components/TypingIndicator/__tests__/TypingIndicator.test.js
+++ b/src/components/TypingIndicator/__tests__/TypingIndicator.test.js
@@ -109,7 +109,9 @@ describe('TypingIndicator', () => {
       joris: { user: { id: 'joris', image: 'joris.jpg' } },
       margriet: { user: { id: 'margriet', image: 'margriet.jpg' } },
     });
-    expect(screen.getByText('{{ users }} and {{ user }} are typing...')).toBeInTheDocument();
+    expect(
+      screen.getByText('{{ users }} and {{ user }} are typing...'),
+    ).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
@@ -196,11 +198,15 @@ describe('TypingIndicator', () => {
     });
 
     it('should not render TypingIndicator in thread if user is typing in main channel', async () => {
-      const { container } = await renderComponent({ [otherUserId]: { user: otherUserId } }, true, {
-        channel,
-        client,
-        thread: { id: parent_id },
-      });
+      const { container } = await renderComponent(
+        { [otherUserId]: { user: otherUserId } },
+        true,
+        {
+          channel,
+          client,
+          thread: { id: parent_id },
+        },
+      );
 
       expect(container).toBeEmptyDOMElement();
     });
diff --git a/src/components/UserItem/__tests__/UserItem.test.js b/src/components/UserItem/__tests__/UserItem.test.js
index 50631e8f4..0c8207ccc 100644
--- a/src/components/UserItem/__tests__/UserItem.test.js
+++ b/src/components/UserItem/__tests__/UserItem.test.js
@@ -8,7 +8,7 @@ expect.extend(toHaveNoViolations);
 
 import { UserItem } from '../UserItem';
 
-afterEach(cleanup); // eslint-disable-line
+afterEach(cleanup);
 
 describe('UserItem', () => {
   it('should render component with default props', () => {
diff --git a/src/components/Window/Window.tsx b/src/components/Window/Window.tsx
index 9485eb2c8..a39e54fbf 100644
--- a/src/components/Window/Window.tsx
+++ b/src/components/Window/Window.tsx
@@ -6,14 +6,14 @@ import { StreamMessage, useChannelStateContext } from '../../context/ChannelStat
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type WindowProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** optional prop to force addition of class str-chat__main-panel---with-thread-opn to the Window root element */
   thread?: StreamMessage<StreamChatGenerics>;
 };
 
 const UnMemoizedWindow = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: PropsWithChildren<WindowProps<StreamChatGenerics>>,
 ) => {
diff --git a/src/components/Window/__tests__/Window.test.js b/src/components/Window/__tests__/Window.test.js
index bf815801e..b8c6fb432 100644
--- a/src/components/Window/__tests__/Window.test.js
+++ b/src/components/Window/__tests__/Window.test.js
@@ -21,18 +21,21 @@ describe('Window', () => {
   it.each([
     ['add', thread],
     ['', undefined],
-  ])('should %s class str-chat__main-panel--thread-open when thread is open', (_, thread) => {
-    const { container } = renderComponent({
-      channelStateContextMock: {
-        thread,
-      },
-    });
-    if (thread) {
-      expect(container.firstChild).toHaveClass(THREAD_OPEN_CLASS_NAME);
-    } else {
-      expect(container.firstChild).not.toHaveClass(THREAD_OPEN_CLASS_NAME);
-    }
-  });
+  ])(
+    'should %s class str-chat__main-panel--thread-open when thread is open',
+    (_, thread) => {
+      const { container } = renderComponent({
+        channelStateContextMock: {
+          thread,
+        },
+      });
+      if (thread) {
+        expect(container.firstChild).toHaveClass(THREAD_OPEN_CLASS_NAME);
+      } else {
+        expect(container.firstChild).not.toHaveClass(THREAD_OPEN_CLASS_NAME);
+      }
+    },
+  );
 
   it.each([
     ['add', thread],
diff --git a/src/context/AttachmentSelectorContext.tsx b/src/context/AttachmentSelectorContext.tsx
index 22991e98a..0ec2cf08c 100644
--- a/src/context/AttachmentSelectorContext.tsx
+++ b/src/context/AttachmentSelectorContext.tsx
@@ -12,7 +12,9 @@ export const AttachmentSelectorContextProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value: AttachmentSelectorContextValue }>) => (
-  <AttachmentSelectorContext.Provider value={value}>{children}</AttachmentSelectorContext.Provider>
+  <AttachmentSelectorContext.Provider value={value}>
+    {children}
+  </AttachmentSelectorContext.Provider>
 );
 
 export const useAttachmentSelectorContext = () => useContext(AttachmentSelectorContext);
diff --git a/src/context/ChannelActionContext.tsx b/src/context/ChannelActionContext.tsx
index 36acea39f..4d4456a48 100644
--- a/src/context/ChannelActionContext.tsx
+++ b/src/context/ChannelActionContext.tsx
@@ -34,11 +34,11 @@ export type MarkReadWrapperOptions = {
 };
 
 export type MessageAttachments<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Array<Attachment<StreamChatGenerics>>;
 
 export type MessageToSend<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   attachments?: MessageAttachments<StreamChatGenerics>;
   error?: ErrorFromResponse<APIErrorResponse>;
@@ -52,11 +52,11 @@ export type MessageToSend<
 };
 
 export type RetrySendMessage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = (message: StreamMessage<StreamChatGenerics>) => Promise<void>;
 
 export type ChannelActionContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   addNotification: (text: string, type: 'success' | 'error') => void;
   closeThread: (event?: React.BaseSyntheticEvent) => void;
@@ -73,7 +73,11 @@ export type ChannelActionContextValue<
     highlightDuration?: number,
   ) => Promise<void>;
   jumpToLatestMessage: () => Promise<void>;
-  jumpToMessage: (messageId: string, limit?: number, highlightDuration?: number) => Promise<void>;
+  jumpToMessage: (
+    messageId: string,
+    limit?: number,
+    highlightDuration?: number,
+  ) => Promise<void>;
   loadMore: (limit?: number) => Promise<number>;
   loadMoreNewer: (limit?: number) => Promise<number>;
   loadMoreThread: () => Promise<void>;
@@ -91,32 +95,34 @@ export type ChannelActionContextValue<
     customMessageData?: Partial<Message<StreamChatGenerics>>,
     options?: SendMessageOptions,
   ) => Promise<void>;
-  setChannelUnreadUiState: React.Dispatch<React.SetStateAction<ChannelUnreadUiState | undefined>>;
+  setChannelUnreadUiState: React.Dispatch<
+    React.SetStateAction<ChannelUnreadUiState | undefined>
+  >;
   setQuotedMessage: React.Dispatch<
     React.SetStateAction<StreamMessage<StreamChatGenerics> | undefined>
   >;
   updateMessage: (message: StreamMessage<StreamChatGenerics>) => void;
 };
 
-export const ChannelActionContext = React.createContext<ChannelActionContextValue | undefined>(
-  undefined,
-);
+export const ChannelActionContext = React.createContext<
+  ChannelActionContextValue | undefined
+>(undefined);
 
 export const ChannelActionProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: ChannelActionContextValue<StreamChatGenerics>;
 }>) => (
-  <ChannelActionContext.Provider value={(value as unknown) as ChannelActionContextValue}>
+  <ChannelActionContext.Provider value={value as unknown as ChannelActionContextValue}>
     {children}
   </ChannelActionContext.Provider>
 );
 
 export const useChannelActionContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   componentName?: string,
 ) => {
@@ -130,7 +136,7 @@ export const useChannelActionContext = <
     return {} as ChannelActionContextValue<StreamChatGenerics>;
   }
 
-  return (contextValue as unknown) as ChannelActionContextValue<StreamChatGenerics>;
+  return contextValue as unknown as ChannelActionContextValue<StreamChatGenerics>;
 };
 
 /**
@@ -140,7 +146,7 @@ export const useChannelActionContext = <
  */
 export const withChannelActionContext = <
   P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
 ) => {
diff --git a/src/context/ChannelListContext.tsx b/src/context/ChannelListContext.tsx
index fb8e96f00..be54e4062 100644
--- a/src/context/ChannelListContext.tsx
+++ b/src/context/ChannelListContext.tsx
@@ -11,7 +11,7 @@ import type { Channel } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../types/types';
 
 export type ChannelListContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /**
    * State representing the array of loaded channels.
@@ -24,26 +24,28 @@ export type ChannelListContextValue<
   setChannels: Dispatch<SetStateAction<Channel<StreamChatGenerics>[]>>;
 };
 
-export const ChannelListContext = createContext<ChannelListContextValue | undefined>(undefined);
+export const ChannelListContext = createContext<ChannelListContextValue | undefined>(
+  undefined,
+);
 
 /**
  * Context provider for components rendered within the `ChannelList`
  */
 export const ChannelListContextProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: ChannelListContextValue<StreamChatGenerics>;
 }>) => (
-  <ChannelListContext.Provider value={(value as unknown) as ChannelListContextValue}>
+  <ChannelListContext.Provider value={value as unknown as ChannelListContextValue}>
     {children}
   </ChannelListContext.Provider>
 );
 
 export const useChannelListContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   componentName?: string,
 ) => {
@@ -57,5 +59,5 @@ export const useChannelListContext = <
     return {} as ChannelListContextValue<StreamChatGenerics>;
   }
 
-  return (contextValue as unknown) as ChannelListContextValue<StreamChatGenerics>;
+  return contextValue as unknown as ChannelListContextValue<StreamChatGenerics>;
 };
diff --git a/src/context/ChannelStateContext.tsx b/src/context/ChannelStateContext.tsx
index fb12ffdc0..89faee6df 100644
--- a/src/context/ChannelStateContext.tsx
+++ b/src/context/ChannelStateContext.tsx
@@ -25,13 +25,13 @@ export type ChannelNotifications = Array<{
 }>;
 
 export type StreamMessage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > =
   | ReturnType<StreamChannelState<StreamChatGenerics>['formatMessage']>
   | MessageResponse<StreamChatGenerics>;
 
 export type ChannelState<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   suppressAutoscroll: boolean;
   error?: Error | null;
@@ -57,7 +57,7 @@ export type ChannelState<
 };
 
 export type ChannelStateContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<ChannelState<StreamChatGenerics>, 'typing'> & {
   channel: Channel<StreamChatGenerics>;
   channelCapabilities: Record<string, boolean>;
@@ -80,25 +80,25 @@ export type ChannelStateContextValue<
   watcher_count?: number;
 };
 
-export const ChannelStateContext = React.createContext<ChannelStateContextValue | undefined>(
-  undefined,
-);
+export const ChannelStateContext = React.createContext<
+  ChannelStateContextValue | undefined
+>(undefined);
 
 export const ChannelStateProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: ChannelStateContextValue<StreamChatGenerics>;
 }>) => (
-  <ChannelStateContext.Provider value={(value as unknown) as ChannelStateContextValue}>
+  <ChannelStateContext.Provider value={value as unknown as ChannelStateContextValue}>
     {children}
   </ChannelStateContext.Provider>
 );
 
 export const useChannelStateContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   componentName?: string,
 ) => {
@@ -112,7 +112,7 @@ export const useChannelStateContext = <
     return {} as ChannelStateContextValue<StreamChatGenerics>;
   }
 
-  return (contextValue as unknown) as ChannelStateContextValue<StreamChatGenerics>;
+  return contextValue as unknown as ChannelStateContextValue<StreamChatGenerics>;
 };
 
 /**
@@ -122,7 +122,7 @@ export const useChannelStateContext = <
  */
 export const withChannelStateContext = <
   P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
 ) => {
diff --git a/src/context/ChatContext.tsx b/src/context/ChatContext.tsx
index 514942a5d..f71f18425 100644
--- a/src/context/ChatContext.tsx
+++ b/src/context/ChatContext.tsx
@@ -24,7 +24,7 @@ export type CustomClasses = Partial<Record<CSSClasses, string>>;
 type ChannelCID = string; // e.g.: "messaging:general"
 
 export type ChatContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /**
    * Indicates, whether a channels query has been triggered within ChannelList by its channels pagination controller.
@@ -62,20 +62,20 @@ export type ChatContextValue<
 export const ChatContext = React.createContext<ChatContextValue | undefined>(undefined);
 
 export const ChatProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: ChatContextValue<StreamChatGenerics>;
 }>) => (
-  <ChatContext.Provider value={(value as unknown) as ChatContextValue}>
+  <ChatContext.Provider value={value as unknown as ChatContextValue}>
     {children}
   </ChatContext.Provider>
 );
 
 export const useChatContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   componentName?: string,
 ) => {
@@ -89,7 +89,7 @@ export const useChatContext = <
     return {} as ChatContextValue<StreamChatGenerics>;
   }
 
-  return (contextValue as unknown) as ChatContextValue<StreamChatGenerics>;
+  return contextValue as unknown as ChatContextValue<StreamChatGenerics>;
 };
 
 /**
@@ -99,11 +99,13 @@ export const useChatContext = <
  */
 export const withChatContext = <
   P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
 ) => {
-  const WithChatContextComponent = (props: Omit<P, keyof ChatContextValue<StreamChatGenerics>>) => {
+  const WithChatContextComponent = (
+    props: Omit<P, keyof ChatContextValue<StreamChatGenerics>>,
+  ) => {
     const chatContext = useChatContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...chatContext} />;
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 51b15fe1c..02f115600 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -60,7 +60,7 @@ import type { StopAIGenerationButtonProps } from '../components/MessageInput/Sto
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = {
   /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
   Attachment?: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
@@ -73,9 +73,13 @@ export type ComponentContextValue<
   /** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */
   AudioRecorder?: React.ComponentType;
   /** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */
-  AutocompleteSuggestionItem?: React.ComponentType<SuggestionItemProps<StreamChatGenerics>>;
+  AutocompleteSuggestionItem?: React.ComponentType<
+    SuggestionItemProps<StreamChatGenerics>
+  >;
   /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
-  AutocompleteSuggestionList?: React.ComponentType<SuggestionListProps<StreamChatGenerics>>;
+  AutocompleteSuggestionList?: React.ComponentType<
+    SuggestionListProps<StreamChatGenerics>
+  >;
   /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
   Avatar?: React.ComponentType<AvatarProps<StreamChatGenerics>>;
   /** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
@@ -87,7 +91,9 @@ export type ComponentContextValue<
   /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
   CooldownTimer?: React.ComponentType<CooldownTimerProps>;
   /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */
-  CustomMessageActionsList?: React.ComponentType<CustomMessageActionsListProps<StreamChatGenerics>>;
+  CustomMessageActionsList?: React.ComponentType<
+    CustomMessageActionsListProps<StreamChatGenerics>
+  >;
   /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
   DateSeparator?: React.ComponentType<DateSeparatorProps>;
   /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
@@ -157,13 +163,17 @@ export type ComponentContextValue<
   /** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */
   QuotedMessage?: React.ComponentType;
   /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
-  QuotedMessagePreview?: React.ComponentType<QuotedMessagePreviewProps<StreamChatGenerics>>;
+  QuotedMessagePreview?: React.ComponentType<
+    QuotedMessagePreviewProps<StreamChatGenerics>
+  >;
   /** Custom UI component to override the rendering of quoted poll, defaults to and accepts same props as: [QuotedPoll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/QuotedPoll.tsx) */
   QuotedPoll?: React.ComponentType;
   /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
   reactionOptions?: ReactionOptions;
   /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
-  ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps<StreamChatGenerics>>;
+  ReactionSelector?: React.ForwardRefExoticComponent<
+    ReactionSelectorProps<StreamChatGenerics>
+  >;
   /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
   ReactionsList?: React.ComponentType<ReactionsListProps<StreamChatGenerics>>;
   RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
@@ -203,28 +213,29 @@ export const ComponentContext = React.createContext<ComponentContextValue>({});
 
 export const ComponentProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: Partial<ComponentContextValue<StreamChatGenerics, V>>;
 }>) => (
-  <ComponentContext.Provider value={(value as unknown) as ComponentContextValue}>
+  <ComponentContext.Provider value={value as unknown as ComponentContextValue}>
     {children}
   </ComponentContext.Provider>
 );
 
 export const useComponentContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   /**
    * @deprecated
    */
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _componentName?: string,
-) => (useContext(ComponentContext) as unknown) as ComponentContextValue<StreamChatGenerics, V>;
+) =>
+  useContext(ComponentContext) as unknown as ComponentContextValue<StreamChatGenerics, V>;
 
 /**
  * Typescript currently does not support partial inference, so if ComponentContext
@@ -234,7 +245,7 @@ export const useComponentContext = <
 export const withComponentContext = <
   P extends UnknownType,
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   Component: React.ComponentType<P>,
 ) => {
diff --git a/src/context/DialogManagerContext.tsx b/src/context/DialogManagerContext.tsx
index b1f14126d..ef49bccc5 100644
--- a/src/context/DialogManagerContext.tsx
+++ b/src/context/DialogManagerContext.tsx
@@ -10,7 +10,10 @@ const DialogManagerProviderContext = React.createContext<
   DialogManagerProviderContextValue | undefined
 >(undefined);
 
-export const DialogManagerProvider = ({ children, id }: PropsWithChildren<{ id?: string }>) => {
+export const DialogManagerProvider = ({
+  children,
+  id,
+}: PropsWithChildren<{ id?: string }>) => {
   const [dialogManager] = useState<DialogManager>(() => new DialogManager({ id }));
 
   return (
diff --git a/src/context/MessageBounceContext.tsx b/src/context/MessageBounceContext.tsx
index 7bd50e32e..7e06e650c 100644
--- a/src/context/MessageBounceContext.tsx
+++ b/src/context/MessageBounceContext.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, ReactEventHandler, useCallback, useContext, useMemo } from 'react';
+import React, {
+  createContext,
+  ReactEventHandler,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
 import { useMessageContext } from './MessageContext';
 import { DefaultStreamChatGenerics, PropsWithChildrenOnly } from '../types/types';
 import { StreamMessage } from './ChannelStateContext';
@@ -6,7 +12,7 @@ import { useChannelActionContext } from './ChannelActionContext';
 import { isMessageBounced } from '../components';
 
 export interface MessageBounceContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > {
   handleDelete: ReactEventHandler;
   handleEdit: ReactEventHandler;
@@ -14,10 +20,12 @@ export interface MessageBounceContextValue<
   message: StreamMessage<StreamChatGenerics>;
 }
 
-const MessageBounceContext = createContext<MessageBounceContextValue | undefined>(undefined);
+const MessageBounceContext = createContext<MessageBounceContextValue | undefined>(
+  undefined,
+);
 
 export function useMessageBounceContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(componentName?: string) {
   const contextValue = useContext(MessageBounceContext);
 
@@ -33,7 +41,7 @@ export function useMessageBounceContext<
 }
 
 export function MessageBounceProvider<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({ children }: PropsWithChildrenOnly) {
   const {
     handleRetry: doHandleRetry,
@@ -74,5 +82,9 @@ export function MessageBounceProvider<
     [handleDelete, handleEdit, handleRetry, message],
   );
 
-  return <MessageBounceContext.Provider value={value}>{children}</MessageBounceContext.Provider>;
+  return (
+    <MessageBounceContext.Provider value={value}>
+      {children}
+    </MessageBounceContext.Provider>
+  );
 }
diff --git a/src/context/MessageContext.tsx b/src/context/MessageContext.tsx
index 74e6d7a77..063b4b7d1 100644
--- a/src/context/MessageContext.tsx
+++ b/src/context/MessageContext.tsx
@@ -21,7 +21,7 @@ import type { RenderTextOptions } from '../components/Message/renderText';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
 
 export type CustomMessageActions<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   [key: string]: (
     message: StreamMessage<StreamChatGenerics>,
@@ -30,7 +30,7 @@ export type CustomMessageActions<
 };
 
 export type MessageContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** If actions such as edit, delete, flag, mute are enabled on Message */
   actionsEnabled: boolean;
@@ -65,7 +65,10 @@ export type MessageContextValue<
   /** Function to pin a Message in a Channel */
   handlePin: ReactEventHandler;
   /** Function to post a reaction on a Message */
-  handleReaction: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
+  handleReaction: (
+    reactionType: string,
+    event: React.BaseSyntheticEvent,
+  ) => Promise<void>;
   /** Function to retry sending a Message */
   handleRetry: ChannelActionContextValue<StreamChatGenerics>['retrySendMessage'];
   /** Function that returns whether the Message belongs to the current user */
@@ -140,25 +143,27 @@ export type MessageContextValue<
   unsafeHTML?: boolean;
 };
 
-export const MessageContext = React.createContext<MessageContextValue | undefined>(undefined);
+export const MessageContext = React.createContext<MessageContextValue | undefined>(
+  undefined,
+);
 
 export const MessageProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: MessageContextValue<StreamChatGenerics>;
 }>) => (
-  <MessageContext.Provider value={(value as unknown) as MessageContextValue}>
+  <MessageContext.Provider value={value as unknown as MessageContextValue}>
     {children}
   </MessageContext.Provider>
 );
 
 export const useMessageContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _componentName?: string,
 ) => {
   const contextValue = useContext(MessageContext);
@@ -167,7 +172,7 @@ export const useMessageContext = <
     return {} as MessageContextValue<StreamChatGenerics>;
   }
 
-  return (contextValue as unknown) as MessageContextValue<StreamChatGenerics>;
+  return contextValue as unknown as MessageContextValue<StreamChatGenerics>;
 };
 
 /**
@@ -177,7 +182,7 @@ export const useMessageContext = <
  */
 export const withMessageContext = <
   P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
 ) => {
diff --git a/src/context/MessageInputContext.tsx b/src/context/MessageInputContext.tsx
index 0869fd992..95228c9ec 100644
--- a/src/context/MessageInputContext.tsx
+++ b/src/context/MessageInputContext.tsx
@@ -13,7 +13,7 @@ import type { CustomTrigger, DefaultStreamChatGenerics } from '../types/types';
 
 export type MessageInputContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 > = MessageInputState<StreamChatGenerics> &
   MessageInputHookProps<StreamChatGenerics> &
   Omit<MessageInputProps<StreamChatGenerics, V>, 'Input'> &
@@ -28,7 +28,7 @@ export const MessageInputContext = createContext<
 
 export const MessageInputContextProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >({
   children,
   value,
@@ -42,7 +42,7 @@ export const MessageInputContextProvider = <
 
 export const useMessageInputContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  V extends CustomTrigger = CustomTrigger
+  V extends CustomTrigger = CustomTrigger,
 >(
   componentName?: string,
 ) => {
diff --git a/src/context/MessageListContext.tsx b/src/context/MessageListContext.tsx
index 3352459d5..37af09985 100644
--- a/src/context/MessageListContext.tsx
+++ b/src/context/MessageListContext.tsx
@@ -7,7 +7,9 @@ export type MessageListContextValue = {
   scrollToBottom: () => void;
 };
 
-export const MessageListContext = createContext<MessageListContextValue | undefined>(undefined);
+export const MessageListContext = createContext<MessageListContextValue | undefined>(
+  undefined,
+);
 
 /**
  * Context provider for components rendered within the `MessageList`
diff --git a/src/context/PollContext.tsx b/src/context/PollContext.tsx
index 229287611..9d67d19f0 100644
--- a/src/context/PollContext.tsx
+++ b/src/context/PollContext.tsx
@@ -3,7 +3,7 @@ import type { Poll } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../types';
 
 export type PollContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   poll: Poll<StreamChatGenerics>;
 };
@@ -11,7 +11,7 @@ export type PollContextValue<
 export const PollContext = React.createContext<PollContextValue | undefined>(undefined);
 
 export const PollProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   poll,
@@ -19,14 +19,14 @@ export const PollProvider = <
   poll: Poll<StreamChatGenerics>;
 }>) =>
   poll ? (
-    <PollContext.Provider value={({ poll } as unknown) as PollContextValue}>
+    <PollContext.Provider value={{ poll } as unknown as PollContextValue}>
       {children}
     </PollContext.Provider>
   ) : null;
 
 export const usePollContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
   const contextValue = useContext(PollContext);
-  return (contextValue as unknown) as PollContextValue<StreamChatGenerics>;
+  return contextValue as unknown as PollContextValue<StreamChatGenerics>;
 };
diff --git a/src/context/TranslationContext.tsx b/src/context/TranslationContext.tsx
index 974664d33..0b23dba8f 100644
--- a/src/context/TranslationContext.tsx
+++ b/src/context/TranslationContext.tsx
@@ -51,7 +51,9 @@ export const useTranslationContext = (componentName?: string) => {
 export const withTranslationContext = <P extends UnknownType>(
   Component: React.ComponentType<P>,
 ) => {
-  const WithTranslationContextComponent = (props: Omit<P, keyof TranslationContextValue>) => {
+  const WithTranslationContextComponent = (
+    props: Omit<P, keyof TranslationContextValue>,
+  ) => {
     const translationContext = useTranslationContext();
 
     return <Component {...(props as P)} {...translationContext} />;
diff --git a/src/context/TypingContext.tsx b/src/context/TypingContext.tsx
index 73d7b56fc..0d7e80451 100644
--- a/src/context/TypingContext.tsx
+++ b/src/context/TypingContext.tsx
@@ -5,28 +5,30 @@ import type { ChannelState as StreamChannelState } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
 
 export type TypingContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   typing?: StreamChannelState<StreamChatGenerics>['typing'];
 };
 
-export const TypingContext = React.createContext<TypingContextValue | undefined>(undefined);
+export const TypingContext = React.createContext<TypingContextValue | undefined>(
+  undefined,
+);
 
 export const TypingProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
   value: TypingContextValue<StreamChatGenerics>;
 }>) => (
-  <TypingContext.Provider value={(value as unknown) as TypingContextValue}>
+  <TypingContext.Provider value={value as unknown as TypingContextValue}>
     {children}
   </TypingContext.Provider>
 );
 
 export const useTypingContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   componentName?: string,
 ) => {
@@ -50,7 +52,7 @@ export const useTypingContext = <
  */
 export const withTypingContext = <
   P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
 ) => {
diff --git a/src/context/VirtualizedMessageListContext.tsx b/src/context/VirtualizedMessageListContext.tsx
index 1d6c11943..22fd55281 100644
--- a/src/context/VirtualizedMessageListContext.tsx
+++ b/src/context/VirtualizedMessageListContext.tsx
@@ -18,7 +18,9 @@ export const VirtualizedMessageListContextProvider = ({
 }: PropsWithChildren<{
   value: VirtualizedMessageListContextValue;
 }>) => (
-  <VirtualizedMessageListContext.Provider value={value as VirtualizedMessageListContextValue}>
+  <VirtualizedMessageListContext.Provider
+    value={value as VirtualizedMessageListContextValue}
+  >
     {children}
   </VirtualizedMessageListContext.Provider>
 );
diff --git a/src/context/WithComponents.tsx b/src/context/WithComponents.tsx
index 6b55e83fb..6230a27fd 100644
--- a/src/context/WithComponents.tsx
+++ b/src/context/WithComponents.tsx
@@ -7,5 +7,9 @@ export function WithComponents({
 }: PropsWithChildren<{ overrides: Partial<ComponentContextValue> }>) {
   const parentOverrides = useContext(ComponentContext);
   const actualOverrides: ComponentContextValue = { ...parentOverrides, ...overrides };
-  return <ComponentContext.Provider value={actualOverrides}>{children}</ComponentContext.Provider>;
+  return (
+    <ComponentContext.Provider value={actualOverrides}>
+      {children}
+    </ComponentContext.Provider>
+  );
 }
diff --git a/src/context/utils/getDisplayName.ts b/src/context/utils/getDisplayName.ts
index 9c18810bd..3ca577192 100644
--- a/src/context/utils/getDisplayName.ts
+++ b/src/context/utils/getDisplayName.ts
@@ -1,4 +1,5 @@
 import type { UnknownType } from '../../types/types';
 
-export const getDisplayName = <P extends UnknownType>(Component: React.ComponentType<P>) =>
-  Component.displayName || Component.name || 'Component';
+export const getDisplayName = <P extends UnknownType>(
+  Component: React.ComponentType<P>,
+) => Component.displayName || Component.name || 'Component';
diff --git a/src/experimental/MessageActions/MessageActions.tsx b/src/experimental/MessageActions/MessageActions.tsx
index 47da9e86a..1fc48da0e 100644
--- a/src/experimental/MessageActions/MessageActions.tsx
+++ b/src/experimental/MessageActions/MessageActions.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable sort-keys */
 import clsx from 'clsx';
 import React, { PropsWithChildren, useState } from 'react';
 
@@ -14,10 +13,7 @@ import { defaultMessageActionSet } from './defaults';
 export type MessageActionSetItem = {
   Component: React.ComponentType;
   placement: 'quick' | 'dropdown';
-  type:
-    | keyof typeof MESSAGE_ACTIONS
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    | (string & {});
+  type: keyof typeof MESSAGE_ACTIONS | (string & {});
 };
 
 export type MessageActionsProps = {
@@ -38,16 +34,17 @@ export const MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = useState<HTMLButtonElement | null>(
-    null,
-  );
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] =
+    useState<HTMLButtonElement | null>(null);
 
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter,
   );
 
-  const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(filteredMessageActionSet);
+  const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(
+    filteredMessageActionSet,
+  );
 
   const dropdownDialogId = `message-actions--${message.id}`;
   const reactionSelectorDialogId = `reaction-selector--${message.id}`;
@@ -63,7 +60,8 @@ export const MessageActions = ({
   return (
     <div
       className={clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-        'str-chat__message-options--active': dropdownDialogIsOpen || reactionSelectorDialogIsOpen,
+        'str-chat__message-options--active':
+          dropdownDialogIsOpen || reactionSelectorDialogIsOpen,
       })}
     >
       {dropdownActionSet.length > 0 && (
diff --git a/src/experimental/MessageActions/defaults.tsx b/src/experimental/MessageActions/defaults.tsx
index fb6ee10be..36fa2f9fe 100644
--- a/src/experimental/MessageActions/defaults.tsx
+++ b/src/experimental/MessageActions/defaults.tsx
@@ -2,7 +2,10 @@
 import React from 'react';
 
 import { isUserMuted } from '../../components';
-import { ReactionIcon as DefaultReactionIcon, ThreadIcon } from '../../components/Message/icons';
+import {
+  ReactionIcon as DefaultReactionIcon,
+  ThreadIcon,
+} from '../../components/Message/icons';
 import { ReactionSelectorWithButton } from '../../components/Reactions/ReactionSelectorWithButton';
 import {
   useChannelActionContext,
@@ -139,17 +142,41 @@ const DefaultMessageActionComponents = {
 
 export const defaultMessageActionSet: MessageActionSetItem[] = [
   // { placement: 'dropdown', type: 'block' },
-  { Component: DefaultMessageActionComponents.quick.Reply, placement: 'quick', type: 'reply' },
-  { Component: DefaultMessageActionComponents.quick.React, placement: 'quick', type: 'react' },
+  {
+    Component: DefaultMessageActionComponents.quick.Reply,
+    placement: 'quick',
+    type: 'reply',
+  },
+  {
+    Component: DefaultMessageActionComponents.quick.React,
+    placement: 'quick',
+    type: 'react',
+  },
   {
     Component: DefaultMessageActionComponents.dropdown.Delete,
     placement: 'dropdown',
     type: 'delete',
   },
-  { Component: DefaultMessageActionComponents.dropdown.Edit, placement: 'dropdown', type: 'edit' },
-  { Component: DefaultMessageActionComponents.dropdown.Mute, placement: 'dropdown', type: 'mute' },
-  { Component: DefaultMessageActionComponents.dropdown.Flag, placement: 'dropdown', type: 'flag' },
-  { Component: DefaultMessageActionComponents.dropdown.Pin, placement: 'dropdown', type: 'pin' },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Edit,
+    placement: 'dropdown',
+    type: 'edit',
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Mute,
+    placement: 'dropdown',
+    type: 'mute',
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Flag,
+    placement: 'dropdown',
+    type: 'flag',
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Pin,
+    placement: 'dropdown',
+    type: 'pin',
+  },
   {
     Component: DefaultMessageActionComponents.dropdown.Quote,
     placement: 'dropdown',
diff --git a/src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts b/src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
index 01fd92702..781decc21 100644
--- a/src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
+++ b/src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
@@ -45,7 +45,8 @@ export const useBaseMessageActionSetFilter = (
 
     return messageActionSet.filter(({ type }: MessageActionSetItem) => {
       // filter out actions with types that do not work in thread
-      if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply) return false;
+      if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
+        return false;
 
       if (
         (type === 'delete' && !canDelete) ||
diff --git a/src/i18n/Streami18n.ts b/src/i18n/Streami18n.ts
index 33db90c93..5bc3e0ad5 100644
--- a/src/i18n/Streami18n.ts
+++ b/src/i18n/Streami18n.ts
@@ -228,7 +228,15 @@ const en_locale = {
     'December',
   ],
   relativeTime: {},
-  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  weekdays: [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ],
 };
 
 type DateTimeParserModule = typeof Dayjs | typeof momentTimezone;
@@ -579,7 +587,8 @@ export class Streami18n {
 
     this.tDateTimeParser = (timestamp) => {
       const language =
-        finalOptions.disableDateTimeTranslations || !this.localeExists(this.currentLanguage)
+        finalOptions.disableDateTimeTranslations ||
+        !this.localeExists(this.currentLanguage)
           ? defaultLng
           : this.currentLanguage;
 
@@ -659,7 +668,10 @@ export class Streami18n {
   async getTranslators() {
     if (!this.initialized) {
       if (this.dayjsLocales[this.currentLanguage]) {
-        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);
+        this.addOrUpdateLocale(
+          this.currentLanguage,
+          this.dayjsLocales[this.currentLanguage],
+        );
       }
 
       return await this.init();
@@ -722,7 +734,10 @@ export class Streami18n {
     try {
       const t = await this.i18nInstance.changeLanguage(language);
       if (this.dayjsLocales[language]) {
-        this.addOrUpdateLocale(this.currentLanguage, this.dayjsLocales[this.currentLanguage]);
+        this.addOrUpdateLocale(
+          this.currentLanguage,
+          this.dayjsLocales[this.currentLanguage],
+        );
       }
 
       this.setLanguageCallback(t);
diff --git a/src/i18n/__tests__/Streami18n.test.js b/src/i18n/__tests__/Streami18n.test.js
index 99db652bd..2621592a8 100644
--- a/src/i18n/__tests__/Streami18n.test.js
+++ b/src/i18n/__tests__/Streami18n.test.js
@@ -9,11 +9,15 @@ import localeData from 'dayjs/plugin/localeData';
 Dayjs.extend(localeData);
 
 const customDayjsLocaleConfig = {
-  months: 'januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember'.split(
-    '_',
-  ),
+  months:
+    'januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember'.split(
+      '_',
+    ),
   monthsShort: 'jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des'.split('_'),
-  weekdays: 'sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur'.split('_'),
+  weekdays:
+    'sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur'.split(
+      '_',
+    ),
   weekdaysShort: 'sun_mán_týs_mik_hós_frí_ley'.split('_'),
   weekdaysMin: 'su_má_tý_mi_hó_fr_le'.split('_'),
   formats: {
@@ -87,7 +91,10 @@ describe('Streami18n instance - with built-in langauge', () => {
     it('should provide dutch translator', async () => {
       const { t: _t } = await streami18n.getTranslators();
       for (const key in nlTranslations) {
-        if ((key.includes('{{') && key.includes('}}')) || typeof nlTranslations[key] !== 'string') {
+        if (
+          (key.includes('{{') && key.includes('}}')) ||
+          typeof nlTranslations[key] !== 'string'
+        ) {
           continue;
         }
 
@@ -111,7 +118,10 @@ describe('Streami18n instance - with built-in langauge', () => {
     it('should provide dutch translator', async () => {
       const { t: _t } = await streami18n.getTranslators();
       for (const key in nlTranslations) {
-        if ((key.includes('{{') && key.includes('}}')) || typeof nlTranslations[key] !== 'string') {
+        if (
+          (key.includes('{{') && key.includes('}}')) ||
+          typeof nlTranslations[key] !== 'string'
+        ) {
           continue;
         }
 
@@ -140,7 +150,9 @@ describe('Streami18n instance - with built-in langauge', () => {
       for (const key in streami18nOptions.dayjsLocaleConfigForLanguage) {
         if (localeConfig[key]) {
           expect(
-            typeof localeConfig[key] === 'function' ? localeConfig[key]() : localeConfig[key],
+            typeof localeConfig[key] === 'function'
+              ? localeConfig[key]()
+              : localeConfig[key],
           ).toStrictEqual(streami18nOptions.dayjsLocaleConfigForLanguage[key]);
         }
       }
@@ -209,7 +221,9 @@ describe('registerTranslation - register new language `mr` (Marathi) ', () => {
     for (const key in customDayjsLocaleConfig) {
       if (localeConfig[key]) {
         expect(customDayjsLocaleConfig[key]).toStrictEqual(
-          typeof localeConfig[key] === 'function' ? localeConfig[key]() : localeConfig[key],
+          typeof localeConfig[key] === 'function'
+            ? localeConfig[key]()
+            : localeConfig[key],
         );
       }
     }
@@ -225,7 +239,10 @@ describe('setLanguage - switch to french', () => {
 
     const { t: _t } = await streami18n.getTranslators();
     for (const key in frTranslations) {
-      if ((key.includes('{{') && key.includes('}}')) || typeof nlTranslations[key] !== 'string') {
+      if (
+        (key.includes('{{') && key.includes('}}')) ||
+        typeof nlTranslations[key] !== 'string'
+      ) {
         continue;
       }
 
@@ -242,13 +259,20 @@ describe('Streami18n timezone', () => {
     it('is by default the local timezone', () => {
       const streamI18n = new Streami18n({ DateTimeParser: module });
       const date = new Date();
-      expect(streamI18n.tDateTimeParser(date).format('H')).toBe(date.getHours().toString());
+      expect(streamI18n.tDateTimeParser(date).format('H')).toBe(
+        date.getHours().toString(),
+      );
     });
 
     it('can be set to different timezone on init', () => {
-      const streamI18n = new Streami18n({ DateTimeParser: module, timezone: 'Europe/Prague' });
+      const streamI18n = new Streami18n({
+        DateTimeParser: module,
+        timezone: 'Europe/Prague',
+      });
       const date = new Date();
-      expect(streamI18n.tDateTimeParser(date).format('H')).not.toBe(date.getHours().toString());
+      expect(streamI18n.tDateTimeParser(date).format('H')).not.toBe(
+        date.getHours().toString(),
+      );
       expect(streamI18n.tDateTimeParser(date).format('H')).not.toBe(
         (date.getUTCHours() - 2).toString(),
       );
@@ -258,9 +282,14 @@ describe('Streami18n timezone', () => {
       const tz = module.tz;
       delete module.tz;
 
-      const streamI18n = new Streami18n({ DateTimeParser: module, timezone: 'Europe/Prague' });
+      const streamI18n = new Streami18n({
+        DateTimeParser: module,
+        timezone: 'Europe/Prague',
+      });
       const date = new Date();
-      expect(streamI18n.tDateTimeParser(date).format('H')).toBe(date.getHours().toString());
+      expect(streamI18n.tDateTimeParser(date).format('H')).toBe(
+        date.getHours().toString(),
+      );
 
       module.tz = tz;
     });
diff --git a/src/i18n/__tests__/utils.test.js b/src/i18n/__tests__/utils.test.js
index 997d2ba3a..ad08eca77 100644
--- a/src/i18n/__tests__/utils.test.js
+++ b/src/i18n/__tests__/utils.test.js
@@ -202,10 +202,22 @@ describe('getDateString', () => {
   });
   it.each([
     ['all enabled', { calendar: true, calendarFormats: { x: 'y' }, format: 'hh:mm A' }],
-    ['calendar disabled', { calendar: false, calendarFormats: { x: 'y' }, format: 'hh:mm A' }],
-    ['calendar formats omitted', { calendar: true, calendarFormats: undefined, format: 'hh:mm A' }],
-    ['only format provided', { calendar: false, calendarFormats: undefined, format: 'hh:mm A' }],
-    ['format undefined', { calendar: true, calendarFormats: { x: 'y' }, format: undefined }],
+    [
+      'calendar disabled',
+      { calendar: false, calendarFormats: { x: 'y' }, format: 'hh:mm A' },
+    ],
+    [
+      'calendar formats omitted',
+      { calendar: true, calendarFormats: undefined, format: 'hh:mm A' },
+    ],
+    [
+      'only format provided',
+      { calendar: false, calendarFormats: undefined, format: 'hh:mm A' },
+    ],
+    [
+      'format undefined',
+      { calendar: true, calendarFormats: { x: 'y' }, format: undefined },
+    ],
     [
       'calendar disabled and format undefined',
       { calendar: false, calendarFormats: { x: 'y' }, format: undefined },
@@ -218,7 +230,10 @@ describe('getDateString', () => {
       'calendar disabled and rest undefined',
       { calendar: false, calendarFormats: undefined, format: undefined },
     ],
-    ['calendar undefined', { calendar: undefined, calendarFormats: { x: 'y' }, format: 'hh:mm A' }],
+    [
+      'calendar undefined',
+      { calendar: undefined, calendarFormats: { x: 'y' }, format: 'hh:mm A' },
+    ],
     [
       'calendar and calendar formats undefined',
       { calendar: undefined, calendarFormats: undefined, format: 'hh:mm A' },
@@ -227,7 +242,10 @@ describe('getDateString', () => {
       'calendar and format undefined',
       { calendar: undefined, calendarFormats: { x: 'y' }, format: undefined },
     ],
-    ['all undefined', { calendar: undefined, calendarFormats: undefined, format: undefined }],
+    [
+      'all undefined',
+      { calendar: undefined, calendarFormats: undefined, format: undefined },
+    ],
   ])(
     'applies formatting via translation service with translation formatting params %s',
     (_, params) => {
@@ -280,7 +298,9 @@ describe('predefinedFormatters', () => {
         ).toBeFalsy();
       });
       it('should log error parsing invalid calendarFormats', () => {
-        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementationOnce(() => null);
+        const consoleErrorSpy = jest
+          .spyOn(console, 'error')
+          .mockImplementationOnce(() => null);
         timestampFormatter(yesterday, 'en', { calendar: true, calendarFormats: '}' });
         expect(consoleErrorSpy.mock.calls[0][0]).toBe('[TIMESTAMP FORMATTER]');
         expect(
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
index 978fd09cd..99a5a0be8 100644
--- a/src/i18n/utils.ts
+++ b/src/i18n/utils.ts
@@ -16,11 +16,13 @@ export const notValidDateWarning =
 export const noParsingFunctionWarning =
   'MessageTimestamp was called but there is no datetime parsing function available';
 
-export const isNumberOrString = (output: TDateTimeParserOutput): output is number | string =>
-  typeof output === 'string' || typeof output === 'number';
+export const isNumberOrString = (
+  output: TDateTimeParserOutput,
+): output is number | string => typeof output === 'string' || typeof output === 'number';
 
-export const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>
-  !!(output as Dayjs.Dayjs | Moment)?.isSame;
+export const isDayOrMoment = (
+  output: TDateTimeParserOutput,
+): output is Dayjs.Dayjs | Moment => !!(output as Dayjs.Dayjs | Moment)?.isSame;
 
 export const isDate = (output: TDateTimeParserOutput): output is Date =>
   !!(output as Date)?.getMonth;
@@ -91,47 +93,65 @@ export function getDateString({
 }
 
 export const predefinedFormatters: PredefinedFormatters = {
-  timestampFormatter: (streamI18n) => (
-    value,
-    _,
-    {
-      calendarFormats,
-      ...options
-    }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {
-      calendarFormats?: Record<string, string> | string;
-    },
-  ) => {
-    let parsedCalendarFormats;
-    try {
-      if (!options.calendar) {
-        parsedCalendarFormats = {};
-      } else if (typeof calendarFormats === 'string') {
-        parsedCalendarFormats = JSON.parse(calendarFormats);
-      } else if (typeof calendarFormats === 'object') {
-        parsedCalendarFormats = calendarFormats;
+  timestampFormatter:
+    (streamI18n) =>
+    (
+      value,
+      _,
+      {
+        calendarFormats,
+        ...options
+      }: Pick<TimestampFormatterOptions, 'calendar' | 'format'> & {
+        calendarFormats?: Record<string, string> | string;
+      },
+    ) => {
+      let parsedCalendarFormats;
+      try {
+        if (!options.calendar) {
+          parsedCalendarFormats = {};
+        } else if (typeof calendarFormats === 'string') {
+          parsedCalendarFormats = JSON.parse(calendarFormats);
+        } else if (typeof calendarFormats === 'object') {
+          parsedCalendarFormats = calendarFormats;
+        }
+      } catch (e) {
+        console.error('[TIMESTAMP FORMATTER]', e);
       }
-    } catch (e) {
-      console.error('[TIMESTAMP FORMATTER]', e);
-    }
 
-    const result = getDateString({
-      ...options,
-      calendarFormats: parsedCalendarFormats,
-      messageCreatedAt: value,
-      tDateTimeParser: streamI18n.tDateTimeParser,
-    });
-    if (!result || typeof result === 'number') {
-      return JSON.stringify(value);
-    }
-    return result;
-  },
+      const result = getDateString({
+        ...options,
+        calendarFormats: parsedCalendarFormats,
+        messageCreatedAt: value,
+        tDateTimeParser: streamI18n.tDateTimeParser,
+      });
+      if (!result || typeof result === 'number') {
+        return JSON.stringify(value);
+      }
+      return result;
+    },
 };
 
-export const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) => key;
+export const defaultTranslatorFunction: TFunction = <tResult = string>(key: tResult) =>
+  key;
 
 export const defaultDateTimeParser = (input?: TDateTimeParserInput) => Dayjs(input);
 
-export const isLanguageSupported = (language: string): language is SupportedTranslations => {
-  const translations = ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'ko', 'nl', 'pt', 'ru', 'tr'];
+export const isLanguageSupported = (
+  language: string,
+): language is SupportedTranslations => {
+  const translations = [
+    'de',
+    'en',
+    'es',
+    'fr',
+    'hi',
+    'it',
+    'ja',
+    'ko',
+    'nl',
+    'pt',
+    'ru',
+    'tr',
+  ];
   return translations.some((translation) => language === translation);
 };
diff --git a/src/mock-builders/__test__/translator.test.js b/src/mock-builders/__test__/translator.test.js
index aca34cb26..fcfd63b3b 100644
--- a/src/mock-builders/__test__/translator.test.js
+++ b/src/mock-builders/__test__/translator.test.js
@@ -10,11 +10,14 @@ describe('mockTranslatorFunction', () => {
     expect(result).toStrictEqual('test');
   });
   it('inserts multiple param values', () => {
-    const result = mockTranslatorFunction('{{ testKey1 }}, {{ testKey2 }}, and {{ testKey3 }}', {
-      testKey1: 'test1',
-      testKey2: 'test2',
-      testKey3: 'test3',
-    });
+    const result = mockTranslatorFunction(
+      '{{ testKey1 }}, {{ testKey2 }}, and {{ testKey3 }}',
+      {
+        testKey1: 'test1',
+        testKey2: 'test2',
+        testKey3: 'test3',
+      },
+    );
     expect(result).toStrictEqual('test1, test2, and test3');
   });
 });
diff --git a/src/mock-builders/api/index.js b/src/mock-builders/api/index.js
index f0b13293c..46ecaf4fc 100644
--- a/src/mock-builders/api/index.js
+++ b/src/mock-builders/api/index.js
@@ -9,7 +9,10 @@
  */
 export const useMockedApis = (client, apiResponses) => {
   apiResponses.forEach(({ response, type }) => {
-    jest.spyOn(client.axiosInstance, type).mockImplementation().mockResolvedValue(response);
+    jest
+      .spyOn(client.axiosInstance, type)
+      .mockImplementation()
+      .mockResolvedValue(response);
   });
 };
 
diff --git a/src/mock-builders/generator/attachment.js b/src/mock-builders/generator/attachment.js
index 21611da0f..1516483b4 100644
--- a/src/mock-builders/generator/attachment.js
+++ b/src/mock-builders/generator/attachment.js
@@ -45,7 +45,7 @@ export const generateLocalImageUploadAttachmentData = (overrides, attachmentData
     ...generateLocalFileUploadAttachmentData().localMetadata,
     previewUri: 'image-preview-uri',
     ...overrides,
-    // eslint-disable-next-line sort-keys
+
     file: generateImageFile(overrides?.file ?? {}),
   },
   type: 'image',
@@ -69,7 +69,8 @@ export const generateImageAttachment = (a) => ({
 });
 
 export const generateVideoAttachment = (a) => ({
-  asset_url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  asset_url:
+    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   file_size: 2930530,
   mime_type: 'video/mp4',
   thumb_url: 'thumb_url',
@@ -96,106 +97,31 @@ export const generateVoiceRecordingAttachment = (a) => ({
   title: 'audio_recording_Mon Feb 05 16:21:34 PST 2024.aac',
   type: 'voiceRecording',
   waveform_data: [
-    0.3139950633049011,
-    0.24018539488315582,
-    0.27728691697120667,
-    0.2946733236312866,
-    0.18365363776683807,
-    0.4870237708091736,
-    0.5902017951011658,
-    0.43630164861679077,
-    0.4746025502681732,
-    0.2663217782974243,
-    0.7870231866836548,
-    0.6237155795097351,
-    0.36374375224113464,
-    0.2663217782974243,
-    0.6613287329673767,
-    0.8278987407684326,
-    0.1516059935092926,
-    0.37934044003486633,
-    0.5281689167022705,
-    0.47579875588417053,
-    0.48600485920906067,
-    0.6229274868965149,
-    0.4964161813259125,
-    0.4377916753292084,
-    0.5569855570793152,
-    0.5540405511856079,
-    0.4095909595489502,
-    0.747698187828064,
-    0.8532787561416626,
-    0.6344320178031921,
-    0.5756412744522095,
-    0.529367208480835,
-    0.8330334424972534,
-    0.8681668043136597,
-    0.6670080423355103,
-    0.7732296586036682,
-    0.7542996406555176,
-    0.6666833758354187,
-    0.4648399353027344,
-    0.4689463675022125,
-    0.515621542930603,
-    0.7782987952232361,
-    0.6618493795394897,
-    0.6291788220405579,
-    0.7447969317436218,
-    0.7329777479171753,
-    0.7156173586845398,
-    0.8810608386993408,
-    0.07107513397932053,
-    0.07438423484563828,
-    0.08600494265556335,
-    0.1429901123046875,
-    0.059566497802734375,
-    0.032375335693359375,
-    0.14445610344409943,
-    0.9534039497375488,
-    0.8612125515937805,
-    0.4861070513725281,
-    0.5025619864463806,
-    0.3678266108036041,
-    0.5829864144325256,
-    0.6209651231765747,
-    0.6576777696609497,
-    0.6046710014343262,
-    0.08803673088550568,
-    0.492523193359375,
-    0.1947961449623108,
-    0.09975242614746094,
-    0.03940269351005554,
-    0.372602641582489,
-    0.4425804913043976,
-    0.6269233226776123,
-    0.7768490314483643,
-    0.41689178347587585,
-    0.18697471916675568,
-    0.11767738312482834,
-    0.049776915460824966,
-    0.1377594769001007,
-    0.08291183412075043,
-    0.05717025697231293,
-    0.01960846036672592,
-    0.04073379561305046,
-    0.2909153699874878,
-    0.2615521252155304,
-    0.1473514586687088,
-    0.8678494095802307,
-    0.9467474222183228,
-    0.7687522768974304,
-    0.8469597101211548,
-    0.6312726736068726,
-    0.5455475449562073,
-    0.8171653747558594,
-    0.7835009694099426,
-    0.6183612942695618,
-    0.7298175692558289,
-    0.6681936383247375,
-    0.815593957901001,
-    0.7774609327316284,
-    0.8033567070960999,
-    0.8980446457862854,
+    0.3139950633049011, 0.24018539488315582, 0.27728691697120667, 0.2946733236312866,
+    0.18365363776683807, 0.4870237708091736, 0.5902017951011658, 0.43630164861679077,
+    0.4746025502681732, 0.2663217782974243, 0.7870231866836548, 0.6237155795097351,
+    0.36374375224113464, 0.2663217782974243, 0.6613287329673767, 0.8278987407684326,
+    0.1516059935092926, 0.37934044003486633, 0.5281689167022705, 0.47579875588417053,
+    0.48600485920906067, 0.6229274868965149, 0.4964161813259125, 0.4377916753292084,
+    0.5569855570793152, 0.5540405511856079, 0.4095909595489502, 0.747698187828064,
+    0.8532787561416626, 0.6344320178031921, 0.5756412744522095, 0.529367208480835,
+    0.8330334424972534, 0.8681668043136597, 0.6670080423355103, 0.7732296586036682,
+    0.7542996406555176, 0.6666833758354187, 0.4648399353027344, 0.4689463675022125,
+    0.515621542930603, 0.7782987952232361, 0.6618493795394897, 0.6291788220405579,
+    0.7447969317436218, 0.7329777479171753, 0.7156173586845398, 0.8810608386993408,
+    0.07107513397932053, 0.07438423484563828, 0.08600494265556335, 0.1429901123046875,
+    0.059566497802734375, 0.032375335693359375, 0.14445610344409943, 0.9534039497375488,
+    0.8612125515937805, 0.4861070513725281, 0.5025619864463806, 0.3678266108036041,
+    0.5829864144325256, 0.6209651231765747, 0.6576777696609497, 0.6046710014343262,
+    0.08803673088550568, 0.492523193359375, 0.1947961449623108, 0.09975242614746094,
+    0.03940269351005554, 0.372602641582489, 0.4425804913043976, 0.6269233226776123,
+    0.7768490314483643, 0.41689178347587585, 0.18697471916675568, 0.11767738312482834,
+    0.049776915460824966, 0.1377594769001007, 0.08291183412075043, 0.05717025697231293,
+    0.01960846036672592, 0.04073379561305046, 0.2909153699874878, 0.2615521252155304,
+    0.1473514586687088, 0.8678494095802307, 0.9467474222183228, 0.7687522768974304,
+    0.8469597101211548, 0.6312726736068726, 0.5455475449562073, 0.8171653747558594,
+    0.7835009694099426, 0.6183612942695618, 0.7298175692558289, 0.6681936383247375,
+    0.815593957901001, 0.7774609327316284, 0.8033567070960999, 0.8980446457862854,
   ],
   ...a,
 });
@@ -251,56 +177,49 @@ export const generateGiphyAttachment = (a) => ({
       frames: '',
       height: '200',
       size: '445149',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200.gif&ct=g',
       width: '200',
     },
     fixed_height_downsampled: {
       frames: '',
       height: '200',
       size: '148168',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200_d.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200_d.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200_d.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200_d.gif&ct=g',
       width: '200',
     },
     fixed_height_still: {
       frames: '',
       height: '200',
       size: '23240',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200_s.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200_s.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200_s.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200_s.gif&ct=g',
       width: '200',
     },
     fixed_width: {
       frames: '',
       height: '200',
       size: '445149',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w.gif&ct=g',
       width: '200',
     },
     fixed_width_downsampled: {
       frames: '',
       height: '200',
       size: '148168',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w_d.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w_d.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w_d.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w_d.gif&ct=g',
       width: '200',
     },
     fixed_width_still: {
       frames: '',
       height: '200',
       size: '23240',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w_s.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w_s.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/200w_s.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=200w_s.gif&ct=g',
       width: '200',
     },
     original: {
       frames: '20',
       height: '400',
       size: '1308571',
-      url:
-        'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/giphy.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=giphy.gif&ct=g',
+      url: 'https://media2.giphy.com/media/j5L4RHeV8Q5tmepRVb/giphy.gif?cid=c4b03675kgziudvt7s9990i28hp8zpffi4oyem1snvl7sfvl&rid=giphy.gif&ct=g',
       width: '400',
     },
   },
diff --git a/src/mock-builders/generator/channel.js b/src/mock-builders/generator/channel.js
index 15fd6d405..035c768e7 100644
--- a/src/mock-builders/generator/channel.js
+++ b/src/mock-builders/generator/channel.js
@@ -12,10 +12,10 @@ export const generateChannel = (options = { channel: {} }) => {
     messages: [],
     pinnedMessages: [],
     ...optionsBesidesChannel,
-    // eslint-disable-next-line sort-keys
+
     channel: {
       cid: `${type}:${id}`,
-      // eslint-disable-next-line sort-keys
+
       config: {
         automod: 'disabled',
         automod_behavior: 'flag',
diff --git a/src/mock-builders/index.js b/src/mock-builders/index.js
index ada1049fc..bad58123f 100644
--- a/src/mock-builders/index.js
+++ b/src/mock-builders/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 /* eslint-disable no-underscore-dangle */
 import { StreamChat } from 'stream-chat';
 import { nanoid } from 'nanoid';
diff --git a/src/mock-builders/utils.js b/src/mock-builders/utils.js
index 5cc6e61bb..78ef4b2d1 100644
--- a/src/mock-builders/utils.js
+++ b/src/mock-builders/utils.js
@@ -1,4 +1,9 @@
-import { generateChannel, generateMember, generateMessage, generateUser } from './generator';
+import {
+  generateChannel,
+  generateMember,
+  generateMessage,
+  generateUser,
+} from './generator';
 import { getOrCreateChannelApi, getTestClientWithUser, useMockedApis } from './index';
 
 export async function createClientWithChannel(
@@ -45,11 +50,15 @@ export const initClientWithChannels = async ({ channelsData, customUser } = {})
         ...channelData,
       });
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       useMockedApis(client, [getOrCreateChannelApi(mockedChannelData)]);
-      const channel = client.channel(mockedChannelData.channel.type, mockedChannelData.channel.id);
+      const channel = client.channel(
+        mockedChannelData.channel.type,
+        mockedChannelData.channel.id,
+      );
       await channel.watch();
-      jest.spyOn(channel, 'getConfig').mockImplementation(() => mockedChannelData.channel.config);
+      jest
+        .spyOn(channel, 'getConfig')
+        .mockImplementation(() => mockedChannelData.channel.config);
       return channel;
     }),
   );
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index bc928dac6..0915c3975 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -37,7 +37,9 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
   const { t } = useTranslationContext('EmojiPicker');
   const { insertText, textareaRef } = useMessageInputContext('EmojiPicker');
   const [displayPicker, setDisplayPicker] = useState(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(
+    null,
+  );
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const { attributes, styles } = usePopper(referenceElement, popperElement, {
     placement: 'top-end',
diff --git a/src/plugins/encoders/mp3.ts b/src/plugins/encoders/mp3.ts
index 749e75568..adcc82c2a 100644
--- a/src/plugins/encoders/mp3.ts
+++ b/src/plugins/encoders/mp3.ts
@@ -19,9 +19,9 @@ const float32ArrayToInt16Array = (float32Arr: Float32Array) => {
 };
 
 const splitDataByChannel = (audioBuffer: AudioBuffer) =>
-  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) => audioBuffer.getChannelData(i)).map(
-    float32ArrayToInt16Array,
-  );
+  Array.from({ length: audioBuffer.numberOfChannels }, (_, i) =>
+    audioBuffer.getChannelData(i),
+  ).map(float32ArrayToInt16Array);
 
 export async function encodeToMp3(file: File, sampleRate: number) {
   const lameJs = await import('@breezystack/lamejs');
@@ -40,7 +40,9 @@ export async function encodeToMp3(file: File, sampleRate: number) {
     const [leftChannelBlock, rightChannelBlock] = dataByChannel.map((channel) =>
       channel.subarray(i, i + COUNT_SAMPLES_PER_ENCODED_BLOCK),
     );
-    dataBuffer.push(new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)));
+    dataBuffer.push(
+      new Int8Array(mp3Encoder.encodeBuffer(leftChannelBlock, rightChannelBlock)),
+    );
     remaining -= COUNT_SAMPLES_PER_ENCODED_BLOCK;
   }
 
diff --git a/src/store/hooks/useStateStore.ts b/src/store/hooks/useStateStore.ts
index 0e2b09c51..a74bfe9d1 100644
--- a/src/store/hooks/useStateStore.ts
+++ b/src/store/hooks/useStateStore.ts
@@ -4,15 +4,15 @@ import type { StateStore } from 'stream-chat';
 
 export function useStateStore<
   T extends Record<string, unknown>,
-  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>
+  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
 >(store: StateStore<T>, selector: (v: T) => O): O;
 export function useStateStore<
   T extends Record<string, unknown>,
-  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>
+  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
 >(store: StateStore<T> | undefined, selector: (v: T) => O): O | undefined;
 export function useStateStore<
   T extends Record<string, unknown>,
-  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>
+  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
 >(store: StateStore<T> | undefined, selector: (v: T) => O) {
   const [state, setState] = useState<O | undefined>(() => {
     if (!store) return undefined;
diff --git a/src/stories/add-message.stories.tsx b/src/stories/add-message.stories.tsx
index 8fa43a6db..4548d08a0 100644
--- a/src/stories/add-message.stories.tsx
+++ b/src/stories/add-message.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import type { ChannelSort } from 'stream-chat';
 import {
@@ -42,7 +41,10 @@ const Controls = () => {
 // Sort in reverse order to avoid auto-selecting unread channel
 const sort: ChannelSort = { last_updated: 1 };
 
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <ConnectedUser token={token} userId={userId}>
     <ChannelList
       filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }}
diff --git a/src/stories/attachment-sizing.stories.tsx b/src/stories/attachment-sizing.stories.tsx
index 437a66a51..be9236ff6 100644
--- a/src/stories/attachment-sizing.stories.tsx
+++ b/src/stories/attachment-sizing.stories.tsx
@@ -140,7 +140,10 @@ const OtherUserControls = () => {
         <div style={{ display: 'none' }}>
           <ChannelList
             customActiveChannel={channelId}
-            filters={{ id: { $eq: channelId }, members: { $in: [theOtherUserCredentials.userId] } }}
+            filters={{
+              id: { $eq: channelId },
+              members: { $in: [theOtherUserCredentials.userId] },
+            }}
             setActiveChannelOnMount={true}
             sort={sort}
           />
@@ -157,7 +160,10 @@ const OtherUserControls = () => {
   );
 };
 
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <div style={{ display: 'flex', flexDirection: 'column' }}>
     {/* FIXME: temporary fix for screenshot tests */}
     <style>{`
diff --git a/src/stories/edit-message.stories.tsx b/src/stories/edit-message.stories.tsx
index 88789916a..84c86565c 100644
--- a/src/stories/edit-message.stories.tsx
+++ b/src/stories/edit-message.stories.tsx
@@ -35,8 +35,7 @@ const Controls = () => {
                 type: 'image',
               },
             ],
-            text:
-              'chat: https://getstream.io/chat/\nactivity-feeds: https://getstream.io/activity-feeds/',
+            text: 'chat: https://getstream.io/chat/\nactivity-feeds: https://getstream.io/activity-feeds/',
           })
         }
       >
@@ -49,7 +48,10 @@ const Controls = () => {
 // Sort in reverse order to avoid auto-selecting unread channel
 const sort: ChannelSort = { last_updated: 1 };
 
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <ConnectedUser token={token} userId={userId}>
     <ChannelList
       filters={{ id: { $eq: 'edit-message-channel' }, members: { $in: [userId] } }}
diff --git a/src/stories/hello.stories.tsx b/src/stories/hello.stories.tsx
index d818817a0..179025d8a 100644
--- a/src/stories/hello.stories.tsx
+++ b/src/stories/hello.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import {
diff --git a/src/stories/jump-to-message.stories.tsx b/src/stories/jump-to-message.stories.tsx
index 2a06a4ee9..86d0094d9 100644
--- a/src/stories/jump-to-message.stories.tsx
+++ b/src/stories/jump-to-message.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import {
   Channel,
diff --git a/src/stories/mark-read.stories.tsx b/src/stories/mark-read.stories.tsx
index a6349e3fd..a7db536e6 100644
--- a/src/stories/mark-read.stories.tsx
+++ b/src/stories/mark-read.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import type { ChannelSort } from 'stream-chat';
 import { nanoid } from 'nanoid';
@@ -42,7 +41,10 @@ const Controls = () => {
 // Sort in reverse order to avoid auto-selecting unread channel
 const sort: ChannelSort = { last_updated: 1 };
 
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <ConnectedUser token={token} userId={userId}>
     <ChannelList
       filters={{ members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }}
diff --git a/src/stories/message-status-readby-tooltip.stories.tsx b/src/stories/message-status-readby-tooltip.stories.tsx
index cc8878a63..de315d197 100644
--- a/src/stories/message-status-readby-tooltip.stories.tsx
+++ b/src/stories/message-status-readby-tooltip.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback } from 'react';
 import type { ChannelSort } from 'stream-chat';
 import {
@@ -29,9 +28,15 @@ const CustomMessageStatus = (props: MessageStatusProps) => {
 
 // Sort in reverse order to avoid auto-selecting unread channel
 const sort: ChannelSort = { last_updated: 1 };
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <ConnectedUser token={token} userId={userId}>
-    <ChannelList filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }} sort={sort} />
+    <ChannelList
+      filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }}
+      sort={sort}
+    />
     <Channel MessageStatus={CustomMessageStatus}>
       <Window>
         <ChannelHeader />
diff --git a/src/stories/navigate-long-message-lists.stories.tsx b/src/stories/navigate-long-message-lists.stories.tsx
index ac1c47871..7a31a0de8 100644
--- a/src/stories/navigate-long-message-lists.stories.tsx
+++ b/src/stories/navigate-long-message-lists.stories.tsx
@@ -140,7 +140,10 @@ const OtherUserControls = () => {
         <div style={{ display: 'none' }}>
           <ChannelList
             customActiveChannel={channelId}
-            filters={{ id: { $eq: channelId }, members: { $in: [theOtherUserCredentials.userId] } }}
+            filters={{
+              id: { $eq: channelId },
+              members: { $in: [theOtherUserCredentials.userId] },
+            }}
             setActiveChannelOnMount={true}
             sort={sort}
           />
@@ -157,7 +160,10 @@ const OtherUserControls = () => {
   );
 };
 
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => (
   <div style={{ display: 'flex', flexDirection: 'column' }}>
     {/* FIXME: temporary fix for screenshot tests */}
     <style>{`
diff --git a/src/stories/pin-message.stories.tsx b/src/stories/pin-message.stories.tsx
index a41b5318e..fb7027a83 100644
--- a/src/stories/pin-message.stories.tsx
+++ b/src/stories/pin-message.stories.tsx
@@ -18,9 +18,7 @@ const PinnedMessagesList = () => {
 
   return (
     <ul data-testid='pinned-messages-list'>
-      {pinnedMessages?.map((pm) => (
-        <li key={pm.id}>{pm.text}</li>
-      ))}
+      {pinnedMessages?.map((pm) => <li key={pm.id}>{pm.text}</li>)}
     </ul>
   );
 };
diff --git a/src/stories/toggle-message-actions.stories.tsx b/src/stories/toggle-message-actions.stories.tsx
index 1550e0f81..9d2becb77 100644
--- a/src/stories/toggle-message-actions.stories.tsx
+++ b/src/stories/toggle-message-actions.stories.tsx
@@ -12,7 +12,10 @@ import {
 } from '../components';
 
 const allActions = Object.keys(MESSAGE_ACTIONS);
-const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => {
+const WrappedConnectedUser = ({
+  token,
+  userId,
+}: Omit<ConnectedUserProps, 'children'>) => {
   const [messageActions, setMessageActions] = useState<MessageActionsArray>(allActions);
   return (
     <ConnectedUser token={token} userId={userId}>
@@ -32,7 +35,10 @@ const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'child
             <button onClick={() => setMessageActions(['edit', 'react'])} type='button'>
               edit, react
             </button>
-            <button onClick={() => setMessageActions(['edit', 'react', 'reply'])} type='button'>
+            <button
+              onClick={() => setMessageActions(['edit', 'react', 'reply'])}
+              type='button'
+            >
               edit, react, reply
             </button>
             <button onClick={() => setMessageActions([])} type='button'>
diff --git a/src/stories/utils.tsx b/src/stories/utils.tsx
index 226baf2a4..24712dedc 100644
--- a/src/stories/utils.tsx
+++ b/src/stories/utils.tsx
@@ -83,7 +83,8 @@ export const ConnectedUser = <SCG extends DefaultGenerics = StreamChatGenerics>(
     userData: { id: userId },
   });
 
-  if (!client) return <p>Waiting for connection to be established with user: {userId}...</p>;
+  if (!client)
+    return <p>Waiting for connection to be established with user: {userId}...</p>;
 
   return (
     <>
diff --git a/src/types/types.ts b/src/types/types.ts
index 636bbc342..b25dac85c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -41,7 +41,7 @@ export type DefaultChannelType = UnknownType & {
 };
 
 export type DefaultMessageType<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = UnknownType & {
   customType?: CustomMessageType;
   date?: string | Date;
@@ -57,7 +57,7 @@ export type DefaultUserTypeInternal = {
 };
 
 export type DefaultUserType<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = UnknownType &
   DefaultUserTypeInternal & {
     mutes?: Array<Mute<StreamChatGenerics>>;
@@ -135,7 +135,7 @@ export type VideoAttachmentSizeHandler = (
 ) => VideoAttachmentConfiguration;
 
 export type ChannelUnreadUiState<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<ValuesType<StreamChannelState<StreamChatGenerics>['read']>, 'user'>;
 
 // todo: fix export from stream-chat - for some reason not exported
diff --git a/src/utils/__tests__/getChannel.test.js b/src/utils/__tests__/getChannel.test.js
index 89f82f865..e1ac7b642 100644
--- a/src/utils/__tests__/getChannel.test.js
+++ b/src/utils/__tests__/getChannel.test.js
@@ -11,7 +11,10 @@ import {
 let client;
 const channelData = generateChannel({
   channel: {
-    members: [generateMember({ user: generateUser() }), generateMember({ user: generateUser() })],
+    members: [
+      generateMember({ user: generateUser() }),
+      generateMember({ user: generateUser() }),
+    ],
   },
 });
 const memberIds = channelData.channel.members.map((m) => m.user_id);
diff --git a/src/utils/getChannel.ts b/src/utils/getChannel.ts
index d47784ada..3376218cb 100644
--- a/src/utils/getChannel.ts
+++ b/src/utils/getChannel.ts
@@ -16,7 +16,7 @@ const WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL: Record<
 > = {};
 
 type GetChannelParams<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   client: StreamChat<StreamChatGenerics>;
   channel?: Channel<StreamChatGenerics>;
@@ -35,7 +35,7 @@ type GetChannelParams<
  * @param channel
  */
 export const getChannel = async <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   client,
@@ -56,11 +56,13 @@ export const getChannel = async <
   const originalCid = theChannel?.id
     ? theChannel.cid
     : members && members.length
-    ? generateChannelTempCid(theChannel.type, members)
-    : undefined;
+      ? generateChannelTempCid(theChannel.type, members)
+      : undefined;
 
   if (!originalCid) {
-    throw new Error('Channel ID or channel members array have to be provided to query a channel.');
+    throw new Error(
+      'Channel ID or channel members array have to be provided to query a channel.',
+    );
   }
 
   const queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];