@ethora/chat-component-rn 26.5.21 → 26.6.10

package/lib/module/components/MainComponents/LanguageSelectorButton.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
+import { useT } from '../../i18n/useT';
+import { GlobeIcon, LanguageSelectorModal } from './LanguageSelectorModal';
+
+/**
+ * Globe button in the chat header that opens the reader's language picker.
+ *
+ * Renders only when translation is on. A host that drives the reader's
+ * language from its own settings screen (via `config.translates
+ * .readerLocale`) can hide this with `showLanguageSelector: false` rather
+ * than shipping two competing controls.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const LanguageSelectorButton = () => {
+  const {
+    config
+  } = useChatSettingState();
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const translates = config?.translates;
+  const enabled = Boolean(translates?.enabled || config?.enableTranslates);
+  if (!enabled || translates?.showLanguageSelector === false) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      accessibilityRole: "button",
+      accessibilityLabel: t('language.select'),
+      onPress: () => setOpen(true),
+      style: styles.button,
+      hitSlop: 8,
+      children: /*#__PURE__*/_jsx(GlobeIcon, {
+        color: getIconColor(config),
+        size: 20
+      })
+    }), /*#__PURE__*/_jsx(LanguageSelectorModal, {
+      visible: open,
+      onClose: () => setOpen(false)
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default LanguageSelectorButton;
+//# sourceMappingURL=LanguageSelectorButton.js.map

package/lib/module/components/MainComponents/LanguageSelectorButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","StyleSheet","TouchableOpacity","useChatSettingState","getIconColor","useT","GlobeIcon","LanguageSelectorModal","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","LanguageSelectorButton","config","t","open","setOpen","translates","enabled","Boolean","enableTranslates","showLanguageSelector","children","accessibilityRole","accessibilityLabel","onPress","style","styles","button","hitSlop","color","size","visible","onClose","create","width","height","borderRadius","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["components/MainComponents/LanguageSelectorButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAQC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,UAAU,EAAEC,gBAAgB,QAAQ,cAAc;AAC3D,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,IAAI,QAAQ,iBAAiB;AACtC,SAASC,SAAS,EAAEC,qBAAqB,QAAQ,yBAAyB;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAQA,OAAO,MAAMC,sBAA0B,GAAGA,CAAA,KAAM;EAC9C,MAAM;IAAEC;EAAO,CAAC,GAAGZ,mBAAmB,CAAC,CAAC;EACxC,MAAMa,CAAC,GAAGX,IAAI,CAAC,CAAC;EAChB,MAAM,CAACY,IAAI,EAAEC,OAAO,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMmB,UAAU,GAAGJ,MAAM,EAAEI,UAAU;EACrC,MAAMC,OAAO,GAAGC,OAAO,CAACF,UAAU,EAAEC,OAAO,IAAIL,MAAM,EAAEO,gBAAgB,CAAC;EACxE,IAAI,CAACF,OAAO,IAAID,UAAU,EAAEI,oBAAoB,KAAK,KAAK,EAAE;IAC1D,OAAO,IAAI;EACb;EAEA,oBACEV,KAAA,CAAAF,SAAA;IAAAa,QAAA,gBACEf,IAAA,CAACP,gBAAgB;MACfuB,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAEV,CAAC,CAAC,iBAAiB,CAAE;MACzCW,OAAO,EAAEA,CAAA,KAAMT,OAAO,CAAC,IAAI,CAAE;MAC7BU,KAAK,EAAEC,MAAM,CAACC,MAAO;MACrBC,OAAO,EAAE,CAAE;MAAAP,QAAA,eAEXf,IAAA,CAACH,SAAS;QAAC0B,KAAK,EAAE5B,YAAY,CAACW,MAAM,CAAE;QAACkB,IAAI,EAAE;MAAG,CAAE;IAAC,CACpC,CAAC,eACnBxB,IAAA,CAACF,qBAAqB;MAAC2B,OAAO,EAAEjB,IAAK;MAACkB,OAAO,EAAEA,CAAA,KAAMjB,OAAO,CAAC,KAAK;IAAE,CAAE,CAAC;EAAA,CACvE,CAAC;AAEP,CAAC;AAED,MAAMW,MAAM,GAAG5B,UAAU,CAACmC,MAAM,CAAC;EAC/BN,MAAM,EAAE;IACNO,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAe3B,sBAAsB","ignoreList":[]}

package/lib/module/components/MainComponents/LanguageSelectorModal.js

@@ -0,0 +1,246 @@
+"use strict";
+
+import React, { useCallback } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { useDispatch } from 'react-redux';
+import { setLangSource, setTranslateMode } from '../../roomStore/chatSettingsSlice';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { LANGUAGE_OPTIONS } from '../../helpers/constants/LANGUAGE_OPTIONS';
+import { canReaderChooseTranslateMode, resolveTranslateMode } from '../../utils/translateModePolicy';
+import { useT } from '../../i18n/useT';
+import { toBaseLanguage } from '../../i18n/strings';
+import { getIconColor } from '../../helpers/getIconColor';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TEXT_PRIMARY = '#141414';
+const TEXT_MUTED = '#8C8C8C';
+const DIVIDER = '#F0F0F0';
+
+/**
+ * Ported verbatim from the web SDK's GlobeIcon (src/assets/icons.tsx) so
+ * both platforms draw the same mark. The previous RN shape was hand-rolled
+ * on a 24-box with two mirrored beziers whose meridian bulged only ~21% of
+ * the radius, which collapsed into a thin lens rather than reading as a
+ * sphere.
+ */
+export const GlobeIcon = ({
+  color = '#8C8C8C',
+  size = 20
+}) => /*#__PURE__*/_jsxs(Svg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx(Circle, {
+    cx: "10",
+    cy: "10",
+    r: "7.5",
+    stroke: color,
+    strokeWidth: 1.5
+  }), /*#__PURE__*/_jsx(Path, {
+    d: "M2.5 10h15M10 2.5c2 2.1 3 4.7 3 7.5s-1 5.4-3 7.5c-2-2.1-3-4.7-3-7.5s1-5.4 3-7.5Z",
+    stroke: color,
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none"
+  })]
+});
+
+/**
+ * The reader's language control.
+ *
+ * One switch drives two things on purpose: the language messages get
+ * translated INTO, and (through useT falling back to `langSource`) the
+ * language the interface itself is in. A reader who picks Français expects
+ * the whole chat in French, not French messages inside an English UI.
+ *
+ * The auto/manual switcher only renders when the host hasn't pinned
+ * `config.translates.forceType`, and the language list only when
+ * `showLanguageList` isn't false, for hosts that drive the reader's
+ * language from their own settings screen via `readerLocale`.
+ */
+export const LanguageSelectorModal = ({
+  visible,
+  onClose
+}) => {
+  const dispatch = useDispatch();
+  const t = useT();
+  const {
+    config,
+    langSource,
+    translateMode
+  } = useChatSettingState();
+  const translates = config?.translates;
+  const effectiveMode = resolveTranslateMode(translates, translateMode);
+  const showModeSwitcher = canReaderChooseTranslateMode(translates);
+  const showLanguageList = translates?.showLanguageList !== false;
+  const activeLocale = translates?.readerLocale || langSource;
+  const selectLanguage = useCallback(id => {
+    dispatch(setLangSource(id));
+    onClose();
+  }, [dispatch, onClose]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      style: styles.backdrop,
+      onPress: onClose,
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        style: styles.card,
+        onPress: () => {},
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: t('language.select')
+        }), showModeSwitcher && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionLabel,
+            children: t('translation.modeLabel')
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.segmented,
+            children: ['auto', 'manual'].map(mode => {
+              const selected = effectiveMode === mode;
+              return /*#__PURE__*/_jsx(TouchableOpacity, {
+                accessibilityRole: "radio",
+                accessibilityState: {
+                  selected
+                },
+                onPress: () => dispatch(setTranslateMode(mode)),
+                style: [styles.segment, selected && styles.segmentSelected],
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.segmentText, selected && styles.segmentTextSelected],
+                  children: mode === 'auto' ? t('translation.modeAuto') : t('translation.modeManual')
+                })
+              }, mode);
+            })
+          })]
+        }), showLanguageList && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionLabel,
+            children: t('language.select')
+          }), /*#__PURE__*/_jsx(ScrollView, {
+            style: styles.list,
+            children: LANGUAGE_OPTIONS.map(option => {
+              // Compare on the base language so a reader on "fr" still
+              // sees "Français" (id fr-CA) ticked.
+              const selected = !!activeLocale && toBaseLanguage(activeLocale) === toBaseLanguage(option.id);
+              return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                accessibilityRole: "radio",
+                accessibilityState: {
+                  selected
+                },
+                onPress: () => selectLanguage(option.id),
+                style: styles.listRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.listRowText, selected && styles.listRowTextSelected],
+                  children: option.name
+                }), selected && /*#__PURE__*/_jsx(Text, {
+                  style: [styles.check, {
+                    color: getIconColor(config)
+                  }],
+                  children: "\u2713"
+                })]
+              }, option.id);
+            })
+          })]
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onClose,
+          style: styles.closeButton,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.closeText, {
+              color: getIconColor(config)
+            }],
+            children: t('action.cancel')
+          })
+        })]
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24
+  },
+  card: {
+    width: '100%',
+    maxWidth: 420,
+    maxHeight: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 20,
+    padding: 20,
+    gap: 16
+  },
+  title: {
+    fontSize: 18,
+    color: TEXT_PRIMARY
+  },
+  section: {
+    gap: 8
+  },
+  sectionLabel: {
+    fontSize: 13,
+    color: TEXT_MUTED
+  },
+  segmented: {
+    flexDirection: 'row',
+    borderRadius: 12,
+    backgroundColor: '#F5F7F9',
+    padding: 4,
+    gap: 4
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 9,
+    alignItems: 'center'
+  },
+  segmentSelected: {
+    backgroundColor: '#fff'
+  },
+  segmentText: {
+    fontSize: 14,
+    color: TEXT_MUTED
+  },
+  segmentTextSelected: {
+    color: TEXT_PRIMARY,
+    fontWeight: '600'
+  },
+  list: {
+    maxHeight: 260
+  },
+  listRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: DIVIDER
+  },
+  listRowText: {
+    fontSize: 16,
+    color: TEXT_PRIMARY
+  },
+  listRowTextSelected: {
+    fontWeight: '600'
+  },
+  check: {
+    fontSize: 16
+  },
+  closeButton: {
+    alignItems: 'center',
+    paddingVertical: 12
+  },
+  closeText: {
+    fontSize: 15
+  }
+});
+export default LanguageSelectorModal;
+//# sourceMappingURL=LanguageSelectorModal.js.map

package/lib/module/components/MainComponents/LanguageSelectorModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Modal","Pressable","ScrollView","StyleSheet","Text","TouchableOpacity","View","Svg","Circle","Path","useDispatch","setLangSource","setTranslateMode","useChatSettingState","LANGUAGE_OPTIONS","canReaderChooseTranslateMode","resolveTranslateMode","useT","toBaseLanguage","getIconColor","jsx","_jsx","jsxs","_jsxs","TEXT_PRIMARY","TEXT_MUTED","DIVIDER","GlobeIcon","color","size","width","height","viewBox","fill","children","cx","cy","r","stroke","strokeWidth","d","strokeLinecap","strokeLinejoin","LanguageSelectorModal","visible","onClose","dispatch","t","config","langSource","translateMode","translates","effectiveMode","showModeSwitcher","showLanguageList","activeLocale","readerLocale","selectLanguage","id","transparent","animationType","onRequestClose","style","styles","backdrop","onPress","card","title","section","sectionLabel","segmented","map","mode","selected","accessibilityRole","accessibilityState","segment","segmentSelected","segmentText","segmentTextSelected","list","option","listRow","listRowText","listRowTextSelected","name","check","closeButton","closeText","create","flex","backgroundColor","alignItems","justifyContent","padding","maxWidth","maxHeight","borderRadius","gap","fontSize","flexDirection","paddingVertical","fontWeight","borderBottomWidth","borderBottomColor"],"sourceRoot":"../../../../src","sources":["components/MainComponents/LanguageSelectorModal.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MainComponents/RoomList.js

@@ -12,6 +12,7 @@ import Button from '../styled/Button';
 import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useT } from '../../i18n/useT';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const LONG_PRESS_THRESHOLD = 200;
 const RoomList = ({
@@ -22,6 +23,7 @@ const RoomList = ({
   const {
     config
   } = useChatSettingState();
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLongPress, setIsLongPress] = useState(false);
@@ -128,6 +130,16 @@ const RoomList = ({
           style: styles.scrollContainer,
           children: [/*#__PURE__*/_jsx(HeaderRoomList, {
             setDrawerOpen: toggleDrawer
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.searchBar,
+            children: /*#__PURE__*/_jsx(SearchInput, {
+              icon: /*#__PURE__*/_jsx(SearchIcon, {
+                height: 20
+              }),
+              value: searchTerm,
+              onChangeText: handleSearchChange,
+              placeholder: t('search.placeholder')
+            })
           }), /*#__PURE__*/_jsx(FlatList, {
             data: filteredChats,
             keyExtractor: item => item.jid,
@@ -148,14 +160,6 @@ const RoomList = ({
                 config: config
               })
             }),
-            ListHeaderComponent: /*#__PURE__*/_jsx(SearchInput, {
-              icon: /*#__PURE__*/_jsx(SearchIcon, {
-                height: 20
-              }),
-              value: searchTerm,
-              onChangeText: handleSearchChange,
-              placeholder: "Search..."
-            }),
             style: styles.chatList
           }), /*#__PURE__*/_jsx(HeaderRoomListMenu, {
             closeDrawer: closeDrawer,
@@ -189,9 +193,19 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between'
   },
+  searchBar: {
+    // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
+    // height. In a column parent that flex resolves VERTICALLY against a
+    // parent with no height of its own and collapses the field to nothing
+    // but its magnifier. As a row it resolves to width, which is what it
+    // meant back when the field was a list-header child.
+    flexDirection: 'row',
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    backgroundColor: '#FAFAFA'
+  },
   chatList: {
     flex: 1,
-    paddingTop: 8,
     paddingHorizontal: 16,
     backgroundColor: '#FAFAFA'
   }

package/lib/module/components/MainComponents/RoomList.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","useRef","View","StyleSheet","FlatList","Pressable","Animated","SearchInput","BurgerMenuIcon","SearchIcon","ChatRoomItem","useChatSettingState","Button","HeaderRoomList","HeaderRoomListMenu","getIconColor","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","LONG_PRESS_THRESHOLD","RoomList","chats","burgerMenu","onRoomClick","config","open","setOpen","searchTerm","setSearchTerm","isLongPress","setIsLongPress","isDrawerOpen","setDrawerOpen","pressTimer","containerRef","drawerAnimation","Value","current","overlayAnimation","handlePressIn","setTimeout","handlePressOut","clearTimeout","performClick","chat","handleSearchChange","text","getLastMessage","messages","length","filteredChats","lowerCaseSearchTerm","toLowerCase","chatsMap","Map","has","result","filter","hay","title","name","includes","sort","a","b","id","Number","set","get","toggleDrawer","closeDrawer","parallel","timing","toValue","duration","useNativeDriver","start","children","style","padding","borderRadius","backgroundColor","color","unstyled","EndIcon","onPress","ref","styles","container","roomListStyles","scrollContainer","data","keyExtractor","item","jid","renderItem","testID","split","accessibilityLabel","onPressIn","onPressOut","ListHeaderComponent","icon","height","value","onChangeText","placeholder","chatList","create","burgerButton","fontSize","width","flex","flexGrow","headerContainer","flexDirection","alignItems","justifyContent","paddingTop","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["components/MainComponents/RoomList.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","useRef","View","StyleSheet","FlatList","Pressable","Animated","SearchInput","BurgerMenuIcon","SearchIcon","ChatRoomItem","useChatSettingState","Button","HeaderRoomList","HeaderRoomListMenu","getIconColor","useT","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","LONG_PRESS_THRESHOLD","RoomList","chats","burgerMenu","onRoomClick","config","t","open","setOpen","searchTerm","setSearchTerm","isLongPress","setIsLongPress","isDrawerOpen","setDrawerOpen","pressTimer","containerRef","drawerAnimation","Value","current","overlayAnimation","handlePressIn","setTimeout","handlePressOut","clearTimeout","performClick","chat","handleSearchChange","text","getLastMessage","messages","length","filteredChats","lowerCaseSearchTerm","toLowerCase","chatsMap","Map","has","result","filter","hay","title","name","includes","sort","a","b","id","Number","set","get","toggleDrawer","closeDrawer","parallel","timing","toValue","duration","useNativeDriver","start","children","style","padding","borderRadius","backgroundColor","color","unstyled","EndIcon","onPress","ref","styles","container","roomListStyles","scrollContainer","searchBar","icon","height","value","onChangeText","placeholder","data","keyExtractor","item","jid","renderItem","testID","split","accessibilityLabel","onPressIn","onPressOut","chatList","create","burgerButton","fontSize","width","flex","flexGrow","headerContainer","flexDirection","alignItems","justifyContent","paddingTop","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["components/MainComponents/RoomList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MessageBubble/Message.js

@@ -2,7 +2,7 @@
 
 import React, { useRef, useState } from 'react';
 import { View, Pressable, StyleSheet, findNodeHandle, UIManager, Text, Keyboard } from 'react-native';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Avatar } from './Avatar';
 import MessageInteractions from './MessageInteractions';
 import { BottomReplyContainer } from './BottomReplyContainer';
@@ -13,7 +13,11 @@ import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { setActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
 import styled from 'styled-components/native';
 import MediaMessage from '../MainComponents/MediaMessage';
-import MessageTranslations from './MessageTranslations';
+import MessageTranslate from './MessageTranslate';
+import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
+import TranslatedMessageBody from './TranslatedMessageBody';
+import { useMessageTranslation } from '../../hooks/useMessageTranslation';
+import { resolveTranslateMode } from '../../utils/translateModePolicy';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { chatTextStyle } from '../../helpers/typography';
@@ -142,8 +146,53 @@ const Message = ({
   const {
     config,
     langSource,
-    user
+    user,
+    translateMode
   } = useChatSettingState();
+
+  // `enableTranslates` predates the `translates` config block; keep it
+  // working so existing hosts don't lose translations on upgrade.
+  const isTranslatesEnabled = Boolean(config?.translates?.enabled || config?.enableTranslates);
+  const effectiveTranslateMode = resolveTranslateMode(config?.translates, translateMode);
+
+  // Auto mode (the default): show the translation inline as the primary body,
+  // with the original quoted above. Own messages are never translated — the
+  // sender already knows what they wrote (TranslatedMessageBody skips the
+  // quote for isUser, and we simply render the original for them). Mirrors
+  // the web SDK's Message.tsx.
+  const isAutoTranslate = isTranslatesEnabled && effectiveTranslateMode !== 'manual';
+  const readerLocale = config?.translates?.readerLocale || config?.i18n?.locale || langSource;
+  const translationDisplay = useMessageTranslation(message, readerLocale, isAutoTranslate);
+
+  // `usersSet` is the canonical, continuously-updated identity store; the
+  // copy riding on a message is a snapshot of whoever sent it, whenever
+  // they sent it. Resolve both the avatar and the display name through
+  // usersSet first, falling back to the message for senders usersSet has
+  // never seen (broadcast/system accounts).
+  //
+  // This matters more since the persist layer stopped caching per-message
+  // avatars: a cache-restored message carries no profileImage at all (see
+  // PERSISTED_MESSAGE_USER_FIELDS), so reading only the message-level copy
+  // leaves a blank initials circle for senders whose name resolved fine.
+  const usersSet = useSelector(state => state.rooms.usersSet);
+  const senderRawId = String(message.user?.id || '');
+  const senderLocal = senderRawId.split('@')[0];
+  const senderEntry = usersSet?.[senderLocal] || usersSet?.[senderRawId];
+  // usersSet FIRST (mirrors the web SDK's Message.tsx): a message stored
+  // before usersSet hydrated carries the raw JID localpart as its
+  // `user.name`, so preferring `message.user.name` (as resolveSenderDisplayName
+  // does) would pin that JID on screen forever even after the real name is
+  // known. Reading usersSet first lets the name self-heal the moment the
+  // REST roster populates the cache. Falls back to the message's own name
+  // (which may carry senderFirstName/senderLastName from the wire) only when
+  // usersSet has never seen this sender.
+  const senderDisplayName = senderEntry ? `${senderEntry.firstName ?? ''} ${senderEntry.lastName ?? ''}`.trim() || senderEntry.name || senderLocal : message.user?.name || senderLocal || 'Unknown';
+  // A broadcast posted by the app itself arrives with the ROOM's own id as
+  // its occupant resource, so no roster ever resolves it and the name chain
+  // ends at 50 characters of hex. Captioning a bubble with that tells the
+  // reader strictly less than showing nothing.
+  const hasRealSenderName = !isUnresolvedSenderId(senderDisplayName);
+  const senderProfileImage = senderEntry?.profileImage || message.user?.profileImage || '';
   const {
     idSet,
     failedIdSet
@@ -257,7 +306,11 @@ const Message = ({
   // wraps content in <View>s which break Text-style inheritance, so the bubble
   // wrapper's fontSize alone never reached the actual text.
   const bodyTextStyle = chatTextStyle(config?.typography?.messageText);
-  const messageText = config?.messageTextFilter?.enabled ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body), bodyTextStyle) : parseMessageBody(message.body, bodyTextStyle);
+  // In auto mode, render the translation as the primary body — but NEVER for
+  // the reader's own messages (they wrote it; no point translating it back).
+  const showInlineTranslation = isAutoTranslate && translationDisplay.hasTranslation && !isUser;
+  const bodyToRender = showInlineTranslation ? translationDisplay.displayText : message.body;
+  const messageText = config?.messageTextFilter?.enabled ? parseMessageBody(config?.messageTextFilter.filterFunction(bodyToRender), bodyTextStyle) : parseMessageBody(bodyToRender, bodyTextStyle);
   const isFailed = failedIdSet.has(message.id);
   const isPending = !isFailed && (idSet.has(message.id) || message?.pending || false);
   const onRetryPress = () => {
@@ -293,12 +346,12 @@ const Message = ({
         onPress: config?.disableProfilesInteractions ? undefined : () => handleUserAvatarClick(message.user),
         disabled: !!config?.disableProfilesInteractions,
         accessible: !config?.disableProfilesInteractions,
-        children: message.user?.profileImage ? /*#__PURE__*/_jsx(CustomMessagePhoto, {
+        children: senderProfileImage ? /*#__PURE__*/_jsx(CustomMessagePhoto, {
           source: {
-            uri: message.user.profileImage
+            uri: senderProfileImage
           }
         }) : /*#__PURE__*/_jsx(Avatar, {
-          username: message.user.name
+          username: senderDisplayName
         })
       }), /*#__PURE__*/_jsx(Pressable
       // The Pressable fills the row's content area, so the bubble
@@ -336,12 +389,12 @@ const Message = ({
           isMedia: message?.isMediafile === 'true' && !message?.isDeleted,
           backgroundMessageUser: config?.messageColor?.backgroundMessageUser,
           backgroundMessage: config?.messageColor?.backgroundMessage,
-          children: [!isUser && /*#__PURE__*/_jsx(CustomUserName, {
+          children: [!isUser && hasRealSenderName && /*#__PURE__*/_jsx(CustomUserName, {
             color: config?.colors?.primary,
             media: message?.isMediafile === 'true',
             fontSize: config?.typography?.senderName?.fontSize,
             fontWeight: config?.typography?.senderName?.fontWeight,
-            children: message.user.name
+            children: senderDisplayName
           }), !isReply && message.mainMessage && /*#__PURE__*/_jsx(MessageReply, {
             handleReplyMessage: handleReplyMessage,
             isUser: isUser,
@@ -360,14 +413,22 @@ const Message = ({
               color: config?.messageColor?.color,
               fontSize: config?.typography?.messageText?.fontSize,
               fontWeight: config?.typography?.messageText?.fontWeight,
-              children: /*#__PURE__*/_jsx(Text, {
+              children: showInlineTranslation ? /*#__PURE__*/_jsx(TranslatedMessageBody, {
+                isUser: isUser,
+                originalText: translationDisplay.originalText,
+                accentColor: config?.colors?.primary,
+                children: /*#__PURE__*/_jsx(Text, {
+                  children: messageText
+                })
+              }) : /*#__PURE__*/_jsx(Text, {
                 children: messageText
               })
             })
-          }), config?.enableTranslates && /*#__PURE__*/_jsx(MessageTranslations, {
+          }), !isUser && isTranslatesEnabled && effectiveTranslateMode === 'manual' && /*#__PURE__*/_jsx(MessageTranslate, {
             message: message,
             config: config,
-            langSource: langSource
+            isUser: isUser,
+            readerLocale: readerLocale
           }), /*#__PURE__*/_jsxs(CustomTimestampRow, {
             media: message?.isMediafile === 'true',
             children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/_jsx(Text, {