@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/components/MainComponents/RoomStack.tsx

@@ -1,27 +1,24 @@
 import React, {
   forwardRef,
+  memo,
   ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
+  useState,
 } from 'react';
 import {
+  Animated,
   BackHandler,
+  Easing,
   Keyboard,
   LayoutChangeEvent,
   StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
-import Animated, {
-  Easing,
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 // Width of the left-edge strip that starts the back swipe.
@@ -37,6 +34,17 @@ export const LIST_DIM = 0.25;
 export const PUSH = { duration: 320, easing: Easing.bezier(0.2, 0.8, 0.2, 1) };
 export const POP = { duration: 240, easing: Easing.out(Easing.cubic) };
 
+/**
+ * Holds its children still while `frozen`: the list under an open room is
+ * fully covered, so re-rendering it on every store update (each incoming
+ * message) is wasted work on the JS thread. It thaws as soon as it is
+ * about to be seen again.
+ */
+const Freezable = memo(
+  ({ children }: { frozen: boolean; children: ReactNode }) => <>{children}</>,
+  (_prev, next) => next.frozen
+);
+
 export interface RoomStackHandle {
   /** Slide the room out, then call `onBack`. */
   pop: () => void;
@@ -59,16 +67,43 @@ interface RoomStackProps {
  * Two-layer stack for the list → room navigation: the room slides in over
  * the list, and a swipe from the left edge drags it back out, following the
  * finger, with the list parallaxing in underneath (the iOS navigation feel).
+ *
+ * Driven by RN's own `Animated` (native driver), not Reanimated: every layer
+ * derives from ONE value through interpolation, so the layers cannot drift
+ * apart, and a React re-render mid-flight cannot reset a layer to the style
+ * it was first rendered with.
  */
 export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
   ({ list, room, onBack, roomBackground, hardwareBack = true }, ref) => {
     const { width: windowWidth } = useWindowDimensions();
-    const width = useSharedValue(windowWidth);
+    const [width, setWidth] = useState(windowWidth);
+    const widthRef = useRef(width);
+    widthRef.current = width;
     const hasRoom = !!room;
     // Room's horizontal offset: 0 = covering the list, `width` = off-screen.
     // A room already open on the first render is shown in place.
-    const x = useSharedValue(hasRoom ? 0 : windowWidth);
-    const closing = useSharedValue(false);
+    const x = useRef(new Animated.Value(hasRoom ? 0 : windowWidth)).current;
+    const closing = useRef(false);
+
+    // True while the list is (about to be) visible under a moving room.
+    const [peeking, setPeeking] = useState(false);
+    // Bumped after every completed pop — see the settle effect below.
+    const [popCount, setPopCount] = useState(0);
+
+    const slideTo = useCallback(
+      (
+        toValue: number,
+        config: typeof PUSH,
+        done?: (finished: boolean) => void
+      ) => {
+        Animated.timing(x, {
+          toValue,
+          ...config,
+          useNativeDriver: true,
+        }).start(({ finished }) => done?.(finished));
+      },
+      [x]
+    );
 
     const isFirstRender = useRef(true);
     useEffect(() => {
@@ -76,31 +111,56 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
         isFirstRender.current = false;
         return;
       }
-      closing.value = false;
+      closing.current = false;
+      setPeeking(false);
+      x.stopAnimation();
+      x.setValue(widthRef.current);
       if (hasRoom) {
-        x.value = width.value;
-        x.value = withTiming(0, PUSH);
-      } else {
-        x.value = width.value;
+        slideTo(0, PUSH);
       }
     }, [hasRoom]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const onBackRef = useRef(onBack);
     onBackRef.current = onBack;
-    const finish = useCallback(() => onBackRef.current(), []);
+    const finish = useCallback(() => {
+      onBackRef.current();
+      setPopCount(count => count + 1);
+    }, []);
 
-    const pop = useCallback(() => {
-      if (closing.value) {
+    // `onBack` normally clears the room, and the effect above takes over.
+    // If the room is still (or again) there after a pop — something
+    // re-selected it — bring it back on screen: a room parked off-screen
+    // would leave the list visible but untouchable.
+    const hasRoomRef = useRef(hasRoom);
+    hasRoomRef.current = hasRoom;
+    useEffect(() => {
+      if (popCount === 0 || !hasRoomRef.current) {
         return;
       }
-      closing.value = true;
-      Keyboard.dismiss();
-      x.value = withTiming(width.value, POP, finished => {
+      closing.current = false;
+      setPeeking(false);
+      slideTo(0, POP);
+    }, [popCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const slideOut = useCallback(() => {
+      closing.current = true;
+      setPeeking(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 pop = useCallback(() => {
+      if (closing.current) {
+        return;
+      }
+      Keyboard.dismiss();
+      slideOut();
+    }, [slideOut]);
 
     useImperativeHandle(ref, () => ({ pop }), [pop]);
 
@@ -115,80 +175,93 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
       return () => sub.remove();
     }, [hasRoom, hardwareBack, pop]);
 
-    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();
+            setPeeking(true);
+            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, () => setPeeking(false));
+            }
+          }),
+      [slideOut, slideTo, x]
+    );
 
-    const onLayout = useCallback((e: LayoutChangeEvent) => {
-      const next = e.nativeEvent.layout.width;
-      if (next > 0 && next !== width.value) {
-        // Keep an off-screen room off-screen when the container resizes.
-        if (x.value === width.value) {
-          x.value = next;
+    const onLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0 && next !== widthRef.current) {
+          // Keep an off-screen room off-screen when the container resizes.
+          if (!hasRoomRef.current) {
+            x.setValue(next);
+          }
+          setWidth(next);
         }
-        width.value = next;
-      }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const roomStyle = useAnimatedStyle(() => ({
-      transform: [{ translateX: x.value }],
-    }));
-    // 1 while the room fully covers the list, 0 once it is gone.
-    const listStyle = useAnimatedStyle(() => {
-      const covered = 1 - Math.min(Math.max(x.value / width.value, 0), 1);
-      return {
-        transform: [{ translateX: -width.value * LIST_PARALLAX * covered }],
-      };
-    });
-    const dimStyle = useAnimatedStyle(() => ({
-      opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
-    }));
+      },
+      [x]
+    );
+
+    const { listShift, dimOpacity } = useMemo(
+      () => ({
+        listShift: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [-width * LIST_PARALLAX, 0],
+          extrapolate: 'clamp',
+        }),
+        dimOpacity: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [LIST_DIM, 0],
+          extrapolate: 'clamp',
+        }),
+      }),
+      [x, width]
+    );
 
     return (
       <View style={styles.container} onLayout={onLayout}>
         <Animated.View
-          style={[styles.layer, listStyle]}
+          style={[
+            styles.layer,
+            // Without a room the list always rests in place, whatever the
+            // animated value is doing.
+            hasRoom ? { transform: [{ translateX: listShift }] } : null,
+          ]}
           pointerEvents={hasRoom ? 'none' : 'auto'}
           accessibilityElementsHidden={hasRoom}
           importantForAccessibility={hasRoom ? 'no-hide-descendants' : 'auto'}
         >
-          {list}
+          <Freezable frozen={hasRoom && !peeking}>{list}</Freezable>
         </Animated.View>
         {hasRoom && (
           <>
             <Animated.View
               pointerEvents="none"
-              style={[styles.layer, styles.dim, dimStyle]}
+              style={[styles.layer, styles.dim, { opacity: dimOpacity }]}
             />
             <GestureDetector gesture={swipeBack}>
               <Animated.View
@@ -196,7 +269,7 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
                   styles.layer,
                   styles.room,
                   { backgroundColor: roomBackground },
-                  roomStyle,
+                  { transform: [{ translateX: x }] },
                 ]}
               >
                 {room}

package/src/components/MainComponents/SealedAttachment.tsx

@@ -0,0 +1,251 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { LockIcon } from '../../assets/icons';
+import FileDownload from '../styled/UnsupportedType';
+import CustomMessageImage from '../styled/MessageImage';
+import CustomMessageVideo from '../styled/VideoMessage';
+import AudioMessage from '../styled/AudioMessage';
+import {
+  BackgroundFile,
+  FileInformation,
+  FileName,
+  FileSize,
+  FileSizeContainer,
+  UnsupportedContainer,
+} from '../styled/StyledInputComponents/MediaComponents';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { IMessage } from '../../types/types';
+import { withFileToken } from '../../helpers/secureFileUrl';
+import type { OpenedFile } from '../../e2ee/sealedFiles';
+
+const sealedFiles = () =>
+  require('../../e2ee/sealedFiles') as typeof import('../../e2ee/sealedFiles');
+
+interface SealedRef {
+  location: string;
+  size?: string | number;
+}
+
+export const sealedAttachmentsOf = (message?: IMessage | null): SealedRef[] => {
+  if (!message) {return [];}
+  let raw: unknown = (message as any).attachments;
+  if (typeof raw === 'string') {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      raw = undefined;
+    }
+  }
+  if (Array.isArray(raw) && raw.length > 0) {
+    return raw
+      .filter((item) => item && typeof item.location === 'string' && item.location)
+      .map((item) => ({ location: item.location, size: item.size }));
+  }
+  return message.location
+    ? [{ location: message.location, size: message.size }]
+    : [];
+};
+
+const formatBytes = (value?: string | number): string => {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) {return '';}
+  if (bytes < 1024) {return `${bytes} B`;}
+  if (bytes < 1024 * 1024) {return `${(bytes / 1024).toFixed(0)} KB`;}
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+type CardState = 'idle' | 'working' | 'failed';
+
+const SealedItem: React.FC<{
+  attachment: SealedRef;
+  keyMaterial?: string;
+  isUser: boolean;
+}> = ({ attachment, keyMaterial, isUser }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config } = useChatSettingState();
+  const [state, setState] = useState<CardState>('idle');
+  const [progress, setProgress] = useState(0);
+  const [opened, setOpened] = useState<OpenedFile | null>(null);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  const { location } = attachment;
+
+  useEffect(() => {
+    if (!keyMaterial || !location) {return;}
+    let active = true;
+    sealedFiles()
+      .findOpened(location)
+      .then((found) => {
+        if (active && found) {setOpened(found);}
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [keyMaterial, location]);
+
+  const handlePress = useCallback(async () => {
+    if (opened || !keyMaterial || !location || state === 'working') {return;}
+    setState('working');
+    setProgress(0);
+    try {
+      const file = await sealedFiles().openSealedAttachment(
+        location,
+        withFileToken(location),
+        keyMaterial,
+        (fraction) => {
+          if (mounted.current) {setProgress(fraction);}
+        }
+      );
+      if (!mounted.current) {return;}
+      setOpened(file);
+      setState('idle');
+    } catch (error) {
+      console.warn('sealed attachment could not be opened', error);
+      if (mounted.current) {setState('failed');}
+    }
+  }, [keyMaterial, location, opened, state]);
+
+  if (opened) {
+    if (opened.mimetype.startsWith('image/')) {
+      return (
+        <View testID="sealed-attachment-image">
+          <CustomMessageImage
+            fileName={opened.name}
+            originalName={opened.name}
+            fileURL={opened.uri}
+            locationPreview={opened.uri}
+            mimetype={opened.mimetype}
+          />
+        </View>
+      );
+    }
+    if (opened.mimetype.startsWith('video/')) {
+      return (
+        <CustomMessageVideo
+          fileName={opened.name}
+          originalName={opened.name}
+          fileURL={opened.uri}
+          mimetype={opened.mimetype}
+        />
+      );
+    }
+    if (opened.mimetype.startsWith('audio/')) {
+      return (
+        <AudioMessage
+          src={opened.uri}
+          mimeType={opened.mimetype}
+          fileName={opened.name}
+          originalName={opened.name}
+        />
+      );
+    }
+    return (
+      <View testID="sealed-attachment">
+        <FileDownload
+          fileURL={opened.uri}
+          fileName={opened.name}
+          originalName={opened.name}
+          mimetype={opened.mimetype}
+          isUser={isUser}
+        />
+      </View>
+    );
+  }
+
+  const canOpen = !!keyMaterial && !!location;
+  const working = state === 'working';
+  const note = !canOpen
+    ? t(
+        config?.e2ee?.enabled === true
+          ? 'media.sealedUnavailable'
+          : 'media.sealedUnsupported'
+      )
+    : working
+      ? `${t('media.sealedDownloading')} ${Math.round(progress * 100)}%`
+      : state === 'failed'
+        ? t('media.sealedDownloadFailed')
+        : formatBytes(attachment.size) || t('media.sealedDownload');
+
+  return (
+    <UnsupportedContainer
+      isUser={isUser}
+      onPress={handlePress}
+      disabled={!canOpen || working}
+      activeOpacity={canOpen && !working ? 0.7 : 1}
+      testID="sealed-attachment"
+      accessibilityRole="button"
+      accessibilityLabel={t(canOpen ? 'media.sealedDownload' : 'media.sealedFile')}
+    >
+      <BackgroundFile>
+        {working ? (
+          <ActivityIndicator size="small" color={theme.textSecondary} />
+        ) : (
+          <LockIcon width={26} height={26} color={theme.textSecondary} />
+        )}
+      </BackgroundFile>
+      <FileInformation>
+        <FileName
+          numberOfLines={1}
+          isUser={isUser}
+          colorIsUser={config?.colors?.primary}
+          colorUsers={config?.colors?.secondary}
+        >
+          {t('media.sealedFile')}
+        </FileName>
+        <FileSizeContainer style={styles.note}>
+          <FileSize
+            numberOfLines={2}
+            style={state === 'failed' && canOpen ? { color: theme.danger } : undefined}
+          >
+            {note}
+          </FileSize>
+        </FileSizeContainer>
+      </FileInformation>
+    </UnsupportedContainer>
+  );
+};
+
+const SealedAttachment: React.FC<{ message?: IMessage; isUser: boolean }> = ({
+  message,
+  isUser,
+}) => {
+  const attachments = sealedAttachmentsOf(message);
+  const keys = message?.e2eeKeys;
+  if (attachments.length === 0) {
+    return <SealedItem attachment={{ location: '' }} isUser={isUser} />;
+  }
+  return (
+    <View style={styles.stack}>
+      {attachments.map((attachment, index) => (
+        <SealedItem
+          key={attachment.location || index}
+          attachment={attachment}
+          keyMaterial={keys?.[index]}
+          isUser={isUser}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default SealedAttachment;
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 8,
+  },
+  note: {
+    flexShrink: 1,
+    borderRadius: 10,
+  },
+});

package/src/components/MainComponents/SystemMessage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface SystemMessageProps {
   messageText?: string;
@@ -10,6 +11,9 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
   messageText,
   colors,
 }) => {
+  // Same pill as the day separator; `colors.secondary` is not a pill
+  // colour (see DateLabel).
+  const theme = useTheme();
   return (
     <View style={styles.container}>
       {/* maxWidth lives on this View (not the Text) so the Text reliably
@@ -19,10 +23,10 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
       <View
         style={[
           styles.bubble,
-          { backgroundColor: colors?.secondary || '#e7edf9' },
+          { backgroundColor: theme.dateLabelBackground },
         ]}
       >
-        <Text style={[styles.text, { color: colors?.primary || '#0052cd' }]}>
+        <Text style={[styles.text, { color: colors?.primary || theme.dateLabel }]}>
           {messageText}
         </Text>
       </View>

package/src/components/MessageBubble/Avatar.tsx

@@ -11,6 +11,8 @@ interface AvatarProps {
   firstName?: string;
   lastName?: string;
   style?: object;
+  /** Initials size (default 16) — small avatars need smaller text. */
+  textSize?: number;
 }
 
 const AvatarCircle = styled.View<{ bgColor?: string }>`
@@ -41,6 +43,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   firstName,
   lastName,
   style,
+  textSize,
 }) => {
   const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
@@ -85,7 +88,10 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
-      <AvatarText color={getAvatarTextColor(backgroundColor?.backgroundColor)}>
+      <AvatarText
+        color={getAvatarTextColor(backgroundColor?.backgroundColor)}
+        style={textSize ? { fontSize: textSize } : undefined}
+      >
         {getInitials()}
       </AvatarText>
     </AvatarCircle>