@ethora/chat-component-rn 26.5.21 → 26.6.10

package/src/components/MainComponents/ChatHeader.tsx

@@ -13,6 +13,8 @@ import { IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
 import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
+import { CallButtons } from '../VideoCalls/CallButtons';
+import { LanguageSelectorButton } from './LanguageSelectorButton';
 import { useDispatch } from 'react-redux';
 import Composing from '../styled/StyledInputComponents/Composing';
 import {
@@ -30,6 +32,7 @@ import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { getElementFont } from '../../helpers/getElementFont';
+import { useT } from '../../i18n/useT';
 
 interface ChatHeaderProps {
   currentRoom: IRoom;
@@ -47,6 +50,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const roomState = useRoomState(currentRoom.jid).room;
   const composing = roomState?.composing;
   const { config } = useChatSettingState();
+  const t = useT();
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({ roomJID: chat.jid }));
@@ -172,7 +176,14 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <ChatContainerHeaderLabel
                     style={[styles.subLabel, getElementFont(config, 'headerSubtitle')]}
                   >
-                    <Text>{`${currentRoom?.usersCnt} users`}</Text>
+                    <Text>
+                      {t(
+                        Number(currentRoom?.usersCnt) === 1
+                          ? 'header.userCountSingular'
+                          : 'header.userCountPlural',
+                        { count: Number(currentRoom?.usersCnt) || 0 }
+                      )}
+                    </Text>
                   </ChatContainerHeaderLabel>
                 )}
               </View>
@@ -180,13 +191,15 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           </ChatContainerHeaderBoxInfo>
         </CenterContainer>
 
-        {!config?.disableChatInfo?.disableRoomMenu ? (
-          <View style={styles.rightContainer}>
+        <View style={styles.rightContainer}>
+          {/* Renders nothing unless config.videoCalls is on and this is a
+              1:1 room, so it costs non-call hosts nothing. */}
+          <LanguageSelectorButton />
+          <CallButtons />
+          {!config?.disableChatInfo?.disableRoomMenu && (
             <RoomMenu handleLeaveClick={handleLeaveClick} />
-          </View>
-        ) : (
-          <View style={styles.rightContainer} />
-        )}
+          )}
+        </View>
       </ChatContainerHeader>
       {config?.chatHeaderAdditional?.enabled &&
           config.chatHeaderAdditional.element()}
@@ -209,8 +222,16 @@ const styles = StyleSheet.create({
     width: '15%',
   },
   rightContainer: {
-    alignItems: 'flex-end',
-    width: '15%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 4,
+    // Sized to its icons rather than a fixed 25%: the cluster is 1 to 4
+    // icons depending on config (globe, audio call, video call, room menu),
+    // and a fixed share either cramped them together or reserved dead space
+    // that the title could have used. `flexShrink: 0` keeps them intact
+    // while CenterContainer (flex:1, min-width:0) absorbs the difference.
+    flexShrink: 0,
   },
 });
 

package/src/components/MainComponents/ChatWrapper.tsx

@@ -129,6 +129,21 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     client.setActiveRoomJid?.(activeRoomJID || null);
   }, [client, activeRoomJID]);
 
+  // Pull the MUC roster as soon as a room opens (not just when the
+  // profile modal is opened — see ChatProfileModal). Message sender
+  // names fall back to the raw jid when a message doesn't carry its
+  // own senderFirstName/senderLastName, and that fallback depends on
+  // usersSet being populated; without this, any room the reader hasn't
+  // separately opened the profile modal for shows jids instead of names.
+  useEffect(() => {
+    if (!client || !activeRoomJID) {return;}
+    try {
+      client.getRoomMembersStanza?.(activeRoomJID);
+    } catch {
+      /* non-fatal */
+    }
+  }, [client, activeRoomJID]);
+
   const seededRoomJID = useMemo(
     () =>
       roomJID

package/src/components/MainComponents/LanguageSelectorButton.tsx

@@ -0,0 +1,53 @@
+import React, { FC, 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.
+ */
+export const LanguageSelectorButton: FC = () => {
+  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 (
+    <>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('language.select')}
+        onPress={() => setOpen(true)}
+        style={styles.button}
+        hitSlop={8}
+      >
+        <GlobeIcon color={getIconColor(config)} size={20} />
+      </TouchableOpacity>
+      <LanguageSelectorModal visible={open} onClose={() => setOpen(false)} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default LanguageSelectorButton;

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -0,0 +1,276 @@
+import React, { FC, 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 { Iso639_1Codes } from '../../types/models/language.model';
+import {
+  canReaderChooseTranslateMode,
+  resolveTranslateMode,
+} from '../../utils/translateModePolicy';
+import { useT } from '../../i18n/useT';
+import { toBaseLanguage } from '../../i18n/strings';
+import { getIconColor } from '../../helpers/getIconColor';
+
+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: FC<{ color?: string; size?: number }> = ({
+  color = '#8C8C8C',
+  size = 20,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Circle cx="10" cy="10" r="7.5" stroke={color} strokeWidth={1.5} />
+    <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"
+    />
+  </Svg>
+);
+
+/**
+ * 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: FC<{
+  visible: boolean;
+  onClose: () => void;
+}> = ({ 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: Iso639_1Codes) => {
+      dispatch(setLangSource(id));
+      onClose();
+    },
+    [dispatch, onClose]
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      {/* Backdrop closes on tap; the card swallows the press so a tap
+          inside it doesn't dismiss. */}
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable style={styles.card} onPress={() => {}}>
+          <Text style={styles.title}>{t('language.select')}</Text>
+
+          {showModeSwitcher && (
+            <View style={styles.section}>
+              <Text style={styles.sectionLabel}>
+                {t('translation.modeLabel')}
+              </Text>
+              <View style={styles.segmented}>
+                {(['auto', 'manual'] as const).map((mode) => {
+                  const selected = effectiveMode === mode;
+                  return (
+                    <TouchableOpacity
+                      key={mode}
+                      accessibilityRole="radio"
+                      accessibilityState={{ selected }}
+                      onPress={() => dispatch(setTranslateMode(mode))}
+                      style={[
+                        styles.segment,
+                        selected && styles.segmentSelected,
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.segmentText,
+                          selected && styles.segmentTextSelected,
+                        ]}
+                      >
+                        {mode === 'auto'
+                          ? t('translation.modeAuto')
+                          : t('translation.modeManual')}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          )}
+
+          {showLanguageList && (
+            <View style={styles.section}>
+              <Text style={styles.sectionLabel}>{t('language.select')}</Text>
+              <ScrollView style={styles.list}>
+                {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 (
+                    <TouchableOpacity
+                      key={option.id}
+                      accessibilityRole="radio"
+                      accessibilityState={{ selected }}
+                      onPress={() => selectLanguage(option.id)}
+                      style={styles.listRow}
+                    >
+                      <Text
+                        style={[
+                          styles.listRowText,
+                          selected && styles.listRowTextSelected,
+                        ]}
+                      >
+                        {option.name}
+                      </Text>
+                      {selected && (
+                        <Text
+                          style={[
+                            styles.check,
+                            { color: getIconColor(config) },
+                          ]}
+                        >
+                          ✓
+                        </Text>
+                      )}
+                    </TouchableOpacity>
+                  );
+                })}
+              </ScrollView>
+            </View>
+          )}
+
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <Text style={[styles.closeText, { color: getIconColor(config) }]}>
+              {t('action.cancel')}
+            </Text>
+          </TouchableOpacity>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+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;

package/src/components/MainComponents/RoomList.tsx

@@ -25,6 +25,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';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -40,6 +41,7 @@ const RoomList: React.FC<RoomListProps> = ({
   onRoomClick,
 }) => {
   const { config } = useChatSettingState();
+  const t = useT();
 
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -178,6 +180,20 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
+              {/* Search sits ABOVE the list rather than in its
+                  ListHeaderComponent. As a list header it was simply the
+                  first scrolling row, so the moment you scrolled the rooms
+                  it slid up and disappeared behind the opaque header band.
+                  Fixed here it stays reachable, which is the entire point
+                  of a search field over a long list. */}
+              <View style={styles.searchBar}>
+                <SearchInput
+                  icon={<SearchIcon height={20} />}
+                  value={searchTerm}
+                  onChangeText={handleSearchChange}
+                  placeholder={t('search.placeholder')}
+                />
+              </View>
               <FlatList
                 data={filteredChats}
                 keyExtractor={(item) => item.jid}
@@ -195,14 +211,6 @@ const RoomList: React.FC<RoomListProps> = ({
                     <ChatRoomItem chat={item} config={config} />
                   </Pressable>
                 )}
-                ListHeaderComponent={
-                  <SearchInput
-                    icon={<SearchIcon height={20} />}
-                    value={searchTerm}
-                    onChangeText={handleSearchChange}
-                    placeholder="Search..."
-                  />
-                }
                 style={styles.chatList}
               />
 
@@ -241,9 +249,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/src/components/MessageBubble/Message.tsx

@@ -25,7 +25,11 @@ import { setActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
 import styled from 'styled-components/native';
 import { IUser, MessageProps } from '../../types/types';
 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';
@@ -139,7 +143,69 @@ const CustomTimestampRow = styled.View<{media: boolean}>`
 const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
-  const { config, langSource, user} = useChatSettingState();
+  const { config, langSource, 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: RootState) => state.rooms.usersSet
+  ) as Record<string, any> | undefined;
+  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 } = useMessageHeapState();
   const { retryMessage } = useSendMessage();
 
@@ -289,12 +355,19 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // 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);
+  // 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(message.body),
+        config?.messageTextFilter.filterFunction(bodyToRender),
         bodyTextStyle
       )
-    : parseMessageBody(message.body, bodyTextStyle);
+    : parseMessageBody(bodyToRender, bodyTextStyle);
 
   const isFailed = failedIdSet.has(message.id);
   const isPending =
@@ -339,10 +412,10 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             disabled={!!config?.disableProfilesInteractions}
             accessible={!config?.disableProfilesInteractions}
           >
-            {message.user?.profileImage ? (
-              <CustomMessagePhoto source={{ uri: message.user.profileImage }} />
+            {senderProfileImage ? (
+              <CustomMessagePhoto source={{ uri: senderProfileImage }} />
             ) : (
-              <Avatar username={message.user.name} />
+              <Avatar username={senderDisplayName} />
             )}
           </CustomMessagePhotoContainer>
         )}
@@ -382,14 +455,14 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
-            {!isUser && (
+            {!isUser && hasRealSenderName && (
               <CustomUserName
                 color={config?.colors?.primary}
                 media={message?.isMediafile === 'true'}
                 fontSize={config?.typography?.senderName?.fontSize}
                 fontWeight={config?.typography?.senderName?.fontWeight as any}
               >
-                {message.user.name}
+                {senderDisplayName}
               </CustomUserName>
             )}
             {!isReply && message.mainMessage && (
@@ -421,18 +494,37 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                     fontSize={config?.typography?.messageText?.fontSize}
                     fontWeight={config?.typography?.messageText?.fontWeight as any}
                   >
-                    <Text>{messageText}</Text>
+                    {/* Auto mode: the parsed body IS the translation; wrap it
+                        so the original shows as a dimmed accent-bar quote
+                        above it. Plain body otherwise. */}
+                    {showInlineTranslation ? (
+                      <TranslatedMessageBody
+                        isUser={isUser}
+                        originalText={translationDisplay.originalText}
+                        accentColor={config?.colors?.primary}
+                      >
+                        <Text>{messageText}</Text>
+                      </TranslatedMessageBody>
+                    ) : (
+                      <Text>{messageText}</Text>
+                    )}
                   </CustomMessageText>
                 )}
               </>
             )}
-            {config?.enableTranslates && (
-              <MessageTranslations
-                message={message}
-                config={config}
-                langSource={langSource}
-              />
-            )}
+            {/* Manual mode: a "Translate" link the reader taps (auto mode
+                renders the translation inline in the body above). Never on
+                the reader's own messages. */}
+            {!isUser &&
+              isTranslatesEnabled &&
+              effectiveTranslateMode === 'manual' && (
+                <MessageTranslate
+                  message={message}
+                  config={config}
+                  isUser={isUser}
+                  readerLocale={readerLocale}
+                />
+              )}
             {/* <View style={styles.timestampRow}> */}
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (