@ethora/chat-component-rn 26.7.9 → 26.8.1

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,12 +1,17 @@
-import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
+import React, {FC, useEffect, useMemo, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
 import {
   setActiveModal,
   setConfig,
   setDeleteModal,
+  setLangSource,
   setStoreClient,
 } from '../../roomStore/chatSettingsSlice';
+import {
+  resolveExternalReaderLocaleLangSource,
+  resolveLegacyTranslatesLangSource,
+} from '../../helpers/resolveLangSource';
 import {ChatWrapperBox} from '../styled/ChatWrapperBox';
 import {Overlay, StyledModal} from '../styled/MediaModal';
 import ConnectionBanner from './ConnectionBanner';
@@ -23,19 +28,17 @@ import {
   setIsLoading,
   setLastViewedTimestamp,
 } from '../../roomStore/roomsSlice';
-import {refreshAuthTokensQuietly} from '../../networking/authRefresh';
+import {refresh} from '../../networking/apiClient';
 import RoomList from './RoomList';
 import {StyledLoaderWrapper} from '../styled/StyledComponents';
 import Modal from '../Modals/Modal/Modal';
 import ThreadWrapper from '../Thread/ThreadWrapper';
 import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
-import { usePendingNotification } from '../../hooks/usePendingNotification';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
-import {shallowEqual} from '../../helpers/shallowEqual';
 import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
 
 interface ChatWrapperProps {
@@ -62,8 +65,6 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     client: storedClient,
   } = useChatSettingState();
 
-  usePendingNotification();
-
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -116,6 +117,26 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(setDeleteModal({isDeleteModal: false}));
   };
 
+  // A host drives the reader's language from OUTSIDE the component through
+  // `config.translates.readerLocale` (their own switcher, or the testbed's
+  // Setup tab). Nothing was syncing it into `langSource`, so pinning it only
+  // redirected the incoming-translation lookup while the UI captions and the
+  // `<translate source>` on outgoing messages kept following the unset
+  // langSource — which is why picking a language appeared to do nothing.
+  //
+  // Its own effect, not part of init: it has to re-fire whenever the host
+  // changes the value mid-session. And it dispatches only when the value is
+  // actually set, so a host that leaves it unset never clobbers what the
+  // reader picked from the globe.
+  useEffect(() => {
+    const resolved = resolveExternalReaderLocaleLangSource(
+      config?.translates?.readerLocale
+    );
+    if (resolved) {
+      dispatch(setLangSource(resolved));
+    }
+  }, [config?.translates?.readerLocale, dispatch]);
+
   useEffect(() => {
     return () => {
       if (client && user.xmppPassword === '') {
@@ -165,23 +186,6 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(addRoom({roomData: buildSeedRoom(seededRoomJID)}));
   }, [seededRoomJID, seededRoomMissing, dispatch]);
 
-  // Presentational config flags (e.g. `disableHeader`) can change while the
-  // chat stays mounted — sync them to redux whenever `config` actually
-  // changes, not just at init. Kept separate from the init effect below so
-  // toggling a flag doesn't re-run client/token setup. Guarded with a
-  // shallow-equal check (not just the `config` reference) because hosts
-  // commonly pass an inline object literal (`<Chat config={{...}}/>`) that
-  // is a new reference on every render even when nothing in it changed —
-  // dispatching unconditionally there would re-render every config
-  // consumer (ChatRoom, modals, ...) on every host render.
-  const lastSyncedConfigRef = useRef<IConfig | undefined>(undefined);
-  useEffect(() => {
-    if (config && !shallowEqual(lastSyncedConfigRef.current, config)) {
-      lastSyncedConfigRef.current = config;
-      dispatch(setConfig(config));
-    }
-  }, [config, dispatch]);
-
   useEffect(() => {
     if (roomJID) {
       dispatch(
@@ -191,20 +195,18 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
       );
     }
 
-    // Top-up rotation after the client is up. Deduped inside
-    // `refreshAuthTokensQuietly`, so it can no longer race the 401
-    // interceptor into a second, parallel rotation — which the backend
-    // would read as reuse. Never rejects, hence no `.catch` here.
-    const ensureFreshTokens = () => {
-      if (config?.refreshTokens?.enabled) {
-        refreshAuthTokensQuietly();
-      }
-    };
-
     const initXmmpClient = async () => {
       // Only sync config to redux if we have one — passing `undefined`
       // wipes whatever XmppProvider already set up.
       if (config) {dispatch(setConfig(config));}
+      // Seeds only when the host actually set the legacy single-locale
+      // field, never on mere `enabled` — see resolveLangSource.
+      const legacyLangSource = resolveLegacyTranslatesLangSource(
+        config?.translates
+      );
+      if (legacyLangSource) {
+        dispatch(setLangSource(legacyLangSource));
+      }
       try {
         const hasUser =
           !!user?.defaultWallet?.walletAddress &&
@@ -283,7 +285,14 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             devPushLog('warn', 'initializeClient failed (legacy path)', err);
           }
           setInited(true);
-          ensureFreshTokens();
+          if (config?.refreshTokens?.enabled) {
+            // refresh() is fire-and-forget but rejects on bad
+            // refreshToken / network — surface via .catch instead of
+            // leaving the rejection unhandled (was bug #4, id:2).
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
@@ -298,7 +307,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          ensureFreshTokens();
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
@@ -315,7 +328,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             console.warn('getChatsPrivateStoreRequestStanza failed', err)
           );
           setInited(true);
-          ensureFreshTokens();
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         }
 
         dispatch(setIsLoading({loading: false}));

package/src/components/MainComponents/LoginWrapper.tsx

@@ -36,7 +36,6 @@ const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
         ...authData.data.user,
         token: authData.data.token,
         refreshToken: authData.data.refreshToken,
-        fileToken: (authData.data as any).fileToken || '',
       };
     } catch (error) {
       console.error('Login failed:', error);

package/src/components/MainComponents/MediaMessage.tsx

@@ -11,13 +11,10 @@ import {
   Text,
   View,
 } from 'react-native';
-import { isLikelyAudio } from '../../helpers/mimeToExtension';
-import { getDisplayFileName } from '../../helpers/getDisplayFileName';
+import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
-import { useFileToken } from '../../hooks/useFileToken';
-import { appendFileToken } from '../../helpers/secureFileUrl';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -139,26 +136,22 @@ const PendingMediaMessage: React.FC<{
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
-  location: rawLocation,
-  messageText: rawMessageText,
+  location,
+  messageText,
   message,
   isUser,
 }) => {
-  const fileToken = useFileToken();
-  const location = appendFileToken(rawLocation, fileToken);
-  const messageText = appendFileToken(rawMessageText, fileToken);
-
   if (mimeType) {
-    const displayName = getDisplayFileName({
-      originalName: (message as any)?.originalName,
+    const displayName = deriveDisplayFilename({
       fileName: message?.fileName,
-      location: rawLocation || rawMessageText,
-      mimetype: mimeType,
+      originalName: (message as any)?.originalName,
+      url: location || messageText,
+      mime: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
       displayName,
-      rawLocation,
+      location,
       {
         duration: (message as any)?.duration,
         waveForm: (message as any)?.waveForm,
@@ -181,12 +174,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageImage
             fileName={displayName}
-            originalName={(message as any)?.originalName}
-            // Full-size original: opened by the preview modal.
             fileURL={location || messageText || ''}
-            // ...and the thumbnail the bubble actually renders, which is
-            // what the web client shows too.
-            locationPreview={messageText}
             mimetype={mimeType}
           />
         );
@@ -194,13 +182,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageVideo
             fileName={displayName}
-            originalName={(message as any)?.originalName}
             fileURL={location || ''}
-            // `messageText` is the message's locationPreview — the poster
-            // frame the backend generated for this video. Handing it over
-            // lets the bubble render as a still + play badge instead of
-            // mounting a video surface per row (see VideoMessage).
-            previewURL={messageText}
             mimetype={mimeType}
           />
         );

package/src/components/MainComponents/MessageContainer.tsx

@@ -1,6 +1,5 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
-import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
 import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
@@ -47,10 +46,7 @@ export const MessageContainer: FC<MessageContainerProps> = ({
   isReply,
   className,
 }) => {
-  // Bug #41: `message.user.id === walletAddress` used to treat two
-  // empty/undefined ids as a match, briefly rendering catch-up messages
-  // from other users as our own. isOwnMessage() never does that.
-  const isUser = isOwnMessage(message, walletAddress);
+  const isUser = message.user.id === walletAddress;
 
   const messageDate = new Date(message.date);
 

package/src/components/MainComponents/MessageList.tsx

@@ -28,8 +28,6 @@ import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
-import { getChatBackgroundColor } from '../../helpers/getChatBackground';
-import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -55,15 +53,6 @@ interface MessageListProps<TMessage extends IMessage> {
   config?: IConfig;
   isReply: boolean;
   activeMessage?: IMessage;
-  /**
-   * Fired whenever the "read up to" boundary changes: `null` while the
-   * user is at the bottom (everything is read), or the timestamp of the
-   * newest message they'd actually seen when they scrolled away from it.
-   * Lets the host mark only what was actually viewed as read instead of
-   * stamping "now" on unmount/leave, which would wrongly clear unread
-   * messages the user scrolled up and never got back down to.
-   */
-  onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
 const MessageList = <TMessage extends IMessage>({
@@ -77,7 +66,6 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
-  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
@@ -344,7 +332,6 @@ const MessageList = <TMessage extends IMessage>({
         // counter so the badge disappears with the arrow.
         setUnreadWhileScrolledUp(0);
         newestSeenTsRef.current = null;
-        onReadBoundaryChange?.(null);
       } else {
         isUserAtBottomRef.current = false;
         if (hasUserScrolledRef.current) {
@@ -362,12 +349,11 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
-          onReadBoundaryChange?.(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages, onReadBoundaryChange]
+    [memoizedMessages]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -396,7 +382,6 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -407,8 +392,6 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    onReadBoundaryChange?.(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomJID]);
 
   const BackgroundImage = useMemo(() => {
@@ -430,7 +413,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: getChatBackgroundColor(config) },
+        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
@@ -439,7 +422,7 @@ const MessageList = <TMessage extends IMessage>({
           {CustomMessage && (
             <CustomMessage
               message={activeMessage}
-              isUser={isOwnMessage(activeMessage, user)}
+              isUser={activeMessage.user.id === user.walletAddress}
               isReply={isReply}
             />
           )}
@@ -459,9 +442,7 @@ const MessageList = <TMessage extends IMessage>({
         onLayout={handleLayout}
         inverted={true}
         keyboardShouldPersistTaps="handled"
-        keyboardDismissMode={
-          config?.keepKeyboardOpenOnScroll ? 'none' : 'interactive'
-        }
+        keyboardDismissMode="interactive"
         contentContainerStyle={styles.flatListContent}
         ListFooterComponent={
           loading && memoizedMessages.length > 15 ? (

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -69,27 +69,27 @@ export const ProfileImagePlaceholder: React.FC<
     if (words.length === 0) {return '';}
 
     if (words.length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0]?.[0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[1]?.[0] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
         ? words[1][0].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[0][1] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
         ? words[0][1].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length === 1) {
-      return /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
     }
@@ -97,26 +97,16 @@ export const ProfileImagePlaceholder: React.FC<
     return '';
   };
 
-  const getInitials = () =>
-    !imageSource && name ? getTwoUppercaseLetters(name) : '';
-
-  const imageSource =
-    typeof icon === 'string' && icon
-      ? { uri: icon }
-      : typeof icon === 'number'
-      ? icon
-      : icon && typeof (icon as any).uri === 'string' && (icon as any).uri
-      ? (icon as any)
-      : null;
+  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
 
   return (
     <Wrapper
-      bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
       size={size}
       isClickable={active || !!upload?.active}
     >
       <AvatarCircle
-        bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
         size={size}
         isClickable={active || !!upload?.active}
         onPress={
@@ -127,8 +117,11 @@ export const ProfileImagePlaceholder: React.FC<
             : undefined
         }
       >
-        {imageSource ? (
-          <AvatarImage source={imageSource} size={size} />
+        {icon ? (
+          <AvatarImage
+            source={typeof icon === 'string' ? { uri: icon } : icon as any}
+            size={size}
+          />
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
@@ -147,7 +140,7 @@ export const ProfileImagePlaceholder: React.FC<
           </Overlay>
         )}
       </AvatarCircle>
-      {remove?.enabled && imageSource && role !== 'participant' && (
+      {remove?.enabled && icon && role !== 'participant' && (
         <RemoveButton onPress={remove.onRemoveClick}>
           <RemoveButtonText>&times;</RemoveButtonText>
         </RemoveButton>

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react';
-import {Provider} from 'react-redux';
+import {Provider, useDispatch} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {store} from '../../roomStore';
+import {setConfig} from '../../roomStore/chatSettingsSlice';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
@@ -28,6 +29,21 @@ interface ChatWrapperProps {
   isVisible?: boolean;
 }
 
+// Mirrors the web SDK's ConfigEnabler (ReduxWrapper.tsx): keeps redux's
+// copy of the config in step with the prop. Without it setConfig is only
+// dispatched during XMPP init, so a host changing config mid-session (the
+// testbed's Setup toggles, a host flipping translates.readerLocale) kept
+// serving a STALE config to everything that reads it from the store —
+// which is why picking a reader language changed nothing.
+const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    if (!config) {return;}
+    dispatch(setConfig(config));
+  }, [config, dispatch]);
+  return null;
+};
+
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
   ({...props}) => {
     const memoizedConfig = useMemo(() => {
@@ -57,6 +73,7 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
 
     return (
       <Provider store={store}>
+        <ConfigEnabler config={memoizedConfig} />
         <SafeAreaProvider>
           {ownKeyboardHandling ? (
             <KeyboardProvider>{tree}</KeyboardProvider>