stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.10

package/src/components/MessageMenu/EmojiPickerList.tsx

@@ -5,9 +5,9 @@ import { Pressable } from 'react-native-gesture-handler';
 import { emojis } from './emojis';
 
 import { useHasOwnReaction } from './hooks/useHasOwnReaction';
-import { toUnicodeScalarString } from './MessageReactionPicker';
+import { toUnicodeScalarString } from './utils/toUnicodeScalarString';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { StreamBottomSheetModalFlatList } from '../UIComponents';

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -133,14 +133,6 @@ export const EmojiViewerButton = ({
   );
 };
 
-// TODO: V9: Move this to utils and also clean it up a bit.
-//  This was done quickly and in a bit of a hurry.
-export const toUnicodeScalarString = (emoji: string): string => {
-  const out: number[] = [];
-  for (const ch of emoji) out.push(ch.codePointAt(0)!);
-  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
-};
-
 /**
  * MessageReactionPicker - A high level component which implements all the logic required for a message overlay reaction list
  */

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -291,6 +291,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           </Text>
           <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
             <FlatList
+              showsHorizontalScrollIndicator={false}
               contentContainerStyle={[styles.contentContainer, contentContainer]}
               data={selectorReactions}
               getItemLayout={getItemLayout}

package/src/components/MessageMenu/utils/toUnicodeScalarString.ts

@@ -0,0 +1,5 @@
+export const toUnicodeScalarString = (emoji: string): string => {
+  const out: number[] = [];
+  for (const ch of emoji) out.push(ch.codePointAt(0)!);
+  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
+};

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

@@ -9,6 +9,7 @@ import { PollInputDialog } from './PollInputDialog';
 import {
   PollContextProvider,
   PollContextValue,
+  useChatContext,
   usePollContext,
   useTheme,
   useTranslationContext,
@@ -27,6 +28,8 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
   const { onPress } = props;
 
+  const styles = useStyles();
+
   const onPressHandler = useCallback(() => {
     if (onPress) {
       onPress({ message, poll });
@@ -37,10 +40,10 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   }, [message, onPress, poll]);
 
   return (
-    <>
+    <View style={styles.inlineButton}>
       <Button
         variant={'secondary'}
-        type={'outline'}
+        type={'ghost'}
         size={'lg'}
         label={ownAnswer ? t('Update your comment') : t('Add a comment')}
         onPress={onPressHandler}
@@ -54,7 +57,7 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
           visible={showAddCommentDialog}
         />
       ) : null}
-    </>
+    </View>
   );
 };
 
@@ -64,6 +67,7 @@ export type PollAnswersListProps = PollContextValue & {
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
+  const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
   const { votingVisibility } = usePollState();
 
@@ -87,25 +91,32 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
     [answer.updated_at, t, tDateTimeParser],
   );
 
+  const isMyAnswer = client.userID === answer.user?.id;
+
   const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
+    () => votingVisibility === VotingVisibility.anonymous && !isMyAnswer,
+    [votingVisibility, isMyAnswer],
   );
 
+  const answerAuthorName = isMyAnswer ? t('You') : answer.user?.name;
+
   return (
-    <View style={[styles.listItemContainer, itemStyle.container]}>
-      <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
-      <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
-        <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
-          {!isAnonymous && answer.user?.image ? (
-            <UserAvatar user={answer.user} size='md' showBorder />
-          ) : null}
-          <Text style={styles.listItemInfoUserName}>
-            {isAnonymous ? t('Anonymous') : answer.user?.name}
-          </Text>
+    <View style={[styles.listItemWrapper, itemStyle.wrapper]}>
+      <View style={[styles.listItemContainer, itemStyle.container]}>
+        <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
+        <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
+          <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
+            {!isAnonymous && answer.user?.image ? (
+              <UserAvatar user={answer.user} size='sm' showBorder />
+            ) : null}
+            <Text style={styles.listItemInfoUserName}>
+              {isAnonymous ? t('Anonymous') : answerAuthorName}
+            </Text>
+            <Text style={styles.listItemInfoDate}>{dateString}</Text>
+          </View>
         </View>
-        <Text style={styles.listItemInfoDate}>{dateString}</Text>
       </View>
+      {isMyAnswer ? <AnswerListAddCommentButton /> : null}
     </View>
   );
 };
@@ -137,7 +148,6 @@ export const PollAnswersListContent = ({
         renderItem={renderPollAnswerListItem}
         {...additionalFlatListProps}
       />
-      <AnswerListAddCommentButton />
     </View>
   );
 };
@@ -164,14 +174,7 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        addCommentButtonContainer: {
-          alignItems: 'center',
-          borderRadius: 12,
-          paddingHorizontal: 16,
-          paddingVertical: 18,
-        },
         contentContainer: { gap: primitives.spacingMd },
-        addCommentButtonText: { fontSize: 16 },
         container: {
           flex: 1,
           padding: primitives.spacingMd,
@@ -179,31 +182,41 @@ const useStyles = () => {
         },
         listItemAnswerText: {
           fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
           color: semantics.textPrimary,
         },
-        listItemContainer: {
+        listItemWrapper: {
           borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreSurfaceCard,
         },
+        listItemContainer: {
+          padding: primitives.spacingMd,
+          gap: primitives.spacingXs,
+        },
         listItemInfoContainer: {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          marginTop: 24,
         },
         listItemInfoUserName: {
-          color: semantics.textPrimary,
+          color: semantics.chatTextUsername,
           fontSize: primitives.typographyFontSizeSm,
-          marginLeft: primitives.spacingXxs,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
         },
         listItemInfoDate: {
           fontSize: primitives.typographyFontSizeSm,
           color: semantics.textTertiary,
         },
-        listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' },
+        listItemUserInfoContainer: {
+          gap: primitives.spacingXs,
+          alignItems: 'center',
+          flexDirection: 'row',
+        },
+        inlineButton: {
+          borderColor: semantics.borderCoreDefault,
+          borderTopWidth: 1,
+        },
       }),
     [semantics],
   );

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

@@ -14,6 +14,7 @@ import {
   useOwnCapabilitiesContext,
   usePollContext,
   useTheme,
+  useTranslationContext,
 } from '../../../contexts';
 
 import { Check } from '../../../icons';
@@ -26,6 +27,7 @@ import { usePollState } from '../hooks/usePollState';
 export type PollOptionProps = {
   option: PollOptionClass;
   showProgressBar?: boolean;
+  forceIncoming?: boolean;
 };
 
 export type PollAllOptionsContentProps = PollContextValue & {
@@ -36,6 +38,7 @@ export type PollAllOptionsContentProps = PollContextValue & {
 export const PollAllOptionsContent = ({
   additionalScrollViewProps,
 }: Pick<PollAllOptionsContentProps, 'additionalScrollViewProps'>) => {
+  const { t } = useTranslationContext();
   const { name, options } = usePollState();
 
   const {
@@ -50,12 +53,13 @@ export const PollAllOptionsContent = ({
   return (
     <ScrollView style={[styles.allOptionsWrapper, wrapper]} {...additionalScrollViewProps}>
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
+        <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
         <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
       </View>
       <View style={[styles.allOptionsListContainer, listContainer]}>
         {options?.map((option: PollOptionClass) => (
           <View key={`full_poll_options_${option.id}`} style={styles.optionWrapper}>
-            <PollOption key={option.id} option={option} showProgressBar={false} />
+            <PollOption key={option.id} option={option} forceIncoming />
           </View>
         ))}
       </View>
@@ -78,19 +82,15 @@ export const PollAllOptions = ({
   </PollContextProvider>
 );
 
-export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
-  const { latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
+  const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const styles = useStyles();
 
   const relevantVotes = useMemo(
     () => latestVotesByOption?.[option.id] || [],
     [latestVotesByOption, option.id],
   );
-  const maxVotes = useMemo(
-    () =>
-      maxVotedOptionIds?.[0] && voteCountsByOption ? voteCountsByOption[maxVotedOptionIds[0]] : 0,
-    [maxVotedOptionIds, voteCountsByOption],
-  );
+
   const votes = voteCountsByOption[option.id] || 0;
 
   const {
@@ -105,13 +105,15 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
   } = useTheme();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
 
-  const unFilledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressTrackOutgoing
-    : semantics.chatPollProgressTrackIncoming;
+  const unFilledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressTrackOutgoing
+      : semantics.chatPollProgressTrackIncoming;
 
-  const filledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressFillOutgoing
-    : semantics.chatPollProgressFillIncoming;
+  const filledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressFillOutgoing
+      : semantics.chatPollProgressFillIncoming;
 
   return (
     <View style={[styles.container, container]}>
@@ -133,7 +135,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
         {showProgressBar ? (
           <View style={styles.progressBarContainer}>
             <ProgressBar
-              progress={votes / maxVotes}
+              progress={votes / voteCount}
               filledColor={filledColor}
               emptyColor={unFilledColor}
             />
@@ -273,6 +275,13 @@ const useAllOptionStyles = () => {
           lineHeight: primitives.typographyLineHeightRelaxed,
           fontWeight: primitives.typographyFontWeightSemiBold,
           color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        allOptionsTitleMeta: {
+          fontSize: primitives.typographyFontSizeSm,
+          color: semantics.textTertiary,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightMedium,
         },
         allOptionsWrapper: {
           flex: 1,

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

@@ -112,7 +112,9 @@ const useStyles = () => {
           backgroundColor: semantics.backgroundCoreSurfaceCard,
           borderRadius: primitives.radiusLg,
           marginBottom: primitives.spacingMd,
-          padding: primitives.spacingMd,
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacingMd,
+          paddingBottom: primitives.spacingXs,
         },
         headerContainer: {
           flexDirection: 'row',
@@ -133,6 +135,7 @@ const useStyles = () => {
           lineHeight: primitives.typographyLineHeightNormal,
           fontWeight: primitives.typographyFontWeightSemiBold,
           color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
           marginLeft: primitives.spacingMd,
         },
       }),

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

@@ -57,7 +57,9 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
       {ownCapabilities.queryPollVotes &&
       voteCountsByOption &&
       voteCountsByOption?.[option.id] > 5 ? (
-        <GenericPollButton onPress={onPressHandler} label={t('Show All')} />
+        <View style={styles.inlineButton}>
+          <GenericPollButton onPress={onPressHandler} label={t('Show All')} />
+        </View>
       ) : null}
       {showAllVotes ? (
         <Modal
@@ -103,18 +105,24 @@ export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
 
   return (
     <View style={[styles.container, container]}>
-      <Text style={[styles.titleMeta, titleMeta]}>
-        {t('Option {{count}}', { count: index + 1 })}
-      </Text>
-      <View style={[styles.headerContainer, headerContainer]}>
-        <Text style={[styles.title, title]}>{option.text}</Text>
-        <Text style={[styles.voteCount, voteCount]}>
-          {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+      <View style={styles.metaContainer}>
+        <Text style={[styles.titleMeta, titleMeta]}>
+          {t('Option {{count}}', { count: index + 1 })}
         </Text>
+        <View style={[styles.headerContainer, headerContainer]}>
+          <Text style={[styles.title, title]}>{option.text}</Text>
+          <Text style={[styles.voteCount, voteCount]}>
+            {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+          </Text>
+        </View>
       </View>
-      {latestVotesByOption?.[option.id]?.length > 0
-        ? (latestVotesByOption?.[option.id] ?? []).slice(0, 5).map(PollResultsVoteItem)
-        : null}
+      {latestVotesByOption?.[option.id]?.length > 0 ? (
+        <View style={styles.votesContainer}>
+          {(latestVotesByOption?.[option.id] ?? []).slice(0, 5).map(PollResultsVoteItem)}
+        </View>
+      ) : (
+        <View style={styles.spacer} />
+      )}
       <ShowAllVotesButton option={option} />
     </View>
   );
@@ -127,11 +135,21 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        spacer: {
+          paddingBottom: primitives.spacingXs,
+        },
         container: {
           backgroundColor: semantics.backgroundCoreSurfaceCard,
           borderRadius: primitives.radiusLg,
           marginBottom: primitives.spacingMd,
-          padding: primitives.spacingMd,
+        },
+        metaContainer: {
+          paddingTop: primitives.spacingMd,
+          paddingHorizontal: primitives.spacingMd,
+        },
+        votesContainer: {
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: primitives.spacingXs,
         },
         headerContainer: {
           flexDirection: 'row',
@@ -167,6 +185,12 @@ const useStyles = () => {
           backgroundColor: semantics.backgroundCoreElevation1,
           flex: 1,
         },
+        inlineButton: {
+          borderColor: semantics.borderCoreDefault,
+          borderTopWidth: 1,
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: primitives.spacingXs,
+        },
       }),
     [semantics],
   );

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

@@ -32,6 +32,7 @@ export type UsePollStateSelectorReturnType = {
   ownVotesByOptionId: Record<string, PollVote>;
   voteCountsByOption: Record<string, number>;
   votingVisibility: VotingVisibility | undefined;
+  voteCount: number;
 };
 
 export type UsePollStateReturnType = UsePollStateSelectorReturnType & {
@@ -56,6 +57,7 @@ const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
   ownVotesByOptionId: nextValue.ownVotesByOptionId,
   voteCountsByOption: nextValue.vote_counts_by_option,
   votingVisibility: nextValue.voting_visibility,
+  voteCount: nextValue.vote_count,
 });
 
 export const usePollState = (): UsePollStateReturnType => {
@@ -76,6 +78,7 @@ export const usePollState = (): UsePollStateReturnType => {
     ownVotesByOptionId,
     voteCountsByOption,
     votingVisibility,
+    voteCount,
   } = usePollStateStore(selector);
 
   const addOption = useCallback(
@@ -109,5 +112,6 @@ export const usePollState = (): UsePollStateReturnType => {
     ownVotesByOptionId,
     voteCountsByOption,
     votingVisibility,
+    voteCount,
   };
 };

package/src/components/Thread/Thread.tsx

@@ -11,9 +11,9 @@ import {
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import {
-  MessageInput as DefaultMessageInput,
-  MessageInputProps,
-} from '../MessageInput/MessageInput';
+  MessageComposer as DefaultMessageComposer,
+  MessageComposerProps,
+} from '../MessageInput/MessageComposer';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
 
@@ -37,10 +37,10 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
     | 'threadInstance'
   > & {
     /**
-     * Additional props for underlying MessageInput component.
+     * Additional props for underlying MessageComposer component.
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input/#props
      * */
-    additionalMessageInputProps?: Partial<MessageInputProps>;
+    additionalMessageComposerProps?: Partial<MessageComposerProps>;
     /**
      * Additional props for underlying MessageList component.
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-list/#props
@@ -57,13 +57,13 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
     closeThreadOnDismount?: boolean;
-    /** Disables the thread UI. So MessageInput and MessageList will be disabled. */
+    /** Disables the thread UI. So MessageComposer and MessageList will be disabled. */
     disabled?: boolean;
     /**
-     * **Customized MessageInput component to used within Thread instead of default MessageInput
-     * **Available from [MessageInput](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input)**
+     * **Customized MessageComposer component to used within Thread instead of default MessageComposer
+     * **Available from [MessageComposer](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input)**
      */
-    MessageInput?: React.ComponentType<MessageInputProps>;
+    MessageComposer?: React.ComponentType<MessageComposerProps>;
     /**
      * Call custom function on closing thread if handling thread state elsewhere
      */
@@ -73,7 +73,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
 
 const ThreadWithContext = (props: ThreadPropsWithContext) => {
   const {
-    additionalMessageInputProps,
+    additionalMessageComposerProps,
     additionalMessageListProps,
     additionalMessageFlashListProps,
     autoFocus = false,
@@ -81,7 +81,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
-    MessageInput = DefaultMessageInput,
+    MessageComposer = DefaultMessageComposer,
     MessageList,
     onThreadDismount,
     parentMessagePreventPress = true,
@@ -148,10 +148,10 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
           {...additionalMessageListProps}
         />
       )}
-      <MessageInput
+      <MessageComposer
         additionalTextInputProps={additionalTextInputProps}
         threadList
-        {...additionalMessageInputProps}
+        {...additionalMessageComposerProps}
       />
     </React.Fragment>
   );
@@ -164,9 +164,9 @@ export type ThreadProps = Partial<ThreadPropsWithContext>;
  * The thread is only used for the list of replies to a message.
  *
  * Thread is a consumer of [channel context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/)
- * Underlying MessageList, MessageInput and Message components can be customized using props:
+ * Underlying MessageList, MessageComposer and Message components can be customized using props:
  * - additionalMessageListProps
- * - additionalMessageInputProps
+ * - additionalMessageComposerProps
  */
 export const Thread = (props: ThreadProps) => {
   const { client } = useChatContext();