@ethora/chat-component-rn 26.8.6 → 26.8.8

package/src/components/Modals/UserSettingsModal/LanguageCard.tsx

@@ -0,0 +1,144 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import {
+  appLanguageChoices,
+  chatLanguageChoices,
+  setAppLanguage,
+  setChatLanguage,
+  type LanguageChoice,
+} from '../../../services/languageSettings';
+
+interface LanguageCardProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * The user's two languages: the interface, and what messages are translated
+ * into. See services/languageSettings for what each one does and where it
+ * is kept.
+ */
+const LanguageCard: React.FC<LanguageCardProps> = ({ style, testID }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config, langSource, uiLocale } = useChatSettingState();
+
+  const appChoices = useMemo(() => appLanguageChoices(config), [config]);
+  const chatChoices = useMemo(() => chatLanguageChoices(config), [config]);
+  const appCurrent = uiLocale || config?.i18n?.locale || '';
+  // Unset follows the interface language - the backend's own rule.
+  const chatCurrent = langSource || appCurrent;
+
+  const pick = useCallback(
+    (kind: 'app' | 'chat', id: string) => {
+      void (kind === 'app' ? setAppLanguage(id) : setChatLanguage(id));
+    },
+    []
+  );
+
+  const same = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();
+
+  const group = (
+    kind: 'app' | 'chat',
+    label: string,
+    hint: string,
+    choices: LanguageChoice[],
+    current: string
+  ) => (
+    <View style={styles.group}>
+      <Text style={[styles.label, { color: theme.text }]}>{label}</Text>
+      <Text style={[styles.hint, { color: theme.textSecondary }]}>{hint}</Text>
+      <View style={styles.pills} accessibilityRole="radiogroup">
+        {choices.map((choice) => {
+          const selected = same(choice.id, current);
+          return (
+            <TouchableOpacity
+              key={choice.id}
+              testID={`settings-language-${kind}-${choice.id}`}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              activeOpacity={0.7}
+              onPress={() => pick(kind, choice.id)}
+              style={[
+                styles.pill,
+                {
+                  borderColor: selected ? theme.primary : theme.border,
+                  backgroundColor: selected ? theme.primary : theme.surfaceSecondary,
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.pillLabel,
+                  { color: selected ? theme.textOnPrimary : theme.text },
+                ]}
+              >
+                {choice.name}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={[style, styles.card]} testID={testID || 'settings-languages'}>
+      {group(
+        'app',
+        t('settings.language.app'),
+        t('settings.language.appHint'),
+        appChoices,
+        appCurrent
+      )}
+      {group(
+        'chat',
+        t('settings.language.chat'),
+        t('settings.language.chatHint'),
+        chatChoices,
+        chatCurrent
+      )}
+    </View>
+  );
+};
+
+export default LanguageCard;
+
+const styles = StyleSheet.create({
+  // Applied over the host's card style: its surface, this layout.
+  card: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 18,
+  },
+  group: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  hint: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  pills: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 6,
+  },
+  pill: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+  },
+  pillLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,6 +1,7 @@
 /** @format */
 
 import React, { useCallback, useMemo } from 'react';
+import LanguageCard from './LanguageCard';
 import {
   StyleSheet,
   Switch,
@@ -63,12 +64,17 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [t]
   );
 
+  const showPassword = config?.settings?.changePassword === true;
   const options = useMemo(
     () => [
       { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
       { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
+      // Off unless the host turned it on: not every backend has the endpoint.
+      ...(showPassword
+        ? [{ label: t('settings.password.title'), key: MODAL_TYPES.CHANGE_PASSWORD }]
+        : []),
     ],
-    [t]
+    [t, showPassword]
   );
 
   const handleClick = useCallback(
@@ -159,6 +165,12 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
           </View>
         ) : null}
 
+        {/* The interface language and the translation language; off
+            unless the host turned it on, as it writes to the profile. */}
+        {config?.settings?.languages?.enabled === true ? (
+          <LanguageCard style={styles.card} />
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -20,6 +20,10 @@ import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
 import { useTheme } from '../../hooks/useTheme';
 import { resolveTheme } from '../../theme/theme';
+import { LockIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
+import { composeName } from '../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
 
 interface ChatRoomItemProps {
   chat: IRoom;
@@ -37,6 +41,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   // Rows can be rendered with an explicit `config` prop (tests, hosts
   // composing their own list); honour its colours over the store's.
   const storeTheme = useTheme();
+  const t = useT();
   const theme = useMemo(
     () => (config ? resolveTheme(config) : storeTheme),
     [config, storeTheme]
@@ -61,19 +66,12 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
       const localId = rawUserId.split('@')[0];
       const entry = usersSet?.[localId] ?? usersSet?.[rawUserId];
       const fromUsersSet = entry
-        ? `${entry.firstName ?? ''} ${entry.lastName ?? ''}`.trim()
+        ? composeName(entry.firstName, entry.lastName)
         : '';
 
-      // usersSet first, exactly like Message.tsx: it's the live store, so
-      // a renamed user updates here too. The message's own `name` is the
-      // fallback that carries broadcast/system senders ("Ethora"), which
-      // never appear in usersSet.
+      const ownName = String(message?.user?.name || '').trim();
       const safeName =
-        fromUsersSet ||
-        String(message?.user?.name || '').trim() ||
-        localId ||
-        rawUserId ||
-        'Unknown';
+        fromUsersSet || (isUnresolvedSenderId(ownName) ? '' : ownName);
 
       return {
         ...message,
@@ -176,7 +174,21 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           }}
         >
           <ChatInfo>
-            <ChatName text={displayName} />
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+              <View style={{ flexShrink: 1 }}>
+                <ChatName text={displayName} />
+              </View>
+              {chat?.e2ee && (
+                <View
+                  accessible
+                  accessibilityRole="image"
+                  accessibilityLabel={t('e2ee.roomEncrypted')}
+                  testID="room-e2ee-lock"
+                >
+                  <LockIcon width={13} height={13} color={theme.textSecondary} />
+                </View>
+              )}
+            </View>
           </ChatInfo>
           {stamp ? (
             <UserCount

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -6,6 +6,7 @@ import LastMessagePhoto from './styled/LastMessagePhoto';
 import LastMessageEmoji from './styled/LastMessageEmoji';
 import LastMessageFile from './styled/LastMessageFile';
 import LastAudioMessage from './styled/LastAudioMessage';
+import LastMessageSealed from './styled/LastMessageSealed';
 
 interface LastMessageItemProps {
   lastMessage: LastMessage;
@@ -14,6 +15,10 @@ interface LastMessageItemProps {
 const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
   const { body, emoji, mimetype } = lastMessage;
 
+  if (lastMessage?.clientEncrypted === 'true') {
+    return <LastMessageSealed {...lastMessage} />;
+  }
+
   if (mimetype) {
     if (mimetype.startsWith('image/')) {
       return <LastMessagePhoto {...lastMessage} />;

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -33,7 +33,9 @@ const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
   const theme = useTheme();
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
+      {!!user?.name && (
+        <LastRoomMessageName numberOfLines={1}>{user.name}</LastRoomMessageName>
+      )}
       <AudioRow>
         <PlayButton>
           <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -43,7 +43,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
 
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',
@@ -67,7 +67,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
             }}
           />
         ) : (
-          <FileIcon style={{ width: '20px', height: '20px' }} />
+          <FileIcon width={20} height={20} />
         )}
         <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -47,7 +47,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',

package/src/components/RoomComponents/styled/LastMessageSealed.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { LastMessage } from '../../../types/types';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { LockIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
+import { useT } from '../../../i18n/useT';
+
+interface LastMessageSealedProps extends Pick<LastMessage, 'user'> {}
+
+const LastMessageSealed: FC<LastMessageSealedProps> = ({ user }) => {
+  const t = useT();
+  const theme = useTheme();
+  const name = user?.name;
+
+  return (
+    <LastRoomMessageContainer>
+      {!!name && <LastRoomMessageName>{name}:</LastRoomMessageName>}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        <LockIcon width={14} height={14} color={theme.textSecondary} />
+        <LastRoomMessageText>{t('media.sealedFile')}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageSealed;

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -62,7 +62,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
     : 'file';
   return (
     <LastRoomMessageContainer>
-      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      {!!user?.name && <LastRoomMessageName>{user.name}:</LastRoomMessageName>}
       <View
         style={{
           display: 'flex',

package/src/components/Thread/ThreadWrapper.tsx

@@ -23,10 +23,13 @@ import MessageList from '../MainComponents/MessageList';
 import ModalHeaderComponent from '../Modals/ModalHeaderComponent';
 import { setCloseActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
 import { EditWrapper } from '../MainComponents/EditWrapper';
+import EncryptedSendNotice from '../MainComponents/EncryptedSendNotice';
+import { MAX_SEAL_BYTES } from '../../e2ee/limits';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { KeyboardInputDock } from '../MainComponents/KeyboardInputDock';
 import {
@@ -67,6 +70,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   const reduxStore = useStore<RootState>();
   const { config } = useChatSettingState();
   const theme = useTheme();
+  const t = useT();
   const insets = useSafeAreaInsets();
   const { width: windowWidth } = useWindowDimensions();
   const roomJid = activeMessage.roomJid;
@@ -85,6 +89,10 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
   // Same field the room header and the list show (`name` can be the id).
   const roomDisplayName = String(room?.title || room?.name || 'chat').trim();
 
+  const e2eeRoom = !!room?.e2ee;
+  const e2eeOn = config?.e2ee?.enabled === true;
+  const maxMediaBytes = e2eeRoom && e2eeOn ? MAX_SEAL_BYTES : undefined;
+
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
 
@@ -211,7 +219,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
           style={[styles.fill, { backgroundColor: theme.surface }]}
         >
           <View style={[styles.fill, { backgroundColor: theme.chatBackground }]}>
-            <ModalHeaderComponent headerTitle="Thread" handleCloseModal={close} />
+            <ModalHeaderComponent headerTitle={t('thread.title')} handleCloseModal={close} />
             <MessageList
               loadMoreMessages={loadMoreMessages}
               CustomMessage={CustomMessageComponent}
@@ -233,6 +241,10 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
               DockTag === View ? { paddingBottom: dockPadding } : null,
             ]}
           >
+            {e2eeRoom && !e2eeOn && !editAction?.isEdit ? (
+              <EncryptedSendNotice />
+            ) : (
+            <>
             <Pressable
               testID="thread-also-send"
               accessibilityRole="checkbox"
@@ -257,7 +269,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
                 numberOfLines={1}
                 style={[styles.alsoText, { color: theme.textSecondary }]}
               >
-                Also send to{' '}
+                {t('thread.alsoSendTo')}{' '}
                 <Text style={{ color: theme.primary, fontWeight: '600' }}>
                   {roomDisplayName}
                 </Text>
@@ -274,11 +286,14 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
               sendMedia={sendMedia}
               sendMessage={editAction?.isEdit ? sendEditMessage : sendMessage}
               config={config}
+              maxMediaBytes={maxMediaBytes}
               onFocus={sendStartComposing}
               onBlur={sendEndComposing}
               isLoading={!!room?.isLoading}
               isMessageProcessing={isLastMessageFromUserAndProcessing(roomJid)}
             />
+            </>
+            )}
           </DockTag>
         </KeyboardAvoidingView>
 

package/src/components/UsersList/UsersList.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useEffect,
 } from 'react';
+import { composeName } from '../../helpers/displayName';
 import { ModalTitle, LabelData } from '../Modals/styledModalComponents';
 import {
   ScrollableContainer,
@@ -101,7 +102,7 @@ const UsersList: React.FC<UsersListProps> = ({
               disabled={selectedUsers.length === 20}
             />
             <View>
-              <Label>{`${user.firstName} ${user.lastName}`}</Label>
+              <Label>{composeName(user.firstName, user.lastName)}</Label>
               {/* <LabelData>{user.xmppUsername}</LabelData> */}
             </View>
           </UserItem>

package/src/components/styled/SendInput.tsx

@@ -87,12 +87,14 @@ interface SendInputProps {
   inputHeight?: number;
   showPreview?: boolean;
   previewParser?: (text: string) => (string | JSX.Element)[];
+  maxMediaBytes?: number;
 }
 
 const SendInput: React.FC<SendInputProps> = ({
   sendMessage,
   sendMedia,
   config,
+  maxMediaBytes,
   onFocus,
   onBlur,
   editMessage,
@@ -151,14 +153,15 @@ const SendInput: React.FC<SendInputProps> = ({
     // Enforce the upload size cap before anything reaches the network.
     // The backend rejects oversized bodies with HTTP 413; catching it
     // here gives a clear message instead of a silent failed bubble.
+    const limit = maxMediaBytes ?? MAX_MEDIA_BYTES;
     const oversize = files.find(
-      (f) => typeof f.size === 'number' && f.size > MAX_MEDIA_BYTES
+      (f) => typeof f.size === 'number' && f.size > limit
     );
     if (oversize) {
       Alert.alert(
         'File too large',
         `"${oversize.name}" is ${formatBytes(oversize.size!)}. The maximum allowed size is ${Math.round(
-          MAX_MEDIA_BYTES / (1024 * 1024)
+          limit / (1024 * 1024)
         )} MB.`
       );
       return;

package/src/e2ee/crypto.ts

@@ -0,0 +1,194 @@
+import { cbc } from '@noble/ciphers/aes.js';
+import { ed25519, x25519 } from '@noble/curves/ed25519.js';
+import { hkdf } from '@noble/hashes/hkdf.js';
+import { hmac } from '@noble/hashes/hmac.js';
+import { sha256 } from '@noble/hashes/sha2.js';
+import { concatBytes, randomBytes, utf8ToBytes } from '@noble/hashes/utils.js';
+
+export { concatBytes, randomBytes, utf8ToBytes };
+
+export interface KeyPair {
+  priv: Uint8Array;
+  pub: Uint8Array;
+}
+
+export interface IdentityKey {
+  seed: Uint8Array;
+  pub: Uint8Array;
+}
+
+const ZERO_SALT = new Uint8Array(32);
+
+export function hkdfSha256(
+  ikm: Uint8Array,
+  salt: Uint8Array | undefined,
+  info: string,
+  length: number
+): Uint8Array {
+  return hkdf(sha256, ikm, salt ?? ZERO_SALT, utf8ToBytes(info), length);
+}
+
+export function hmacSha256(key: Uint8Array, data: Uint8Array): Uint8Array {
+  return hmac(sha256, key, data);
+}
+
+export function aesEncrypt(
+  key: Uint8Array,
+  iv: Uint8Array,
+  data: Uint8Array
+): Uint8Array {
+  return cbc(key, iv).encrypt(data);
+}
+
+export function aesDecrypt(
+  key: Uint8Array,
+  iv: Uint8Array,
+  data: Uint8Array
+): Uint8Array {
+  return cbc(key, iv).decrypt(data);
+}
+
+export function generateKeyPair(): KeyPair {
+  const { secretKey, publicKey } = x25519.keygen();
+  return { priv: secretKey, pub: publicKey };
+}
+
+export function generateIdentity(): IdentityKey {
+  const { secretKey, publicKey } = ed25519.keygen();
+  return { seed: secretKey, pub: publicKey };
+}
+
+export function dh(priv: Uint8Array, pub: Uint8Array): Uint8Array {
+  return x25519.getSharedSecret(priv, pub);
+}
+
+export function identityDhPrivate(identity: IdentityKey): Uint8Array {
+  return ed25519.utils.toMontgomerySecret(identity.seed);
+}
+
+export function identityDhPublic(identityPub: Uint8Array): Uint8Array {
+  return ed25519.utils.toMontgomery(identityPub);
+}
+
+export function sign(identity: IdentityKey, message: Uint8Array): Uint8Array {
+  return ed25519.sign(message, identity.seed);
+}
+
+export function verify(
+  signature: Uint8Array,
+  message: Uint8Array,
+  identityPub: Uint8Array
+): boolean {
+  try {
+    return ed25519.verify(signature, message, identityPub);
+  } catch {
+    return false;
+  }
+}
+
+export function bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) {return false;}
+  let diff = 0;
+  for (let i = 0; i < a.length; i++) {diff |= a[i]! ^ b[i]!;}
+  return diff === 0;
+}
+
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const B64_VALUE = new Int16Array(128).fill(-1);
+for (let i = 0; i < B64.length; i++) {B64_VALUE[B64.charCodeAt(i)] = i;}
+
+export function toBase64(bytes: Uint8Array): string {
+  let out = '';
+  let i = 0;
+  for (; i + 2 < bytes.length; i += 3) {
+    const n = (bytes[i]! << 16) | (bytes[i + 1]! << 8) | bytes[i + 2]!;
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + B64[(n >> 6) & 63]! + B64[n & 63]!;
+  }
+  if (i + 1 === bytes.length) {
+    const n = bytes[i]! << 16;
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + '==';
+  } else if (i + 2 === bytes.length) {
+    const n = (bytes[i]! << 16) | (bytes[i + 1]! << 8);
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + B64[(n >> 6) & 63]! + '=';
+  }
+  return out;
+}
+
+export function fromBase64(text: string): Uint8Array {
+  const clean = text.replace(/\s+/g, '').replace(/=+$/, '');
+  if (clean.length % 4 === 1) {throw new Error('Invalid base64');}
+  const out = new Uint8Array(Math.floor((clean.length * 3) / 4));
+  let acc = 0;
+  let bits = 0;
+  let pos = 0;
+  for (let i = 0; i < clean.length; i++) {
+    const code = clean.charCodeAt(i);
+    const value = code < 128 ? B64_VALUE[code]! : -1;
+    if (value < 0) {throw new Error('Invalid base64');}
+    acc = (acc << 6) | value;
+    bits += 6;
+    if (bits >= 8) {
+      bits -= 8;
+      out[pos++] = (acc >> bits) & 0xff;
+    }
+  }
+  return out;
+}
+
+export function toHex(bytes: Uint8Array): string {
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export function randomInt(min: number, max: number): number {
+  const bytes = randomBytes(4);
+  const n = new DataView(bytes.buffer, bytes.byteOffset, 4).getUint32(0);
+  return min + (n % (max - min + 1));
+}
+
+export function bytesToUtf8(bytes: Uint8Array): string {
+  const chunks: string[] = [];
+  let units: number[] = [];
+  const push = (unit: number) => {
+    units.push(unit);
+    if (units.length >= 8192) {
+      chunks.push(String.fromCharCode.apply(null, units));
+      units = [];
+    }
+  };
+
+  let i = 0;
+  while (i < bytes.length) {
+    const b = bytes[i++]!;
+    if (b < 0x80) {
+      push(b);
+      continue;
+    }
+    const extra = b >= 0xf0 && b < 0xf8 ? 3 : b >= 0xe0 ? 2 : b >= 0xc2 ? 1 : -1;
+    let code = extra === 3 ? b & 0x07 : extra === 2 ? b & 0x0f : b & 0x1f;
+    let valid = extra > 0 && b < 0xf8 && i + extra <= bytes.length;
+    for (let k = 0; valid && k < extra; k++) {
+      const next = bytes[i + k]!;
+      if ((next & 0xc0) !== 0x80) {valid = false;}
+      code = (code << 6) | (next & 0x3f);
+    }
+    if (
+      !valid ||
+      (extra === 2 && code < 0x800) ||
+      (extra === 3 && (code < 0x10000 || code > 0x10ffff)) ||
+      (code >= 0xd800 && code <= 0xdfff)
+    ) {
+      push(0xfffd);
+      continue;
+    }
+    i += extra;
+    if (code > 0xffff) {
+      code -= 0x10000;
+      push(0xd800 | (code >> 10));
+      push(0xdc00 | (code & 0x3ff));
+    } else {
+      push(code);
+    }
+  }
+  if (units.length) {chunks.push(String.fromCharCode.apply(null, units));}
+  return chunks.join('');
+}