@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useId, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { canEditMessage } from '../../e2ee';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -8,6 +9,7 @@ import {
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
 import {
+  Animated,
   Text,
   StyleSheet,
   View,
@@ -20,6 +22,12 @@ import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
+import { getEmojiNativeById } from '../../helpers/emoji';
+import {
+  quickReactionIds,
+  reactionPickerEnabled,
+  reactionsEnabled,
+} from '../../helpers/reactionsConfig';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -36,6 +44,8 @@ interface MessageInteractionsProps {
   handleDeleteMessage: () => void;
   handleEditMessage: () => void;
   handleReactionMessage: (id: string) => void;
+  /** Opens the full emoji picker (the "+" in the reaction row). */
+  onOpenEmojiPicker?: () => void;
 }
 
 const MessageInteractions: React.FC<MessageInteractionsProps> = ({
@@ -47,6 +57,8 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleReplyMessage: replyMessage,
   handleDeleteMessage,
   handleEditMessage,
+  handleReactionMessage,
+  onOpenEmojiPicker,
 }) => {
   const { showToast } = useToast();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
@@ -65,6 +77,27 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   );
 
   const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+  const [barSize, setBarSize] = useState({ width: 0, height: 0 });
+  const showReactions = reactionsEnabled(config);
+  const quickIds = useMemo(() => quickReactionIds(config), [config]);
+  const showPicker = reactionPickerEnabled(config) && !!onOpenEmojiPicker;
+
+  // Entrance: the menu pops out of its anchor (scale + fade) and the chat
+  // dims a touch behind it. Started once the menu has been measured and
+  // placed — before that it sits invisible at a provisional spot.
+  const reveal = useRef(new Animated.Value(0)).current;
+  const placed = !!position && !!menuSize.width && !!menuSize.height;
+  useEffect(() => {
+    if (!placed) {
+      return;
+    }
+    Animated.spring(reveal, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 24,
+      bounciness: 7,
+    }).start();
+  }, [placed, reveal]);
 
   // Live keyboard height so the menu knows the REAL space below the message.
   // Without this the position math used the full screen height and happily
@@ -88,6 +121,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     return () => subs.forEach((s) => s.remove());
   }, []);
 
+  const handleBarLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width && height && (width !== barSize.width || height !== barSize.height)) {
+      setBarSize({ width, height });
+    }
+  };
+
   const handleMenuLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
     if (
@@ -132,12 +172,15 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     if (!menuSize.width || !menuSize.height) {
       return { top: position.bottom, left: position.left, opacity: 0 };
     }
+    const barReserve = showReactions && barSize.height ? barSize.height + 10 : 0;
 
     const { width: screenWidth, height: screenHeight } =
       Dimensions.get('window');
     const bottomReserve = (config?.keyboardVerticalOffset ?? 0) + 24;
     const topReserve = 16;
     const sideMargin = 8;
+    // Breathing room between the bubble and the menu.
+    const gap = 10;
 
     // The keyboard occludes the bottom `keyboardHeight` px, so the real
     // visible bottom edge is above it. Measuring space below against this
@@ -145,14 +188,14 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     // when the keyboard is open and the message sits near the input.
     const visibleBottom = screenHeight - keyboardHeight;
 
-    const spaceBelow = visibleBottom - position.bottom - bottomReserve;
-    const spaceAbove = position.top - topReserve;
+    const spaceBelow = visibleBottom - position.bottom - gap - bottomReserve;
+    const spaceAbove = position.top - gap - topReserve - barReserve;
 
     let top: number;
     if (spaceBelow >= menuSize.height) {
-      top = position.bottom;
+      top = position.bottom + gap;
     } else if (spaceAbove >= menuSize.height) {
-      top = position.top - menuSize.height;
+      top = position.top - gap - menuSize.height;
     } else {
       top = Math.max(
         topReserve,
@@ -171,7 +214,37 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     );
 
     return { top, left };
-  }, [position, menuSize, config?.keyboardVerticalOffset, keyboardHeight]);
+  }, [position, menuSize, barSize.height, showReactions, config?.keyboardVerticalOffset, keyboardHeight]);
+
+  const barPosition = useMemo(() => {
+    if (!position || !showReactions) {return undefined;}
+    if (!barSize.width || !barSize.height) {
+      return { top: position.top, left: position.left, opacity: 0 };
+    }
+    const { width: screenWidth } = Dimensions.get('window');
+    const sideMargin = 8;
+    const gap = 8;
+    const rightAligned = screenWidth - position.right < position.left;
+    let left = rightAligned ? position.right - barSize.width : position.left;
+    left = Math.max(sideMargin, Math.min(left, screenWidth - barSize.width - sideMargin));
+    const above = position.top - gap - barSize.height;
+    const menuTop = (memoPosition as { top?: number } | undefined)?.top;
+    const top =
+      above >= 16
+        ? above
+        : (menuTop ?? position.bottom) + (menuSize.height || 0) + gap;
+    return { top, left };
+  }, [position, showReactions, barSize, memoPosition, menuSize.height]);
+
+  const localBarPosition = useMemo(() => {
+    if (!barPosition) {return undefined;}
+    return {
+      ...barPosition,
+      top: (barPosition as { top: number }).top - originY,
+      left: (barPosition as { left: number }).left - originX,
+    };
+  }, [barPosition, originX, originY]);
+
 
   // Window coords (memoPosition) → host-local coords. The overlay host
   // sits below the status bar / header, so subtract its measured origin.
@@ -187,29 +260,117 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   const content =
     config?.disableInteractions || message.isDeleted ? null : (
       <View style={styles.overlayFill}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-        <View
-          style={[styles.contextMenu, themedStyles.menu, localPosition]}
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu}>
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.dim, { opacity: reveal }]}
+          />
+        </Pressable>
+        {showReactions && (
+          <Animated.View
+            testID="reaction-bar"
+            onLayout={handleBarLayout}
+            style={[
+              styles.reactionBar,
+              { backgroundColor: theme.surface, shadowColor: theme.shadow },
+              localBarPosition,
+              placed && barSize.height
+                ? {
+                    opacity: reveal,
+                    transform: [
+                      {
+                        scale: reveal.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0.6, 1],
+                        }),
+                      },
+                    ],
+                  }
+                : null,
+            ]}
+          >
+            {quickIds.map((id) => (
+              <Pressable
+                key={id}
+                testID={`quick-reaction-${id}`}
+                onPress={() => {
+                  handleReactionMessage(id);
+                  closeMenu();
+                }}
+                style={({ pressed }) => [
+                  styles.reactionItem,
+                  pressed && { backgroundColor: theme.surfaceHighlight },
+                ]}
+              >
+                <Text style={styles.reactionGlyph}>{getEmojiNativeById(id)}</Text>
+              </Pressable>
+            ))}
+            {showPicker && (
+              <Pressable
+                testID="quick-reaction-more"
+                onPress={() => {
+                  closeMenu();
+                  onOpenEmojiPicker?.();
+                }}
+                style={({ pressed }) => [
+                  styles.reactionMore,
+                  { backgroundColor: theme.surfaceSecondary },
+                  pressed && { backgroundColor: theme.surfaceHighlight },
+                ]}
+              >
+                <Text style={[styles.reactionMoreText, { color: theme.text }]}>+</Text>
+              </Pressable>
+            )}
+          </Animated.View>
+        )}
+        <Animated.View
+          style={[
+            styles.contextMenu,
+            themedStyles.menu,
+            localPosition,
+            placed
+              ? {
+                  opacity: reveal,
+                  transform: [
+                    {
+                      scale: reveal.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0.6, 1],
+                      }),
+                    },
+                  ],
+                }
+              : null,
+          ]}
           onLayout={handleMenuLayout}
         >
+          {!isReply && !config?.disableReplies && (
+            <>
+              <MenuItem testID="menu-reply" onPress={handleReplyMessage}>
+                <Text style={[styles.menuText, themedStyles.text]}>
+                  {MESSAGE_INTERACTIONS.REPLY}
+                </Text>
+                <MESSAGE_INTERACTIONS_ICONS.REPLY color={theme.text} />
+              </MenuItem>
+              <Delimeter />
+            </>
+          )}
           <MenuItem onPress={() => handleCopyMessage(message.body!)}>
             <Text style={[styles.menuText, themedStyles.text]}>
               {MESSAGE_INTERACTIONS.COPY}
             </Text>
-            <MESSAGE_INTERACTIONS_ICONS.COPY />
+            <MESSAGE_INTERACTIONS_ICONS.COPY color={theme.text} />
           </MenuItem>
           {isUser && (
             <>
-              {/* Edit only for non-media messages (upstream guard) +
-                  consistent label styling (menuText). */}
-              {message?.isMediafile !== 'true' && (
+              {message?.isMediafile !== 'true' && canEditMessage(message) && (
                 <>
                   <Delimeter />
                   <MenuItem onPress={handleEditMessage}>
                     <Text style={[styles.menuText, themedStyles.text]}>
                       {MESSAGE_INTERACTIONS.EDIT}
                     </Text>
-                    <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                    <MESSAGE_INTERACTIONS_ICONS.EDIT color={theme.text} />
                   </MenuItem>
                 </>
               )}
@@ -222,7 +383,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               </MenuItem>
             </>
           )}
-        </View>
+        </Animated.View>
       </View>
     );
 
@@ -251,6 +412,45 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFill,
     backgroundColor: 'transparent',
   },
+  dim: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.18)',
+  },
+  reactionBar: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 28,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  reactionItem: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reactionGlyph: {
+    fontSize: 26,
+  },
+  reactionMore: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 2,
+  },
+  reactionMoreText: {
+    fontSize: 22,
+    lineHeight: 24,
+    fontWeight: '400',
+  },
   contextMenu: {
     position: 'absolute',
     backgroundColor: 'white',

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,
+  },
+});