@ethora/chat-component-rn 26.5.20 → 26.6.10

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 && (

package/src/components/MessageBubble/MessageTranslate.tsx

@@ -0,0 +1,182 @@
+import React, { FC, useCallback, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { IConfig, IMessage } from '../../types/types';
+import { CustomDivider } from './CustomDivider';
+import { CustomMessageText } from '../styled/StyledComponents';
+import { useT } from '../../i18n/useT';
+import { toBaseLanguage } from '../../i18n/strings';
+import { useMessageTranslation } from '../../hooks/useMessageTranslation';
+
+interface MessageTranslateProps {
+  message: IMessage;
+  isUser: boolean;
+  config?: IConfig;
+  /**
+   * The reader's target language, resolved ONCE by the parent (Message.tsx)
+   * and shared with auto mode, so the two can never ask for different
+   * languages.
+   */
+  readerLocale?: string;
+}
+
+type HostPhase = 'idle' | 'loading' | 'done' | 'error';
+
+/**
+ * Manual-mode message translation (LinkedIn-style "Translate" link).
+ *
+ * Manual is AUTO BEHIND A TAP — the same translation, revealed on press,
+ * not a second mechanism. Both read what the stanza already carries on
+ * `message.translations`; neither calls a translation service.
+ *
+ * That is enforced by sharing `useMessageTranslation` with auto rather than
+ * re-deriving the lookup here. The previous copy (ported verbatim from web,
+ * which still has it) drifted in two ways that both pointed the same
+ * direction — a link that could not deliver:
+ *
+ *   - its target language ended at the literal `'en'` instead of the
+ *     reader's own `langSource`, so for every host that lets the reader
+ *     pick — the normal case — a French reader's tap asked the message for
+ *     an ENGLISH translation and fell into `translation.failed`;
+ *   - it offered the link on a source-vs-target language compare alone,
+ *     without checking a translation was actually attached, so even with
+ *     the right locale a never-translated message showed a dead link.
+ *
+ * The link now appears only when there is something to reveal, which makes
+ * the failure state unreachable on this path.
+ *
+ * A host-supplied `config.translates.onTranslate` is the one asynchronous
+ * case: it can produce a translation nothing on the stanza predicts, so
+ * there the link is offered on the language compare and loading/error still
+ * apply.
+ */
+const MessageTranslate: FC<MessageTranslateProps> = ({
+  message,
+  isUser,
+  config,
+  readerLocale,
+}) => {
+  const t = useT();
+  const translates = config?.translates;
+  const hasHostTranslator = typeof translates?.onTranslate === 'function';
+
+  const originalText = String(message?.body || '');
+  const sourceLocale = (message as { langSource?: string })?.langSource;
+  const targetLocale =
+    readerLocale || translates?.readerLocale || config?.i18n?.locale || 'en';
+
+  // The exact call auto mode makes, with the exact same locale.
+  const attached = useMessageTranslation(message, targetLocale, true);
+
+  const [revealed, setRevealed] = useState(false);
+  const [showOriginal, setShowOriginal] = useState(false);
+  const [hostPhase, setHostPhase] = useState<HostPhase>('idle');
+  const [hostText, setHostText] = useState<string | null>(null);
+  const linkColor = config?.colors?.primary || '#0052CD';
+
+  // Region ignored on purpose: en-US vs en-CA is the same language, not a
+  // translation job. The FULL locale is still what `onTranslate` receives.
+  const languagesDiffer =
+    !!originalText.trim() &&
+    !!sourceLocale &&
+    toBaseLanguage(sourceLocale) !== toBaseLanguage(targetLocale);
+
+  const shouldShow = (() => {
+    if (isUser) {
+      return false;
+    }
+    // A host that supplies this keeps the locale logic and just tells us
+    // yes/no.
+    if (typeof translates?.showTranslateForMessage === 'function') {
+      return translates.showTranslateForMessage(message);
+    }
+    // Host translator: the outcome isn't knowable until it runs.
+    if (hasHostTranslator) {
+      return languagesDiffer;
+    }
+    // Stanza-attached: only offer what we can actually deliver.
+    return attached.hasTranslation;
+  })();
+
+  const runHostTranslate = useCallback(async () => {
+    if (!originalText.trim()) {
+      return;
+    }
+    setHostPhase('loading');
+    try {
+      const result = await translates?.onTranslate?.(originalText, {
+        sourceLocale,
+        targetLocale,
+        message,
+      });
+      if (result && result.trim()) {
+        setHostText(result);
+        setHostPhase('done');
+      } else {
+        setHostPhase('error');
+      }
+    } catch {
+      setHostPhase('error');
+    }
+  }, [originalText, translates, sourceLocale, targetLocale, message]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  const renderLink = (label: string, onPress: () => void) => (
+    <TouchableOpacity onPress={onPress} hitSlop={6}>
+      <Text style={[styles.link, { color: linkColor }]}>{label}</Text>
+    </TouchableOpacity>
+  );
+
+  const renderRevealed = (translatedText: string) => (
+    <View>
+      <CustomDivider
+        configColor={
+          isUser ? config?.colors?.secondary : config?.colors?.primary
+        }
+      />
+      <CustomMessageText colorUser="">
+        {showOriginal ? originalText : translatedText}
+      </CustomMessageText>
+      {renderLink(
+        showOriginal ? t('action.translate') : t('action.showOriginal'),
+        () => setShowOriginal((v) => !v)
+      )}
+    </View>
+  );
+
+  // Host-provided translator: asynchronous, and can genuinely fail.
+  if (hasHostTranslator) {
+    if (hostPhase === 'loading') {
+      return (
+        <Text style={[styles.link, { color: linkColor }]}>
+          {t('translation.translating')}
+        </Text>
+      );
+    }
+    if (hostPhase === 'error') {
+      return renderLink(t('translation.failed'), runHostTranslate);
+    }
+    if (hostPhase === 'done' && hostText) {
+      return renderRevealed(hostText);
+    }
+    return renderLink(t('action.translate'), runHostTranslate);
+  }
+
+  // Stanza-attached: nothing to await, nothing to fail.
+  if (!revealed) {
+    return renderLink(t('action.translate'), () => setRevealed(true));
+  }
+  return renderRevealed(attached.displayText);
+};
+
+const styles = StyleSheet.create({
+  link: {
+    marginTop: 4,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});
+
+export default MessageTranslate;

package/src/components/MessageBubble/TranslatedMessageBody.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+interface TranslatedMessageBodyProps {
+  /** Text as sent, in the sender's language. */
+  originalText: string;
+  accentColor?: string;
+  /** Renders the translated text (the parsed message body). */
+  children: ReactNode;
+  /**
+   * Whether this message was sent by the current user. The sender already
+   * knows what they wrote, so their own messages skip the quote-plus-
+   * translation treatment and just show the original (never translated).
+   */
+  isUser: boolean;
+}
+
+/**
+ * A message body that is showing a translation: the translated text reads
+ * as the primary content, with the original quoted above it (accent bar,
+ * dimmed) for reference — the same visual language MessageReply uses.
+ * Ported from the web SDK's TranslatedMessageBody. Own messages (`isUser`)
+ * show only the original.
+ */
+export const TranslatedMessageBody: React.FC<TranslatedMessageBodyProps> = ({
+  originalText,
+  accentColor = '#0052CD',
+  children,
+  isUser,
+}) => {
+  if (isUser) {
+    return <View>{children}</View>;
+  }
+  return (
+    <View>
+      <View style={[styles.quote, { borderLeftColor: accentColor }]}>
+        <Text style={styles.quoteText}>{originalText}</Text>
+      </View>
+      <View>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  quote: {
+    borderLeftWidth: 2,
+    paddingLeft: 8,
+    marginBottom: 6,
+  },
+  quoteText: {
+    fontSize: 13,
+    lineHeight: 19,
+    // Dimmed relative to the translated body — matches the web quote's
+    // opacity:0.6 look without depending on the (variable) text colour.
+    color: '#71717A',
+  },
+});
+
+export default TranslatedMessageBody;

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -12,7 +12,6 @@ import {
   View,
 } from 'react-native';
 import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
-import { IConfig } from '../../../types/types';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 
@@ -23,7 +22,6 @@ interface AttachSheetProps {
   onGallery: () => void;
   onDocument: () => void;
   primaryColor?: string;
-  /** For `typography.elements.attachSheet*` font overrides. */
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
@@ -206,7 +204,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                 </View>
                 <View style={styles.rowText}>
                   <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>{label}</Text>
-                  <Text style={styles.rowHint}>{hint}</Text>
+                  <Text style={[styles.rowHint, chatTextStyle(ts?.rowHint)]}>{hint}</Text>
                 </View>
               </TouchableOpacity>
             ))}

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -26,6 +26,7 @@ import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
 import Switch from '../../MainComponents/Switch';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
+import { getElementFont } from '../../../helpers/getElementFont';
 import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
@@ -268,6 +269,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
         headerTitle={'Chat Profile'}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>
             {activeRoom?.type === 'public' && (
@@ -320,7 +322,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           >
             {activeRoom.title || activeRoom.name}
           </UserName>
-          <UserStatus>
+          <UserStatus style={getElementFont(config, 'profileStatus')}>
             {activeRoom.usersCnt}{' '}
             {activeRoom.usersCnt > 1 ? 'members' : 'member'}
           </UserStatus>
@@ -333,13 +335,17 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         )}
         {!config?.disableChatInfo?.disableDescription && (
           <BorderedContainer>
-            <LabelData>Description</LabelData>
+            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
+              Description
+            </LabelData>
             <Label>{activeRoom?.description || '—'}</Label>
           </BorderedContainer>
         )}
         {!config?.disableChatInfo?.disableType && (
           <BorderedContainer>
-            <LabelData>Chat type</LabelData>
+            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
+              Chat type
+            </LabelData>
             <Label>{activeRoom.type || '—'}</Label>
           </BorderedContainer>
         )}
@@ -428,7 +434,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                           {user.firstName} {user.lastName}
                         </Label>
                         {user.last_active && (
-                          <LabelData>
+                          <LabelData style={getElementFont(config, 'profileSectionLabel')}>
                             {new Date(user.last_active * 1000).toLocaleString()}
                           </LabelData>
                         )}

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -6,6 +6,8 @@ import {
 } from '../styledModalComponents';
 import { SaveIcon } from '../../../assets/icons';
 import ModalHeaderComponent from '../ModalHeaderComponent';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
@@ -18,6 +20,7 @@ import {
   Platform,
   TouchableOpacity,
   StyleSheet,
+  Share,
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { PlayIcon } from '../../../assets/icons';
@@ -47,8 +50,8 @@ const isGviewPreviewable = (mime: string | undefined | null) => {
   return GVIEW_PREVIEWABLE.has(mime.toLowerCase().split(';')[0]!.trim());
 };
 
-// Full-screen video preview on expo-video (expo-av <Video> is deprecated
-// and rendered blank on Android). `contentFit: contain` fits the clip to
+// Full-screen video preview on expo-video (the discontinued expo-av
+// <Video> rendered blank on Android). `contentFit: contain` fits the clip to
 // the area with the surrounding letterbox painted as the view's own
 // (transparent → theme) background, NOT black. `textureView` so the play
 // overlay composites on top and nothing is clipped on Android.
@@ -109,6 +112,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const { config } = useChatSettingState();
 
   // Cache the SAF directory the user granted so saving several documents
   // in a row doesn't re-prompt for a folder every time (Android only).
@@ -204,13 +208,25 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         await FileSystem.writeAsStringAsync(destUri, base64, {
           encoding: FileSystem.EncodingType.Base64,
         });
+
+        showToast({
+          id: Date.now().toString(),
+          title: 'Success',
+          message: 'Save successful',
+          type: 'success',
+        });
+        return;
       }
 
-      showToast({
-        id: Date.now().toString(),
-        title: 'Success',
-        message: 'Save successful',
-        type: 'success',
+      // iOS (and any non-Android): there is no app-writable "Downloads"
+      // folder, and MediaLibrary only accepts images/videos — which is why
+      // documents previously hit the success toast without ever being
+      // saved. Present the system share sheet so the user can "Save to
+      // Files", AirDrop, etc. The sheet itself is the confirmation (the
+      // user may cancel), so we don't show a "Save successful" toast here.
+      await Share.share({
+        url: download.uri,
+        title: fileName,
       });
     } catch (err) {
       console.error('Error saving file:', err);
@@ -377,6 +393,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       <ModalHeaderComponent
         handleCloseModal={closeModal}
         headerTitle={'File preview'}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>
             <Button onPress={saveClick}>
@@ -392,7 +409,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           flex: 1,
           justifyContent: 'center',
           // NOTE: do NOT set overflow:'hidden' here — on Android it clips
-          // hardware-accelerated children (expo-av Video TextureView and
+          // hardware-accelerated children (expo-video TextureView and
           // react-native-webview) to nothing, so video/PDF/doc previews
           // render blank while plain <Image> survives.
           overflow: 'visible',