stream-chat-react-native-core 9.0.0-beta.6 → 9.0.0-beta.8

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { LocalVoiceRecordingAttachment } from 'stream-chat';
 
@@ -12,14 +12,11 @@ import { resampleWaveformData } from '../utils/audioSampling';
 
 /**
  * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
- *
- * FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
  */
 export const useAudioRecorder = ({
   audioRecorderManager,
   sendMessage,
 }: Pick<MessageInputContextValue, 'audioRecorderManager' | 'sendMessage'>) => {
-  const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
   const { attachmentManager } = useMessageComposer();
 
   /**
@@ -43,13 +40,6 @@ export const useAudioRecorder = ({
     [stopVoiceRecording],
   );
 
-  useEffect(() => {
-    if (isScheduledForSubmit) {
-      sendMessage();
-      setIsScheduleForSubmit(false);
-    }
-  }, [isScheduledForSubmit, sendMessage]);
-
   /**
    * Function to start voice recording. Will return whether access is granted
    * with regards to the microphone permission as that's how the underlying
@@ -113,8 +103,8 @@ export const useAudioRecorder = ({
         audioRecorderManager.reset();
 
         if (sendOnComplete) {
-          await attachmentManager.uploadAttachment(audioFile);
-          setIsScheduleForSubmit(true);
+          attachmentManager.upsertAttachments([audioFile]);
+          sendMessage();
         } else {
           await attachmentManager.uploadAttachment(audioFile);
         }
@@ -122,7 +112,7 @@ export const useAudioRecorder = ({
         console.log('Error uploading voice recording: ', error);
       }
     },
-    [audioRecorderManager, attachmentManager, stopVoiceRecording],
+    [audioRecorderManager, attachmentManager, sendMessage, stopVoiceRecording],
   );
 
   return {

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/__tests__/__snapshots__/Thread.test.js.snap

@@ -620,6 +620,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "flexDirection": "row",
                                     "gap": 8,
                                     "justifyContent": "center",
+                                    "maxWidth": "100%",
                                     "paddingVertical": 4,
                                   },
                                   {},
@@ -627,6 +628,18 @@ exports[`Thread should match thread snapshot 1`] = `
                               }
                               testID="message-status-time"
                             >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
                               <Text
                                 style={
                                   [
@@ -944,6 +957,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "flexDirection": "row",
                                     "gap": 8,
                                     "justifyContent": "center",
+                                    "maxWidth": "100%",
                                     "paddingVertical": 4,
                                   },
                                   {},
@@ -951,6 +965,18 @@ exports[`Thread should match thread snapshot 1`] = `
                               }
                               testID="message-status-time"
                             >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
                               <Text
                                 style={
                                   [
@@ -1301,6 +1327,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "flexDirection": "row",
                                     "gap": 8,
                                     "justifyContent": "center",
+                                    "maxWidth": "100%",
                                     "paddingVertical": 4,
                                   },
                                   {},
@@ -1308,6 +1335,18 @@ exports[`Thread should match thread snapshot 1`] = `
                               }
                               testID="message-status-time"
                             >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#687385",
+                                    "fontSize": 13,
+                                    "fontWeight": 400,
+                                    "lineHeight": 16,
+                                  }
+                                }
+                              >
+                                2:50 PM
+                              </Text>
                               <Text
                                 style={
                                   [
@@ -1616,6 +1655,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "justifyContent": "center",
+                                  "maxWidth": "100%",
                                   "paddingVertical": 4,
                                 },
                                 {},
@@ -1623,6 +1663,18 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                             testID="message-status-time"
                           >
+                            <Text
+                              style={
+                                {
+                                  "color": "#687385",
+                                  "fontSize": 13,
+                                  "fontWeight": 400,
+                                  "lineHeight": 16,
+                                }
+                              }
+                            >
+                              2:50 PM
+                            </Text>
                             <Text
                               style={
                                 [