@ethora/chat-component-rn 26.8.5 → 26.8.6

package/src/components/MessageBubble/MessageReaction.tsx

@@ -1,52 +1,44 @@
-/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
-import React, { FC, useMemo, useState } from 'react';
-import { View, Text, TouchableOpacity, Animated } from 'react-native';
-import styled from 'styled-components/native';
+import React, { FC, useMemo, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, Animated, StyleSheet } from 'react-native';
 import { ReactionMessage } from '../../types/types';
 import { useTheme } from '../../hooks/useTheme';
-
-const ReactionContainer = styled.View`
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`;
-
-const ReactionBox = styled(TouchableOpacity)<{ active: boolean; color: string }>`
-  padding: 4px 8px;
-  border-radius: 20px;
-  background-color: ${({ active, color, theme }) =>
-    active ? color : theme.surface};
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  elevation: 3;
-`;
+import { getEmojiNativeById } from '../../helpers/emoji';
 
 interface MessageReactionProps {
   color: string;
   reaction: Record<string, ReactionMessage>;
   changeReaction: (reaction: string) => void;
   userName?: string;
-}
 
-const emojiMap: Record<string, string> = {
-  joy: '😂',
-  heart: '❤️',
-  fire: '🔥',
-  '+1': '👍',
-  smile: '😄',
-  scream: '😱',
-};
+  interactive?: boolean;
+}
 
 export const MessageReaction: FC<MessageReactionProps> = ({
   reaction,
   color,
   changeReaction,
   userName,
+  interactive = true,
 }) => {
   const theme = useTheme();
   const [tooltipEmoji, setTooltipEmoji] = useState<string | null>(null);
-  const fadeAnim = new Animated.Value(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const reactionDetails = useMemo(() => {
+    const result: Record<string, { count: number; users: string[] }> = {};
+    Object.values(reaction || {}).forEach(({ emoji, data }) => {
+      (emoji || []).forEach((em) => {
+        if (!result[em]) {result[em] = { count: 0, users: [] };}
+        result[em].count += 1;
+        result[em].users.push(
+          `${data?.senderFirstName || ''} ${data?.senderLastName || ''}`.trim()
+        );
+      });
+    });
+    return result;
+  }, [reaction]);
+
+  if (!reaction || Object.keys(reactionDetails).length === 0) {return null;}
 
   const showTooltip = (emoji: string) => {
     setTooltipEmoji(emoji);
@@ -65,90 +57,122 @@ export const MessageReaction: FC<MessageReactionProps> = ({
     }).start(() => setTooltipEmoji(null));
   };
 
-  if (!reaction) {return null;}
-
-  const reactionDetails = useMemo(() => {
-    const result: Record<string, { count: number; users: string[] }> = {};
-
-    Object.values(reaction).forEach(({ emoji, data }) => {
-      if (emoji && emoji.length > 0)
-        {emoji.forEach((em) => {
-          if (!result[em]) {
-            result[em] = { count: 0, users: [] };
-          }
-          result[em].count += 1;
-          result[em].users.push(`${data?.senderFirstName} ${data?.senderLastName}`);
-        });}
-    });
-
-    return result;
-  }, [reaction]);
-
   return (
-    <ReactionContainer>
+    <View style={styles.row}>
       {Object.entries(reactionDetails).map(([emoji, details]) => {
-        const isUserReacted = userName
-          ? details.users.includes(userName)
-          : false;
-
+        const isUserReacted = !!userName && details.users.includes(userName);
         return (
-          <View key={emoji} style={{ position: 'relative' }}>
-            <ReactionBox
-              active={isUserReacted}
-              color={color}
+          <View key={emoji} style={styles.chipWrap}>
+            <TouchableOpacity
+              testID={`reaction-chip-${emoji}`}
+              activeOpacity={0.7}
+              disabled={!interactive}
               onPress={() => changeReaction(emoji)}
               onLongPress={() => showTooltip(emoji)}
               onPressOut={hideTooltip}
+              style={[
+                styles.chip,
+                {
+                  backgroundColor: theme.surface,
+                  borderColor: isUserReacted ? color : theme.border,
+                  shadowColor: theme.shadow,
+                },
+              ]}
             >
-              <Text style={{ fontSize: 18, marginRight: 4 }}>
-                {emojiMap[emoji] || emoji}
-              </Text>
+              {isUserReacted && (
+                <View
+                  pointerEvents="none"
+                  style={[styles.tint, { backgroundColor: `${color}26` }]}
+                />
+              )}
+              <Text style={styles.glyph}>{getEmojiNativeById(emoji)}</Text>
               <Text
-                style={{
-                  fontSize: 14,
-                  fontWeight: '600',
-                  color: isUserReacted ? theme.textOnPrimary : color,
-                }}
+                style={[
+                  styles.count,
+                  { color: isUserReacted ? color : theme.textSecondary },
+                ]}
               >
                 {details.count}
               </Text>
-            </ReactionBox>
+            </TouchableOpacity>
 
-            {/* Tooltip */}
             {tooltipEmoji === emoji && (
               <Animated.View
-                style={{
-                  position: 'absolute',
-                  bottom: 36,
-                  left: '50%',
-                  transform: [
-                    { translateX: -50 },
-                    {
-                      translateY: fadeAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [4, 0],
-                      }),
-                    },
-                  ],
-                  opacity: fadeAnim,
-                  // Inverted pill: text colour as ground, surface as ink,
-                  // so it stays high-contrast on both palettes.
-                  backgroundColor: theme.text,
-                  borderRadius: 6,
-                  paddingHorizontal: 10,
-                  paddingVertical: 6,
-                  maxWidth: 220,
-                  zIndex: 999,
-                }}
+                pointerEvents="none"
+                style={[
+                  styles.tooltip,
+                  {
+                    opacity: fadeAnim,
+                    transform: [
+                      {
+                        translateY: fadeAnim.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [4, 0],
+                        }),
+                      },
+                    ],
+                    // Inverted pill: text colour as ground, surface as ink,
+                    // so it stays high-contrast on both palettes.
+                    backgroundColor: theme.text,
+                  },
+                ]}
               >
-                <Text style={{ color: theme.surface, fontSize: 12 }}>
-                  {details.users.join(', ')}
+                <Text style={[styles.tooltipText, { color: theme.surface }]}>
+                  {details.users.filter(Boolean).join(', ')}
                 </Text>
               </Animated.View>
             )}
           </View>
         );
       })}
-    </ReactionContainer>
+    </View>
   );
-};
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6,
+  },
+  chipWrap: {
+    position: 'relative',
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowOpacity: 0.08,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  tint: {
+    position: "absolute", top: 0, right: 0, bottom: 0, left: 0,
+    borderRadius: 14,
+  },
+  glyph: {
+    fontSize: 16,
+    marginRight: 4,
+  },
+  count: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: 34,
+    left: 0,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    maxWidth: 220,
+  },
+  tooltipText: {
+    fontSize: 12,
+  },
+});

package/src/components/MessageBubble/MessageReply.tsx

@@ -1,50 +1,83 @@
-import { FC } from 'react';
-import { IMessage } from '../../types/types';
-import { styled } from 'styled-components/native';
-import { Text } from 'react-native';
-
-export const StyledMessageReply = styled.TouchableOpacity<{
-  isUser: boolean;
-  configColor: string;
-}>`
-  background-color: ${(props) => (props.isUser ? '#ffffff' : '#E7EDF9')};
-  padding: 8px 16px;
-  margin-bottom: 8px;
-  border-radius: 4px;
-  border-style: solid;
-  border-start-width: ${(props) => (props.isUser ? 4 : 0)}px;
-  border-start-color: ${(props) =>
-    props.isUser ? props.configColor : 'transparent'};
-  border-end-width: ${(props) => (!props.isUser ? 4 : 0)}px;
-  border-end-color: ${(props) =>
-    !props.isUser ? props.configColor : 'transparent'};
-`;
-
-const StyledText = styled.Text`
-  font-size: 14px;
-  overflow: hidden;
-`;
+import React, { FC } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MessageReplyProps {
   isUser: boolean;
   text: string;
+  /** The parent's author, when the reply carries it. */
+  userName?: string;
   color?: string;
   handleReplyMessage: () => void;
 }
 
+/**
+ * Quote of the parent at the top of a reply that was also sent to the
+ * channel (WhatsApp-style): accent bar, author, up to two lines of text.
+ * Tapping opens the parent's thread.
+ */
 export const MessageReply: FC<MessageReplyProps> = ({
   isUser,
   text,
-  color = '#0052CD',
+  userName,
+  color,
   handleReplyMessage,
 }) => {
+  const theme = useTheme();
+  const accent = color || theme.primary;
   return (
-    <StyledMessageReply
+    <TouchableOpacity
+      testID="message-reply-quote"
+      activeOpacity={0.7}
       onPress={handleReplyMessage}
-      isUser={isUser}
-      configColor={color}
+      style={[
+        styles.quote,
+        {
+          // A tint of the bubble's own ground, so it reads on both sides
+          // and in both themes.
+          backgroundColor: isUser ? 'rgba(0,0,0,0.12)' : theme.surfaceSecondary,
+        },
+      ]}
     >
-      <StyledText>{text}</StyledText>
-    </StyledMessageReply>
+      <View style={[styles.bar, { backgroundColor: accent }]} />
+      <View style={styles.body}>
+        {!!userName && (
+          <Text numberOfLines={1} style={[styles.author, { color: accent }]}>
+            {userName}
+          </Text>
+        )}
+        <Text
+          numberOfLines={2}
+          style={[styles.text, { color: isUser ? theme.messageTextUser : theme.text }]}
+        >
+          {text}
+        </Text>
+      </View>
+    </TouchableOpacity>
   );
 };
+
+const styles = StyleSheet.create({
+  quote: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  bar: {
+    width: 4,
+  },
+  body: {
+    flexShrink: 1,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+  },
+  author: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  text: {
+    fontSize: 14,
+  },
+});

package/src/components/Modals/Modal/SwipeBackLayer.tsx

@@ -1,18 +1,19 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
+  Animated,
   BackHandler,
   Keyboard,
   StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import {
   COMPLETE_DISTANCE,
@@ -33,37 +34,76 @@ interface SwipeBackLayerProps {
 /**
  * Full-screen modal layer with the same navigation feel as RoomStack: it
  * slides in from the right, and a swipe from the left edge drags it back
- * out over whatever is underneath (the room or the list).
+ * out over whatever is underneath (the room or the list). Like RoomStack it
+ * runs on RN's own `Animated`, one value driving every layer.
  */
 export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
   onClose,
   children,
 }) => {
   const { width: windowWidth } = useWindowDimensions();
-  const width = useSharedValue(windowWidth);
-  const x = useSharedValue(windowWidth);
-  const closing = useSharedValue(false);
+  const [width, setWidth] = useState(windowWidth);
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const x = useRef(new Animated.Value(windowWidth)).current;
+  const closing = useRef(false);
+
+  const slideTo = useCallback(
+    (
+      toValue: number,
+      config: typeof PUSH,
+      done?: (finished: boolean) => void
+    ) => {
+      Animated.timing(x, {
+        toValue,
+        ...config,
+        useNativeDriver: true,
+      }).start(({ finished }) => done?.(finished));
+    },
+    [x]
+  );
 
   useEffect(() => {
-    x.value = withTiming(0, PUSH);
+    slideTo(0, PUSH);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
-  const finish = useCallback(() => onCloseRef.current(), []);
+  const [closeCount, setCloseCount] = useState(0);
+  const finish = useCallback(() => {
+    onCloseRef.current();
+    setCloseCount(count => count + 1);
+  }, []);
 
-  const close = useCallback(() => {
-    if (closing.value) {
+  // `onClose` normally unmounts this layer. If it is still here afterwards
+  // (the modal did not close), slide the screen back rather than leave it
+  // parked off-screen.
+  useEffect(() => {
+    if (closeCount === 0) {
       return;
     }
-    closing.value = true;
-    Keyboard.dismiss();
-    x.value = withTiming(width.value, POP, finished => {
+    closing.current = false;
+    slideTo(0, POP);
+  }, [closeCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const slideOut = useCallback(() => {
+    closing.current = true;
+    slideTo(widthRef.current, POP, finished => {
       if (finished) {
-        runOnJS(finish)();
+        finish();
+      } else {
+        closing.current = false;
       }
     });
-  }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [finish, slideTo]);
+
+  const close = useCallback(() => {
+    if (closing.current) {
+      return;
+    }
+    Keyboard.dismiss();
+    slideOut();
+  }, [slideOut]);
 
   useEffect(() => {
     const sub = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -73,46 +113,51 @@ export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
     return () => sub.remove();
   }, [close]);
 
-  const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
-
-  const swipeBack = Gesture.Pan()
-    .hitSlop({ left: 0, width: EDGE_WIDTH })
-    .activeOffsetX(12)
-    .failOffsetY([-16, 16])
-    .onStart(() => {
-      runOnJS(dismissKeyboard)();
-    })
-    .onUpdate(e => {
-      if (closing.value) {
-        return;
-      }
-      x.value = Math.min(Math.max(e.translationX, 0), width.value);
-    })
-    .onEnd(e => {
-      if (closing.value) {
-        return;
-      }
-      const complete =
-        x.value > width.value * COMPLETE_DISTANCE ||
-        e.velocityX > COMPLETE_VELOCITY;
-      if (complete) {
-        closing.value = true;
-        x.value = withTiming(width.value, POP, finished => {
-          if (finished) {
-            runOnJS(finish)();
+  const swipeBack = useMemo(
+    () =>
+      Gesture.Pan()
+        .runOnJS(true)
+        .hitSlop({ left: 0, width: EDGE_WIDTH })
+        .activeOffsetX(12)
+        .failOffsetY([-16, 16])
+        .onStart(() => {
+          if (closing.current) {
+            return;
           }
-        });
-      } else {
-        x.value = withTiming(0, POP);
-      }
-    });
+          Keyboard.dismiss();
+          x.stopAnimation();
+        })
+        .onUpdate(e => {
+          if (closing.current) {
+            return;
+          }
+          x.setValue(Math.min(Math.max(e.translationX, 0), widthRef.current));
+        })
+        .onEnd(e => {
+          if (closing.current) {
+            return;
+          }
+          const complete =
+            e.translationX > widthRef.current * COMPLETE_DISTANCE ||
+            e.velocityX > COMPLETE_VELOCITY;
+          if (complete) {
+            slideOut();
+          } else {
+            slideTo(0, POP);
+          }
+        }),
+    [slideOut, slideTo, x]
+  );
 
-  const screenStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: x.value }],
-  }));
-  const dimStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
-  }));
+  const dimOpacity = useMemo(
+    () =>
+      x.interpolate({
+        inputRange: [0, width],
+        outputRange: [LIST_DIM, 0],
+        extrapolate: 'clamp',
+      }),
+    [x, width]
+  );
 
   return (
     <View
@@ -120,17 +165,23 @@ export const SwipeBackLayer: React.FC<SwipeBackLayerProps> = ({
       style={styles.host}
       onLayout={e => {
         const next = e.nativeEvent.layout.width;
-        if (next > 0) {
-          width.value = next;
+        if (next > 0 && next !== widthRef.current) {
+          setWidth(next);
         }
       }}
     >
       <Animated.View
         pointerEvents="none"
-        style={[styles.fill, styles.dim, dimStyle]}
+        style={[styles.fill, styles.dim, { opacity: dimOpacity }]}
       />
       <GestureDetector gesture={swipeBack}>
-        <Animated.View style={[styles.fill, styles.screen, screenStyle]}>
+        <Animated.View
+          style={[
+            styles.fill,
+            styles.screen,
+            { transform: [{ translateX: x }] },
+          ]}
+        >
           {children(close)}
         </Animated.View>
       </GestureDetector>

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { UNREAD_CAP_PAGE } from '../../roomStore/roomsSlice';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { IMessage } from '../../types/types';
@@ -86,7 +87,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 
   const lastMessage = useMemo(() => {
-    if (!chat?.messages || chat.messages.length === 0) {return undefined;}
+    if (!chat?.messages || chat.messages.length === 0) {
+      return chat?.lastMessage?.body
+        ? withAuthorFallback(chat.lastMessage as IMessage)
+        : undefined;
+    }
 
     for (let i = chat.messages.length - 1; i >= 0; i--) {
       const msg = chat.messages[i];
@@ -95,7 +100,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       }
     }
     return undefined;
-  }, [chat?.messages, withAuthorFallback]);
+  }, [chat?.messages, chat?.lastMessage, withAuthorFallback]);
 
   // Mirrors web's formatter: tolerates undefined/garbage inputs (returns
   // undefined instead of "NaN:NaN"), and uses HH:MM today / MM/DD this
@@ -266,7 +271,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
                   fontWeight: '600',
                 }}
               >
-                {chat.unreadMessages || ''}
+                {chat.unreadCapped && (chat.unreadMessages || 0) >= UNREAD_CAP_PAGE
+                  ? `${chat.unreadMessages}+`
+                  : chat.unreadMessages || ''}
               </Text>
             </View>
           ) : null}
@@ -284,4 +291,4 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   );
 };
 
-export default ChatRoomItem;
+export default React.memo(ChatRoomItem);

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -5,22 +5,21 @@ import {
   LastRoomMessageText,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
+import { getEmojiNativeById } from '../../../helpers/emoji';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
 
 /**
- * Renders the per-room last-message preview when the latest message
- * is a reaction (emoji). The `emoji` field is expected to already be
- * a unicode glyph (the reaction stanza carries the rendered character,
- * not an `:id:`) so we just render it as-is — no emoji-id resolution
- * library needed. If a legacy payload still ships an `:id:`, it
- * renders verbatim instead of crashing.
+ * The room-list preview when the latest event in a room is a reaction.
+ * The stanza carries the emoji's short name (`joy`, `+1`), as on web — it
+ * is resolved to the glyph here; a glyph or unknown id renders as is.
  */
 const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
+  const name = (user?.name || '').trim();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
-      <LastRoomMessageText>{emoji || ''}</LastRoomMessageText>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <LastRoomMessageText>{emoji ? getEmojiNativeById(emoji) : ''}</LastRoomMessageText>
     </LastRoomMessageContainer>
   );
 };