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

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -64,10 +64,10 @@ export const MessageUserReactionsItem = ({
       style={[styles.avatarContainer, avatarContainer]}
       onPress={onPress}
     >
-      <MessageUserReactionsAvatar reaction={reaction} size={'lg'} />
+      <MessageUserReactionsAvatar reaction={reaction} size={'md'} />
       <View style={[styles.avatarNameContainer, avatarNameContainer]}>
         <Text numberOfLines={1} style={[styles.avatarName, avatarName]}>
-          {name}
+          {isOwnReaction ? t('You') : name}
         </Text>
         {isOwnReaction ? (
           <Text numberOfLines={1} style={[styles.avatarSubtitle, null]}>
@@ -105,7 +105,7 @@ const useStyles = () => {
           textAlign: 'left',
         },
         avatarSubtitle: {
-          fontSize: primitives.typographyFontSizeSm,
+          fontSize: primitives.typographyFontSizeXs,
           color: semantics.textTertiary,
         },
         avatarNameContainer: {

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

@@ -87,16 +87,16 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
 
   it('renders reaction buttons', () => {
     const { getByLabelText } = renderComponent();
-    const likeReactionButton = getByLabelText('reaction-button-like-selected');
+    const likeReactionButton = getByLabelText('reaction-button-like-unselected');
     expect(likeReactionButton).toBeDefined();
     const loveReactionButton = getByLabelText('reaction-button-love-unselected');
     expect(loveReactionButton).toBeDefined();
   });
 
-  it('selects the first reaction by default', () => {
+  it('starts with no reaction filter selected by default', () => {
     const { getAllByLabelText } = renderComponent();
     const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
@@ -114,6 +114,7 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
     const { getByText } = renderComponent();
     const reactionItems = getByText('1 like');
     expect(reactionItems).toBeDefined();
+    expect(getByText('2 love')).toBeDefined();
   });
 
   it('uses provided reactions when passed as a prop', () => {

package/src/components/MessageMenu/hooks/__tests__/useFetchReactions.test.ts

@@ -0,0 +1,56 @@
+import { ReactionResponse } from 'stream-chat';
+
+import {
+  reconcileUpdatedReactionInList,
+  removeReactionFromList,
+  upsertReactionInList,
+} from '../useFetchReactions';
+
+const makeReaction = (
+  params: Partial<ReactionResponse> & Pick<ReactionResponse, 'type' | 'user_id'>,
+) =>
+  ({
+    type: params.type,
+    user_id: params.user_id,
+    user: params.user ?? { id: params.user_id, name: params.user_id },
+  }) as ReactionResponse;
+
+describe('useFetchReactions helpers', () => {
+  it('upserts reactions in the unfiltered list without duplicating the same user/type pair', () => {
+    const existing = makeReaction({ type: 'like', user_id: 'user-1' });
+    const updated = makeReaction({ type: 'like', user_id: 'user-1' });
+
+    const result = upsertReactionInList({
+      prevReactions: [existing],
+      reaction: updated,
+    });
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toBe(updated);
+  });
+
+  it('removes only the matching user/type pair in the unfiltered list', () => {
+    const likeReaction = makeReaction({ type: 'like', user_id: 'user-1' });
+    const loveReaction = makeReaction({ type: 'love', user_id: 'user-1' });
+
+    const result = removeReactionFromList({
+      prevReactions: [likeReaction, loveReaction],
+      reaction: likeReaction,
+    });
+
+    expect(result).toEqual([loveReaction]);
+  });
+
+  it('removes the previous filtered reaction when an updated event moves that user to another type', () => {
+    const existing = makeReaction({ type: 'like', user_id: 'user-1' });
+    const updated = makeReaction({ type: 'love', user_id: 'user-1' });
+
+    const result = reconcileUpdatedReactionInList({
+      prevReactions: [existing],
+      reaction: updated,
+      reactionType: 'like',
+    });
+
+    expect(result).toEqual([]);
+  });
+});

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -11,6 +11,81 @@ export type UseFetchReactionParams = {
   sort?: ReactionSort;
 };
 
+const isSameReaction = (left: ReactionResponse, right: ReactionResponse) =>
+  left.user_id === right.user_id && left.type === right.type;
+
+export const upsertReactionInList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return [
+      reaction,
+      ...prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction)),
+    ];
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions;
+  }
+
+  return [
+    reaction,
+    ...prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id),
+  ];
+};
+
+export const reconcileUpdatedReactionInList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return [
+      reaction,
+      ...prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction)),
+    ];
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id);
+  }
+
+  return [
+    reaction,
+    ...prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id),
+  ];
+};
+
+export const removeReactionFromList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction));
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions;
+  }
+
+  return prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id);
+};
+
 export const useFetchReactions = ({
   limit = 25,
   message,
@@ -82,8 +157,14 @@ export const useFetchReactions = ({
       client.on('reaction.new', (event) => {
         const { reaction } = event;
 
-        if (reaction && reaction.type === reactionType) {
-          setReactions((prevReactions) => [reaction, ...prevReactions]);
+        if (reaction) {
+          setReactions((prevReactions) =>
+            upsertReactionInList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
+          );
         }
       }),
     );
@@ -93,13 +174,13 @@ export const useFetchReactions = ({
         const { reaction } = event;
 
         if (reaction) {
-          if (reaction.type === reactionType) {
-            setReactions((prevReactions) => [reaction, ...prevReactions]);
-          } else {
-            setReactions((prevReactions) =>
-              prevReactions.filter((r) => r.user_id !== reaction.user_id),
-            );
-          }
+          setReactions((prevReactions) =>
+            reconcileUpdatedReactionInList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
+          );
         }
       }),
     );
@@ -108,9 +189,13 @@ export const useFetchReactions = ({
       client.on('reaction.deleted', (event) => {
         const { reaction } = event;
 
-        if (reaction && reaction.type === reactionType) {
+        if (reaction) {
           setReactions((prevReactions) =>
-            prevReactions.filter((r) => r.user_id !== reaction.user_id),
+            removeReactionFromList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
           );
         }
       }),

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

@@ -53,6 +53,7 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
           closeDialog={() => setShowAddCommentDialog(false)}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
+          placeholder={t('Your comment')}
           title={t('Add a comment')}
           visible={showAddCommentDialog}
         />

package/src/components/Poll/components/PollButtons.tsx

@@ -176,6 +176,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
         <PollInputDialog
           closeDialog={onRequestClose}
           onSubmit={addOption}
+          placeholder={t('Enter a new option')}
           title={t('Suggest an option')}
           visible={showAddOptionDialog}
         />
@@ -214,6 +215,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
           closeDialog={onRequestClose}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
+          placeholder={t('Your comment')}
           title={t('Add a comment')}
           visible={showAddCommentDialog}
         />

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

@@ -19,6 +19,7 @@ import { Button } from '../../ui';
 export type PollInputDialogProps = {
   closeDialog: () => void;
   onSubmit: (text: string) => void;
+  placeholder: string;
   title: string;
   visible: boolean;
   initialValue?: string;
@@ -28,6 +29,7 @@ export const PollInputDialog = ({
   closeDialog,
   initialValue = '',
   onSubmit,
+  placeholder,
   title,
   visible,
 }: PollInputDialogProps) => {
@@ -62,7 +64,7 @@ export const PollInputDialog = ({
               <TextInput
                 autoFocus={true}
                 onChangeText={setDialogInput}
-                placeholder={t('Ask a question')}
+                placeholder={placeholder}
                 placeholderTextColor={semantics.inputTextPlaceholder}
                 style={[styles.input, input]}
                 value={dialogInput}

package/src/components/ProgressControl/StableDurationLabel.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+type StableDurationLabelProps = {
+  accessibilityLabel?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  reserveLabel: string;
+  style?: StyleProp<TextStyle>;
+  visibleStyle?: StyleProp<TextStyle>;
+  label: string;
+};
+
+/**
+ * Renders a duration label with a layout-stable width.
+ *
+ * It reserves space using an invisible max-width label, then absolutely positions
+ * the live value on top so playback updates do not cause parent relayout.
+ */
+export const StableDurationLabel = React.memo(
+  ({
+    accessibilityLabel,
+    containerStyle,
+    reserveLabel,
+    style,
+    visibleStyle,
+    label,
+  }: StableDurationLabelProps) => (
+    <View style={[styles.container, containerStyle]}>
+      <Text accessible={false} style={[style, styles.reserveLabel]}>
+        {reserveLabel}
+      </Text>
+      <Text
+        accessibilityLabel={accessibilityLabel}
+        style={[style, styles.visibleLabel, visibleStyle]}
+      >
+        {label}
+      </Text>
+    </View>
+  ),
+);
+
+StableDurationLabel.displayName = 'StableDurationLabel';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  reserveLabel: {
+    opacity: 0,
+  },
+  visibleLabel: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
+});

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,12 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { ProgressControlThumb } from './ProgressThumb';
 
@@ -49,6 +45,43 @@ const WAVEFORM_WIDTH = 2;
 const WAVEFORM_GAP = 2;
 const WAVE_MAX_HEIGHT = 20;
 const WAVE_MIN_HEIGHT = 2;
+const DRAG_HIT_SLOP = {
+  bottom: 12,
+  left: 12,
+  right: 12,
+  top: 12,
+};
+
+const clampProgress = (progress: number) => {
+  'worklet';
+  return Math.max(0, Math.min(progress, 1));
+};
+
+type WaveformBarsProps = {
+  color: ColorValue;
+  heights: number[];
+  waveformStyle?: StyleProp<ViewStyle>;
+};
+
+const WaveformBars = React.memo(({ color, heights, waveformStyle }: WaveformBarsProps) => (
+  <View style={styles.waveformLayer}>
+    {heights.map((height, index) => (
+      <View
+        key={index}
+        style={[
+          styles.waveform,
+          {
+            backgroundColor: color,
+            height,
+          },
+          waveformStyle,
+        ]}
+      />
+    ))}
+  </View>
+));
+
+WaveformBars.displayName = 'WaveformBars';
 
 export const WaveProgressBar = React.memo(
   (props: WaveProgressBarProps) => {
@@ -62,30 +95,16 @@ export const WaveProgressBar = React.memo(
       progress,
       waveformData,
     } = props;
+    const [showInteractiveLayer, setShowInteractiveLayer] = useState(
+      () => progress > 0 || isPlaying,
+    );
     const eachWaveformWidth = WAVEFORM_WIDTH + WAVEFORM_GAP;
     const fullWidth = (amplitudesCount - 1) * eachWaveformWidth;
-    const state = useSharedValue(progress);
-    const [currentWaveformProgress, setCurrentWaveformProgress] = useState<number>(0);
-
-    const waveFormNumberFromProgress = useCallback(
-      (progress: number) => {
-        'worklet';
-        const progressInPrecision = Number(progress.toFixed(2));
-        const progressInWaveformWidth = Number((progressInPrecision * fullWidth).toFixed(0));
-        const progressInWaveformNumber = Math.floor(progressInWaveformWidth / 4);
-        runOnJS(setCurrentWaveformProgress)(progressInWaveformNumber);
-      },
-      [fullWidth],
-    );
-
-    useAnimatedReaction(
-      () => progress,
-      (newProgress) => {
-        state.value = newProgress;
-        waveFormNumberFromProgress(newProgress);
-      },
-      [progress],
-    );
+    const maxThumbTranslateX = Math.max(fullWidth - eachWaveformWidth, 0);
+    const maxProgressWidth = fullWidth + WAVEFORM_WIDTH;
+    const dragStartProgress = useSharedValue(0);
+    const isDragging = useSharedValue(false);
+    const visualProgress = useSharedValue(progress);
 
     const {
       theme: {
@@ -94,29 +113,84 @@ export const WaveProgressBar = React.memo(
       },
     } = useTheme();
 
+    useEffect(() => {
+      if (!isDragging.value) {
+        visualProgress.value = progress;
+      }
+    }, [isDragging, progress, visualProgress]);
+
+    useEffect(() => {
+      setShowInteractiveLayer(progress > 0 || isPlaying);
+    }, [isPlaying, progress]);
+
+    const handleStartDrag = useCallback(
+      (nextProgress: number) => {
+        setShowInteractiveLayer(true);
+        onStartDrag?.(nextProgress);
+      },
+      [onStartDrag],
+    );
+
+    const handleProgressDrag = useCallback(
+      (nextProgress: number) => {
+        onProgressDrag?.(nextProgress);
+      },
+      [onProgressDrag],
+    );
+
+    const handleEndDrag = useCallback(
+      (nextProgress: number) => {
+        onEndDrag?.(nextProgress);
+      },
+      [onEndDrag],
+    );
+
     const pan = useMemo(
       () =>
         Gesture.Pan()
+          .hitSlop(DRAG_HIT_SLOP)
           .maxPointers(1)
           .onStart(() => {
+            const nextProgress = clampProgress(visualProgress.value);
+            dragStartProgress.value = nextProgress;
+            isDragging.value = true;
             if (onStartDrag) {
-              runOnJS(onStartDrag)(state.value);
+              runOnJS(handleStartDrag)(nextProgress);
             }
           })
           .onUpdate((event) => {
-            const newProgress = Math.max(0, Math.min((state.value + event.x) / fullWidth, 1));
-            state.value = newProgress;
-            waveFormNumberFromProgress(newProgress);
+            if (fullWidth <= 0) {
+              return;
+            }
+            const nextProgress = clampProgress(
+              dragStartProgress.value + event.translationX / fullWidth,
+            );
+            visualProgress.value = nextProgress;
+            if (onProgressDrag) {
+              runOnJS(handleProgressDrag)(nextProgress);
+            }
           })
           .onEnd(() => {
+            isDragging.value = false;
             if (onEndDrag) {
-              runOnJS(onEndDrag)(state.value);
+              runOnJS(handleEndDrag)(visualProgress.value);
             }
           }),
-      [fullWidth, onEndDrag, onStartDrag, state, waveFormNumberFromProgress],
+      [
+        dragStartProgress,
+        fullWidth,
+        handleEndDrag,
+        handleProgressDrag,
+        handleStartDrag,
+        isDragging,
+        onEndDrag,
+        onProgressDrag,
+        onStartDrag,
+        visualProgress,
+      ],
     );
 
-    const stringifiedWaveformData = waveformData.toString();
+    const stringifiedWaveformData = useMemo(() => waveformData.toString(), [waveformData]);
 
     const resampledWaveformData = useMemo(
       () => resampleWaveformData(waveformData, amplitudesCount),
@@ -124,12 +198,36 @@ export const WaveProgressBar = React.memo(
       [amplitudesCount, stringifiedWaveformData],
     );
 
+    const waveformHeights = useMemo(
+      () =>
+        resampledWaveformData.map((waveform) =>
+          waveform * WAVE_MAX_HEIGHT > WAVE_MIN_HEIGHT
+            ? waveform * WAVE_MAX_HEIGHT
+            : WAVE_MIN_HEIGHT,
+        ),
+      [resampledWaveformData],
+    );
+
+    const progressOverlayStyles = useAnimatedStyle(
+      () => ({
+        width: clampProgress(visualProgress.value) * maxProgressWidth,
+      }),
+      [maxProgressWidth],
+    );
+
     const thumbStyles = useAnimatedStyle(
       () => ({
         position: 'absolute',
-        transform: [{ translateX: currentWaveformProgress * eachWaveformWidth }],
+        transform: [
+          {
+            translateX: Math.min(
+              clampProgress(visualProgress.value) * fullWidth,
+              maxThumbTranslateX,
+            ),
+          },
+        ],
       }),
-      [currentWaveformProgress, fullWidth],
+      [fullWidth, maxThumbTranslateX],
     );
 
     return (
@@ -140,30 +238,33 @@ export const WaveProgressBar = React.memo(
           }}
           style={[styles.container, container]}
         >
-          {resampledWaveformData.map((waveform, index) => (
+          <WaveformBars
+            color={semantics.chatWaveformBar}
+            heights={waveformHeights}
+            waveformStyle={waveformTheme}
+          />
+          {showInteractiveLayer ? (
             <Animated.View
-              key={index}
-              style={[
-                styles.waveform,
-                {
-                  backgroundColor:
-                    index < currentWaveformProgress
-                      ? semantics.chatWaveformBarPlaying
-                      : semantics.chatWaveformBar,
-                  height:
-                    waveform * WAVE_MAX_HEIGHT > WAVE_MIN_HEIGHT
-                      ? waveform * WAVE_MAX_HEIGHT
-                      : WAVE_MIN_HEIGHT,
-                },
-                waveformTheme,
-              ]}
-            />
-          ))}
-          {(onEndDrag || onProgressDrag) && (
-            <Animated.View style={[thumbStyles, thumb]}>
-              <ProgressControlThumb isPlaying={isPlaying} />
+              pointerEvents='none'
+              style={[styles.progressOverlay, progressOverlayStyles]}
+            >
+              <WaveformBars
+                color={semantics.chatWaveformBarPlaying}
+                heights={waveformHeights}
+                waveformStyle={waveformTheme}
+              />
             </Animated.View>
-          )}
+          ) : null}
+          {(onEndDrag || onProgressDrag) &&
+            (showInteractiveLayer ? (
+              <Animated.View style={[thumbStyles, thumb]}>
+                <ProgressControlThumb isPlaying={isPlaying} />
+              </Animated.View>
+            ) : (
+              <View style={[styles.idleThumb, thumb]}>
+                <ProgressControlThumb isPlaying={isPlaying} />
+              </View>
+            ))}
         </View>
       </GestureDetector>
     );
@@ -172,6 +273,9 @@ export const WaveProgressBar = React.memo(
     if (prevProps.amplitudesCount !== nextProps.amplitudesCount) {
       return false;
     }
+    if (prevProps.isPlaying !== nextProps.isPlaying) {
+      return false;
+    }
     if (prevProps.progress !== nextProps.progress) {
       return false;
     } else {
@@ -182,6 +286,21 @@ export const WaveProgressBar = React.memo(
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  idleThumb: {
+    left: 0,
+    position: 'absolute',
+  },
+  progressOverlay: {
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 0,
+  },
+  waveformLayer: {
     alignItems: 'center',
     flexDirection: 'row',
     gap: WAVEFORM_GAP,

package/src/components/Reply/Reply.tsx

@@ -66,6 +66,10 @@ const RightContent = React.memo(
       );
     }
 
+    if (attachment?.type === FileTypes.VoiceRecording) {
+      return null;
+    }
+
     if (attachment && isFileAttachment(attachment)) {
       return <FileIcon mimeType={attachment.mime_type} />;
     }