stream-chat-react-native-core 9.0.0-beta.30 → 9.0.0-beta.32

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -11,6 +11,7 @@ import { useFetchReactions } from './hooks/useFetchReactions';
 import { ReactionButton } from './ReactionButton';
 
 import { useBottomSheetContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -39,12 +40,7 @@ const getItemLayout = (_, index: number) => ({
   index,
 });
 
-export type MessageUserReactionsProps = Partial<
-  Pick<
-    MessagesContextValue,
-    'MessageUserReactionsAvatar' | 'MessageUserReactionsItem' | 'supportedReactions'
-  >
-> &
+export type MessageUserReactionsProps = Partial<Pick<MessagesContextValue, 'supportedReactions'>> &
   Partial<Pick<MessageContextValue, 'message'>> & {
     /**
      * An array of reactions
@@ -99,13 +95,7 @@ const reactionSelectorKeyExtractor = (item: ReactionSelectorItemType) => item.ty
 export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const styles = useStyles();
   const [showMoreReactions, setShowMoreReactions] = useState(false);
-  const {
-    message,
-    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
-    MessageUserReactionsItem: propMessageUserReactionsItem,
-    reactions: propReactions,
-    supportedReactions: propSupportedReactions,
-  } = props;
+  const { message, reactions: propReactions, supportedReactions: propSupportedReactions } = props;
   const selectorListRef = useRef<FlatList>(null);
   const { close } = useBottomSheetContext();
   const reactionTypes = useMemo(
@@ -113,16 +103,10 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     [message?.reaction_groups],
   );
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
-  const {
-    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
-    MessageUserReactionsItem: contextMessageUserReactionsItem,
-    supportedReactions: contextSupportedReactions,
-  } = useMessagesContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const { MessageUserReactionsItem } = useComponentsContext();
   const { handleReaction } = useMessageContext();
   const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
-  const MessageUserReactionsAvatar =
-    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
-  const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
 
   const onSelectReaction = useStableCallback((reactionType: string) => {
     setSelectedReaction((currentReaction) =>
@@ -225,13 +209,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 
   const renderItem = useCallback(
     ({ item }: { item: Reaction }) => (
-      <MessageUserReactionsItem
-        MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-        reaction={item}
-        supportedReactions={supportedReactions ?? []}
-      />
+      <MessageUserReactionsItem reaction={item} supportedReactions={supportedReactions ?? []} />
     ),
-    [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
+    [MessageUserReactionsItem, supportedReactions],
   );
 
   const handleSelectReaction = useStableCallback((emoji: string) => {

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -4,7 +4,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useMessageContext } from '../../contexts';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
@@ -14,10 +14,7 @@ import { primitives } from '../../theme';
 import type { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 
-export type MessageUserReactionsItemProps = Pick<
-  MessagesContextValue,
-  'MessageUserReactionsAvatar'
-> & {
+export type MessageUserReactionsItemProps = {
   /**
    * The reaction object
    */
@@ -29,10 +26,10 @@ export type MessageUserReactionsItemProps = Pick<
 };
 
 export const MessageUserReactionsItem = ({
-  MessageUserReactionsAvatar,
   reaction,
   supportedReactions,
 }: MessageUserReactionsItemProps) => {
+  const { MessageUserReactionsAvatar } = useComponentsContext();
   const { id, name, type } = reaction;
   const {
     theme: {

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -6,6 +6,7 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import { LocalMessage, ReactionResponse } from 'stream-chat';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessagesContextValue,
   MessagesProvider,
@@ -42,18 +43,18 @@ const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-        <MessagesProvider
-          value={
-            {
-              MessageUserReactionsAvatar: () => null,
-              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-              ),
-            } as unknown as MessagesContextValue
-          }
+        <WithComponents
+          overrides={{
+            MessageUserReactionsAvatar: () => null,
+            MessageUserReactionsItem: (itemProps: MessageUserReactionsItemProps) => (
+              <Text>{itemProps.reaction.id + ' ' + itemProps.reaction.type}</Text>
+            ),
+          }}
         >
-          <MessageUserReactions {...defaultProps} {...props} />
-        </MessagesProvider>
+          <MessagesProvider value={{} as unknown as MessagesContextValue}>
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </WithComponents>
       </TranslationProvider>
     </ThemeProvider>,
   );

package/src/components/Poll/CreatePollContent.tsx

@@ -16,14 +16,15 @@ import {
   CreatePollModalState,
   CreatePollContentContextValue,
   CreatePollContentProvider,
-  InputMessageInputContextValue,
   useCreatePollContentContext,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
+import { useRtlMirrorSwitchStyle } from '../../utils/rtlMirrorSwitchStyle';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
   options: state.data.options,
@@ -211,14 +212,13 @@ export const CreatePollContent = () => {
 
 export const CreatePoll = ({
   closePollCreationDialog,
-  CreatePollContent: CreatePollContentOverride,
   createPollOptionGap = 8,
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
   'createPollOptionGap' | 'closePollCreationDialog' | 'sendMessage'
-> &
-  Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
+>) => {
+  const { CreatePollContent: CreatePollContentOverride } = useComponentsContext();
   const messageComposer = useMessageComposer();
   const [modalStateStore] = useState(
     () => new StateStore<CreatePollModalState>({ isClosing: false }),
@@ -277,6 +277,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
   return useMemo(() => {
     return StyleSheet.create({
       scrollView: {
@@ -320,7 +321,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: { width: 64 },
+      optionCardSwitch: { width: 64, ...rtlMirrorSwitchStyle },
     });
-  }, [semantics]);
+  }, [rtlMirrorSwitchStyle, semantics]);
 };

package/src/components/Poll/Poll.tsx

@@ -3,28 +3,24 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PollOption as PollOptionClass } from 'stream-chat';
 
-import { PollButtons, PollOption, ShowAllOptionsButton } from './components';
+import { PollOption, ShowAllOptionsButton } from './components';
 
 import { usePollState } from './hooks/usePollState';
 
 import {
-  MessagesContextValue,
   PollContextProvider,
   PollContextValue,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../theme';
 import { defaultPollOptionCount } from '../../utils/constants';
 
-export type PollProps = Pick<PollContextValue, 'poll' | 'message'> &
-  Pick<MessagesContextValue, 'PollContent'>;
+export type PollProps = Pick<PollContextValue, 'poll' | 'message'>;
 
-export type PollContentProps = {
-  PollButtons?: React.ComponentType;
-  PollHeader?: React.ComponentType;
-};
+export type PollContentProps = Record<string, never>;
 
 export const PollHeader = () => {
   const styles = useStyles();
@@ -60,12 +56,11 @@ export const PollHeader = () => {
   );
 };
 
-export const PollContent = ({
-  PollButtons: PollButtonsOverride,
-  PollHeader: PollHeaderOverride,
-}: PollContentProps) => {
+export const PollContent = () => {
   const { options } = usePollState();
   const styles = useStyles();
+  const { PollButtons: PollButtonsComponent, PollHeader: PollHeaderComponent } =
+    useComponentsContext();
 
   const {
     theme: {
@@ -77,7 +72,7 @@ export const PollContent = ({
 
   return (
     <View style={[styles.container, container]}>
-      {PollHeaderOverride ? <PollHeaderOverride /> : <PollHeader />}
+      <PollHeaderComponent />
       <View style={[styles.optionsWrapper, optionsWrapper]}>
         {options
           ?.slice(0, defaultPollOptionCount)
@@ -86,21 +81,24 @@ export const PollContent = ({
           ))}
         <ShowAllOptionsButton />
       </View>
-      {PollButtonsOverride ? <PollButtonsOverride /> : <PollButtons />}
+      <PollButtonsComponent />
     </View>
   );
 };
 
-export const Poll = ({ message, poll, PollContent: PollContentOverride }: PollProps) => (
-  <PollContextProvider
-    value={{
-      message,
-      poll,
-    }}
-  >
-    {PollContentOverride ? <PollContentOverride /> : <PollContent />}
-  </PollContextProvider>
-);
+export const Poll = ({ message, poll }: PollProps) => {
+  const { PollContent: PollContentOverride } = useComponentsContext();
+  return (
+    <PollContextProvider
+      value={{
+        message,
+        poll,
+      }}
+    >
+      {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -8,7 +8,7 @@ import { MultipleVotesSettings } from './MultipleVotesSettings';
 import { useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { primitives } from '../../../theme';
-
+import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 export const MultipleAnswersField = () => {
   const [allowMultipleVotes, setAllowMultipleVotes] = useState<boolean>(false);
   const { t } = useTranslationContext();
@@ -61,6 +61,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
   return useMemo(() => {
     return StyleSheet.create({
       multipleAnswersWrapper: {
@@ -93,7 +94,7 @@ const useStyles = () => {
         justifyContent: 'space-between',
         flexDirection: 'row',
       },
-      optionCardSwitch: { width: 64 },
+      optionCardSwitch: { width: 64, ...rtlMirrorSwitchStyle },
     });
-  }, [semantics]);
+  }, [rtlMirrorSwitchStyle, semantics]);
 };

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -11,6 +11,7 @@ import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Minus, Plus } from '../../../icons';
 import { primitives } from '../../../theme';
+import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 import { Button } from '../../ui';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
@@ -194,6 +195,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const rtlMirrorSwitchStyle = useRtlMirrorSwitchStyle();
 
   return useMemo(() => {
     return StyleSheet.create({
@@ -221,7 +223,7 @@ const useStyles = () => {
         justifyContent: 'space-between',
         flexDirection: 'row',
       },
-      optionCardSwitch: { width: 64 },
+      optionCardSwitch: { width: 64, ...rtlMirrorSwitchStyle },
       settingsWrapper: {
         gap: primitives.spacingMd,
       },
@@ -244,5 +246,5 @@ const useStyles = () => {
         borderColor: semantics.borderUtilityDisabledOnSurface,
       },
     });
-  }, [semantics]);
+  }, [rtlMirrorSwitchStyle, semantics]);
 };

package/src/components/Poll/components/PollAnswersList.tsx

@@ -14,6 +14,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui';
@@ -64,7 +65,6 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
 
 export type PollAnswersListProps = PollContextValue & {
   additionalFlatListProps?: Partial<FlatListProps<PollAnswer>>;
-  PollAnswersListContent?: React.ComponentType;
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
@@ -157,16 +157,14 @@ export const PollAnswersList = ({
   additionalFlatListProps,
   message,
   poll,
-  PollAnswersListContent: PollAnswersListOverride,
-}: PollAnswersListProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAnswersListOverride ? (
-      <PollAnswersListOverride />
-    ) : (
-      <PollAnswersListContent additionalFlatListProps={additionalFlatListProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAnswersListProps) => {
+  const { PollAnswersListContent: PollAnswersListContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAnswersListContentComponent additionalFlatListProps={additionalFlatListProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollInputDialog.tsx

@@ -144,6 +144,7 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightMedium,
           lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
         },
         transparentContainer: {
           alignItems: 'center',

package/src/components/Poll/components/PollOption.tsx

@@ -16,6 +16,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
@@ -32,7 +33,6 @@ export type PollOptionProps = {
 
 export type PollAllOptionsContentProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollAllOptionsContent?: React.ComponentType;
 };
 
 export const PollAllOptionsContent = ({
@@ -75,16 +75,14 @@ export const PollAllOptions = ({
   additionalScrollViewProps,
   message,
   poll,
-  PollAllOptionsContent: PollAllOptionsContentOverride,
-}: PollAllOptionsContentProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAllOptionsContentOverride ? (
-      <PollAllOptionsContentOverride />
-    ) : (
-      <PollAllOptionsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAllOptionsContentProps) => {
+  const { PollAllOptionsContent: PollAllOptionsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAllOptionsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
@@ -19,7 +20,6 @@ import { usePollState } from '../../hooks/usePollState';
 export type PollOptionFullResultsProps = PollContextValue & {
   option: PollOption;
   additionalFlatListProps?: Partial<FlatListProps<PollVoteClass>>;
-  PollOptionFullResultsContent?: React.ComponentType<{ option: PollOption }>;
 };
 
 export const renderPollOptionFullResultsItem = ({ item }: { item: PollVoteClass }) => (
@@ -86,19 +86,18 @@ export const PollOptionFullResults = ({
   message,
   option,
   poll,
-  PollOptionFullResultsContent: PollOptionFullResultsContentOverride,
-}: PollOptionFullResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollOptionFullResultsContentOverride ? (
-      <PollOptionFullResultsContentOverride option={option} />
-    ) : (
-      <PollOptionFullResultsContent
+}: PollOptionFullResultsProps) => {
+  const { PollOptionFullResultsContent: PollOptionFullResultsContentComponent } =
+    useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollOptionFullResultsContentComponent
         additionalFlatListProps={additionalFlatListProps}
         option={option}
       />
-    )}
-  </PollContextProvider>
-);
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollResults/PollResults.tsx

@@ -11,12 +11,12 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
 
 export type PollResultsProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollResultsContent?: React.ComponentType;
 };
 
 export const PollResultsContent = ({
@@ -62,20 +62,14 @@ export const PollResultsContent = ({
   );
 };
 
-export const PollResults = ({
-  additionalScrollViewProps,
-  message,
-  poll,
-  PollResultsContent: PollResultsContentOverride,
-}: PollResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollResultsContentOverride ? (
-      <PollResultsContentOverride />
-    ) : (
-      <PollResultsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+export const PollResults = ({ additionalScrollViewProps, message, poll }: PollResultsProps) => {
+  const { PollResultsContent: PollResultsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollResultsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,14 @@
 import React, { useMemo } from 'react';
-import { I18nManager, Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
+import {
+  I18nManager,
+  Image,
+  ImageProps,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import {
   isFileAttachment,
@@ -10,7 +19,8 @@ import {
 
 import { ReplyMessageView } from './ReplyMessageView';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -18,6 +28,7 @@ import {
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks';
 import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
@@ -78,8 +89,10 @@ const RightContent = React.memo(
   },
 );
 
-export type ReplyPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'message'> &
+export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageProps> } & Pick<
+  MessageContextValue,
+  'message'
+> &
   Pick<MessagesContextValue, 'quotedMessage'> & {
     isMyMessage: boolean;
     onDismiss?: () => void;
@@ -96,6 +109,7 @@ export type ReplyPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
   };
 
 export const ReplyWithContext = (props: ReplyPropsWithContext) => {
+  const { t } = useTranslationContext();
   const {
     isMyMessage,
     ImageComponent,
@@ -122,13 +136,13 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   const title = useMemo(
     () =>
       mode === 'edit'
-        ? 'Edit Message'
+        ? t('Edit Message')
         : isMyMessage
-          ? 'You'
+          ? t('You')
           : quotedMessage?.user?.name
-            ? `Reply to ${quotedMessage?.user?.name}`
-            : 'Reply',
-    [mode, isMyMessage, quotedMessage?.user?.name],
+            ? t('Reply to {{name}}', { name: quotedMessage?.user?.name })
+            : t('Reply'),
+    [mode, isMyMessage, quotedMessage?.user?.name, t],
   );
 
   if (!quotedMessage) {
@@ -214,7 +228,8 @@ export type ReplyProps = Partial<ReplyPropsWithContext> &
 
 export const Reply = (props: ReplyProps) => {
   const { message: messageFromContext } = useMessageContext();
-  const { client, ImageComponent } = useChatContext();
+  const { client } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
 
   const messageComposer = useMessageComposer();
   const { quotedMessage: quotedMessageFromComposer } = useStateStore(