@ethora/chat-component-rn 26.5.21 → 26.6.10

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/FilePreviewModal/FilePreviewModal.tsx

@@ -50,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.
@@ -409,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',

package/src/components/UsersList/UsersList.tsx

@@ -19,6 +19,7 @@ import { debounce } from '../../helpers/debounce';
 import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
 import { useRoomState } from '../../hooks/useRoomState';
 import { Text, View } from 'react-native';
+import { useT } from '../../i18n/useT';
 
 interface UsersListProps {
   selectedUsers: RoomMember[];
@@ -36,6 +37,7 @@ const UsersList: React.FC<UsersListProps> = ({
   filter,
 }) => {
   const { usersSet } = useRoomState();
+  const t = useT();
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredUsers, setFilteredUsers] = useState<RoomMember[]>([]);
 
@@ -80,7 +82,7 @@ const UsersList: React.FC<UsersListProps> = ({
       )}
 
       <StyledInput
-        placeholder="Search users..."
+        placeholder={t('modal.selectUsers.searchPlaceholder')}
         value={searchTerm}
         onChangeText={setSearchTerm}
         style={{ width: '100%' }}

package/src/components/VideoCalls/CallButtons.tsx

@@ -0,0 +1,171 @@
+import React, { FC, useCallback } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { setCallError, startOutgoingCall } from '../../roomStore/callSlice';
+import { sendCallInviteSignal } from '../../networking/callTokenStanza';
+import { createChatCall } from '../../networking/api-requests/rooms.api';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { AudioCallIcon, VideoCallIcon } from './CallIcons';
+import { useT } from '../../i18n/useT';
+import { getIconColor } from '../../helpers/getIconColor';
+
+/**
+ * The audio / video call entry points for the chat header.
+ *
+ * Kept as its own component (rather than inlined into ChatHeader like the
+ * web SDK does) so the whole call feature stays inside components/VideoCalls
+ * and ChatHeader gains exactly one line. It renders nothing at all when
+ * calls are off, which is the common case.
+ *
+ * Gating mirrors the web rules: calls need `config.videoCalls.enabled`, a
+ * `livekitUrl`, a 1:1 (private) room, and no other call already running.
+ * Audio is a second opt-in on top of that (`enableAudioCalls`).
+ */
+export const CallButtons: FC = () => {
+  const dispatch = useDispatch();
+  const t = useT();
+  const { config, user } = useChatSettingState();
+  const call = useSelector((state: RootState) => state.call);
+  const currentRoom = useSelector((state: RootState) => {
+    const jid = state.rooms.activeRoomJID;
+    return jid ? state.rooms.rooms[jid] : null;
+  });
+
+  const videoCallsConfig = config?.videoCalls;
+  const allowedRoomTypes = videoCallsConfig?.allowedRoomTypes || ['private'];
+  const isVideoCallsEnabled = videoCallsConfig?.enabled === true;
+  const isPrivateRoom = currentRoom?.type === 'private';
+  const isRoomAllowed = isPrivateRoom && allowedRoomTypes.includes('private');
+  const hasLivekitUrl = Boolean(videoCallsConfig?.livekitUrl?.trim());
+  const isCallBusy = call.phase !== 'idle';
+  const canCall = isVideoCallsEnabled && isRoomAllowed && hasLivekitUrl;
+  const isAudioCallsEnabled =
+    canCall && videoCallsConfig?.enableAudioCalls === true;
+
+  const iconColor = getIconColor(config);
+
+  const placeCall = useCallback(
+    async (kind: 'audio' | 'video') => {
+      if (!canCall || isCallBusy || !currentRoom?.jid) {
+        return;
+      }
+
+      // The call API expects the bare room name (e.g. "${appId}_<uuid>"),
+      // which createRoomFromApi stores as the JID localpart.
+      // `currentRoom.name` looks tempting but actually holds the display
+      // title (the other party's "First Last"), so passing it produces
+      // nonsense URLs like /v1/chats/call/create/test2%20test2.
+      const chatName = currentRoom.jid.split('@')[0];
+      if (!chatName) {return;}
+
+      // Resolve the peer xmpp localpart so we can XMPP-signal them when we
+      // hang up or cancel, without this they'd keep ringing forever.
+      const selfLocal = String(user?.xmppUsername || '').split('@')[0];
+      const peer = (currentRoom.members || []).find((member: any) => {
+        const mLocal = String(member?.xmppUsername || '').split('@')[0];
+        return mLocal && mLocal !== selfLocal;
+      });
+      const peerXmppUsername = peer?.xmppUsername || null;
+
+      // Don't show "deleted" / "Deleted User" / "Unknown" as the dial
+      // screen title when the chat title is one of the server sentinels.
+      // Prefer the peer's first+last name, falling back to the bare chat name.
+      const rawTitle = String(currentRoom.name || '').trim();
+      const isBadTitle =
+        !rawTitle ||
+        ['deleted', 'deleted user', 'unknown', 'null'].includes(
+          rawTitle.toLowerCase()
+        );
+      const peerDisplay = peer
+        ? `${peer.firstName || ''} ${peer.lastName || ''}`.trim() ||
+          (peer as any).name ||
+          ''
+        : '';
+      const dialName =
+        (isBadTitle ? peerDisplay : rawTitle) || peerDisplay || chatName;
+
+      dispatch(
+        startOutgoingCall({
+          roomJid: currentRoom.jid,
+          roomName: dialName,
+          roomBareName: chatName,
+          kind,
+          peerXmppUsername,
+        })
+      );
+
+      // Server's broadcast call-token currently drops the `kind` attribute,
+      // so signal it directly to the peer first. Direct chat is fast
+      // (~50ms) and almost always lands before the server-relayed token
+      // (~200-300ms), so the callee enters the right UI mode.
+      if (peerXmppUsername) {
+        sendCallInviteSignal(kind, {
+          peerXmppUsername,
+          roomBareName: chatName,
+        });
+      }
+
+      try {
+        await createChatCall(chatName, { kind });
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : t('call.error.connectFailed');
+        dispatch(setCallError(message));
+      }
+    },
+    [canCall, isCallBusy, currentRoom, user?.xmppUsername, dispatch, t]
+  );
+
+  if (!canCall || isCallBusy) {
+    return null;
+  }
+
+  return (
+    <View style={styles.row}>
+      {isAudioCallsEnabled && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={t('call.action.startAudioCall')}
+          onPress={() => {
+            void placeCall('audio');
+          }}
+          style={styles.button}
+          hitSlop={8}
+        >
+          <AudioCallIcon color={iconColor} size={22} />
+        </TouchableOpacity>
+      )}
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.startVideoCall')}
+        onPress={() => {
+          void placeCall('video');
+        }}
+        style={styles.button}
+        hitSlop={8}
+      >
+        <VideoCallIcon color={iconColor} size={22} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default CallButtons;