@ethora/chat-component-rn 26.5.21 → 26.6.11

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/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;