stream-chat-react-native-core 10.0.0-rc.5 → 10.0.0

package/src/hooks/messagePreview/__tests__/useMessagePreviewText.test.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { renderHook } from '@testing-library/react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, PollResponseData, StreamChat } from 'stream-chat';
 
 import { Chat } from '../../../components/Chat/Chat';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
@@ -15,8 +15,12 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { useMessagePreviewText } from '../useMessagePreviewText';
 
 describe('useMessagePreviewText', () => {
-  const render = async (message: ReturnType<typeof generateMessage>) => {
+  const render = async (
+    message: ReturnType<typeof generateMessage>,
+    prepareClient?: (client: StreamChat) => void,
+  ) => {
     const { client } = await initiateClientWithChannels();
+    prepareClient?.(client);
     const wrapper = ({ children }: PropsWithChildren) => <Chat client={client}>{children}</Chat>;
     const { result } = renderHook(() => useMessagePreviewText({ message }), { wrapper });
     return result;
@@ -54,4 +58,35 @@ describe('useMessagePreviewText', () => {
     );
     expect(result.current).toBe('hello');
   });
+
+  describe('poll messages', () => {
+    const poll = {
+      id: 'poll-id',
+      latest_answers: [],
+      latest_votes_by_option: {},
+      name: 'Favourite colour?',
+      name_i18n: { es_text: '¿Color favorito?', language: 'en' },
+      options: [],
+      vote_count: 0,
+      vote_counts_by_option: {},
+    } as unknown as PollResponseData;
+
+    const renderPollMessage = (language: string) => {
+      const message = generateMessage({ poll, poll_id: poll.id, text: '' });
+      return render(message, (client) => {
+        (client.user as { language?: string }).language = language;
+        client.polls.hydratePollCache([message]);
+      });
+    };
+
+    it("shows the poll question in the user's language", async () => {
+      const result = await renderPollMessage('es');
+      expect(result.current).toBe('¿Color favorito?');
+    });
+
+    it('shows the original poll question when it has no translation', async () => {
+      const result = await renderPollMessage('de');
+      expect(result.current).toBe('Favourite colour?');
+    });
+  });
 });

package/src/hooks/messagePreview/useMessagePreviewText.tsx

@@ -14,9 +14,11 @@ import { useGroupedAttachments } from './useGroupedAttachments';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
+import { getTranslatedText } from '../../utils/i18n/getTranslatedText';
 
 const selector = (nextValue: PollState) => ({
   name: nextValue.name,
+  name_i18n: nextValue.name_i18n,
 });
 
 export const useMessagePreviewText = ({
@@ -24,10 +26,11 @@ export const useMessagePreviewText = ({
 }: {
   message?: LocalMessage | MessageResponse | DraftMessage | null;
 }) => {
-  const { t } = useTranslationContext();
+  const { t, userLanguage } = useTranslationContext();
   const { client } = useChatContext();
   const poll = client.polls.fromState(message?.poll_id ?? '');
-  const { name: pollName } = useStateStore(poll?.state, selector) ?? {};
+  const { name, name_i18n } = useStateStore(poll?.state, selector) ?? {};
+  const pollName = getTranslatedText(name_i18n, userLanguage) ?? name;
   const { giphys, audios, images, videos, files, voiceRecordings } = useGroupedAttachments(
     message?.attachments,
   );

package/src/hooks/useTranslatedMessage.ts

@@ -1,13 +1,7 @@
 import type { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
-
-/**
- * The key under which auto-translated text lives in `message.i18n`. The UI language can be any
- * registered string, while `message.i18n` only carries the languages the auto-translation endpoint
- * supports: the `in` check below makes an unsupported language fall through to the original text.
- */
-type TranslationKey = `${string}_text`;
+import { getTranslatedText } from '../utils/i18n/getTranslatedText';
 
 /**
  * Returns a copy of `message` with its text swapped for the auto-translation into `userLanguage`,
@@ -21,16 +15,17 @@ export const getTranslatedMessage = (
   message: LocalMessage | MessageResponse | undefined,
   userLanguage: string,
 ) => {
-  const translationKey: TranslationKey = `${userLanguage}_text`;
-
   if (!message) {
     return undefined;
   }
 
-  if (message.i18n && translationKey in message.i18n && message.type !== 'deleted') {
+  const translatedText =
+    message.type !== 'deleted' ? getTranslatedText(message.i18n, userLanguage) : undefined;
+
+  if (translatedText !== undefined) {
     return {
       ...message,
-      text: message.i18n[translationKey],
+      text: translatedText,
     };
   }
 

package/src/store/SqliteClient.ts

@@ -44,7 +44,7 @@ export class SqliteClientError extends Error {
 
 /** Wraps all direct use of `@op-engineering/op-sqlite`. */
 export class SqliteClient {
-  static dbVersion = 18;
+  static dbVersion = 19;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;

package/src/store/apis/__tests__/pollTranslations.test.ts

@@ -0,0 +1,136 @@
+import type { ChannelStateResponseFields, PollResponseData } from 'stream-chat';
+
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { BetterSqlite } from '../../../test-utils/BetterSqlite';
+import { SqliteClient } from '../../SqliteClient';
+import { getChannels } from '../getChannels';
+import { upsertChannels } from '../upsertChannels';
+import { upsertPoll } from '../upsertPoll';
+
+const POLL_ID = 'poll-id';
+
+const translatedPoll = {
+  answers_count: 0,
+  created_at: new Date('2026-10-27T10:00:00.000Z').getTime(),
+  created_by: { id: 'other-user' },
+  created_by_id: 'other-user',
+  description: 'For the team dinner',
+  description_i18n: { es_text: 'Para la cena del equipo', language: 'en' },
+  enforce_unique_vote: true,
+  id: POLL_ID,
+  latest_answers: [],
+  latest_votes_by_option: {},
+  max_votes_allowed: 1,
+  name: 'Favourite colour?',
+  name_i18n: { es_text: '¿Color favorito?', language: 'en' },
+  options: [
+    {
+      id: 'option-red',
+      poll_id: POLL_ID,
+      text: 'Red',
+      text_i18n: { es_text: 'Rojo', language: 'en' },
+    },
+  ],
+  updated_at: new Date('2026-10-27T10:00:00.000Z').getTime(),
+  vote_count: 0,
+  vote_counts_by_option: {},
+} as unknown as PollResponseData;
+
+/**
+ * The backend translates poll texts. The offline DB has to keep those translations, so a cold start
+ * offline shows the poll in the user's language, the same way message translations are kept.
+ */
+describe('poll translations in the offline DB', () => {
+  let cid: string;
+
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+
+    const channelResponse = generateChannelResponse({ members: [], messages: [] });
+    cid = channelResponse.channel.cid as string;
+    channelResponse.messages = [
+      generateMessage({ cid, poll: translatedPoll, poll_id: POLL_ID, text: '' }),
+    ] as unknown as typeof channelResponse.messages;
+    await upsertChannels({
+      channels: [channelResponse] as unknown as ChannelStateResponseFields[],
+      isLatestMessagesSet: true,
+    });
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+  });
+
+  const getStoredPoll = async () => {
+    const [channel] = await getChannels({ channelIds: [cid], userId: 'some-user' });
+    return channel.messages[0].poll;
+  };
+
+  it("keeps the question's, description's and options' translations", async () => {
+    const poll = await getStoredPoll();
+
+    expect(poll?.name_i18n).toEqual(translatedPoll.name_i18n);
+    expect(poll?.description_i18n).toEqual(translatedPoll.description_i18n);
+    expect(poll?.options[0].text_i18n).toEqual(translatedPoll.options[0].text_i18n);
+  });
+
+  it('replaces the translations when the poll is stored again', async () => {
+    const name_i18n = { de_text: 'Lieblingsfarbe?', language: 'en' };
+    await upsertPoll({ poll: { ...translatedPoll, name_i18n } as PollResponseData });
+
+    expect((await getStoredPoll())?.name_i18n).toEqual(name_i18n);
+  });
+
+  it('stores a poll without translations unchanged', async () => {
+    const {
+      description_i18n: _description_i18n,
+      name_i18n: _name_i18n,
+      ...untranslatedPoll
+    } = translatedPoll;
+    const untranslatedChannel = generateChannelResponse({ members: [], messages: [] });
+    const untranslatedCid = untranslatedChannel.channel.cid as string;
+    untranslatedChannel.messages = [
+      generateMessage({
+        cid: untranslatedCid,
+        poll: {
+          ...untranslatedPoll,
+          id: 'untranslated-poll-id',
+          options: [{ id: 'option-red', poll_id: 'untranslated-poll-id', text: 'Red' }],
+        } as unknown as PollResponseData,
+        poll_id: 'untranslated-poll-id',
+        text: '',
+      }),
+    ] as unknown as typeof untranslatedChannel.messages;
+    await upsertChannels({
+      channels: [untranslatedChannel] as unknown as ChannelStateResponseFields[],
+      isLatestMessagesSet: true,
+    });
+
+    const [channel] = await getChannels({
+      channelIds: [untranslatedCid],
+      userId: 'some-user',
+    });
+    const poll = channel.messages[0].poll;
+
+    expect(poll?.name).toBe('Favourite colour?');
+    expect(poll?.description).toBe('For the team dinner');
+    expect(poll?.options).toEqual([
+      { id: 'option-red', poll_id: 'untranslated-poll-id', text: 'Red' },
+    ]);
+    expect(poll?.name_i18n).toBeUndefined();
+    expect(poll?.description_i18n).toBeUndefined();
+  });
+
+  it('clears translations that the poll no longer has', async () => {
+    await upsertPoll({
+      poll: { ...translatedPoll, description_i18n: undefined, name_i18n: undefined },
+    });
+
+    const poll = await getStoredPoll();
+    expect(poll?.name_i18n).toBeUndefined();
+    expect(poll?.description_i18n).toBeUndefined();
+  });
+});

package/src/store/mappers/mapPollToStorable.ts

@@ -13,6 +13,7 @@ export const mapPollToStorable = (poll: PollResponseData): TableRow<'poll'> => {
     created_by,
     created_by_id,
     description,
+    description_i18n,
     enforce_unique_vote,
     id,
     is_closed,
@@ -20,6 +21,7 @@ export const mapPollToStorable = (poll: PollResponseData): TableRow<'poll'> => {
     latest_votes_by_option,
     max_votes_allowed,
     name,
+    name_i18n,
     options,
     own_votes,
     updated_at,
@@ -36,6 +38,9 @@ export const mapPollToStorable = (poll: PollResponseData): TableRow<'poll'> => {
     created_by: JSON.stringify(created_by), // stored as JSON to decouple the user from the poll
     created_by_id,
     description,
+    // Always written (as `null` when absent): an upsert skips undefined columns, which would keep
+    // translations the server has since dropped, e.g. after the question was edited.
+    description_i18n: JSON.stringify(description_i18n ?? null),
     enforce_unique_vote,
     id,
     is_closed,
@@ -43,6 +48,7 @@ export const mapPollToStorable = (poll: PollResponseData): TableRow<'poll'> => {
     latest_votes_by_option: JSON.stringify(latest_votes_by_option),
     max_votes_allowed: max_votes_allowed ?? 1,
     name,
+    name_i18n: JSON.stringify(name_i18n ?? null),
     options: JSON.stringify(options),
     own_votes: JSON.stringify(own_votes),
     updated_at: mapTimestampToStorable(updated_at),

package/src/store/mappers/mapStorableToPoll.ts

@@ -13,6 +13,7 @@ export const mapStorableToPoll = (pollRow: TableRow<'poll'>): PollResponseData =
     created_by,
     created_by_id,
     description,
+    description_i18n,
     enforce_unique_vote,
     id,
     is_closed,
@@ -20,6 +21,7 @@ export const mapStorableToPoll = (pollRow: TableRow<'poll'>): PollResponseData =
     latest_votes_by_option,
     max_votes_allowed,
     name,
+    name_i18n,
     options,
     own_votes,
     updated_at,
@@ -37,6 +39,7 @@ export const mapStorableToPoll = (pollRow: TableRow<'poll'>): PollResponseData =
     created_by_id,
     custom: {},
     description: description ?? '',
+    description_i18n: description_i18n ? (JSON.parse(description_i18n) ?? undefined) : undefined,
     enforce_unique_vote,
     id,
     is_closed,
@@ -44,6 +47,7 @@ export const mapStorableToPoll = (pollRow: TableRow<'poll'>): PollResponseData =
     latest_votes_by_option: JSON.parse(latest_votes_by_option),
     max_votes_allowed,
     name,
+    name_i18n: name_i18n ? (JSON.parse(name_i18n) ?? undefined) : undefined,
     options: JSON.parse(options),
     own_votes: own_votes ? JSON.parse(own_votes) : [],
     updated_at: mapStorableToRequiredTimestamp(updated_at),

package/src/store/schema.ts

@@ -225,6 +225,7 @@ export const tables: Tables = {
       created_by: 'TEXT',
       created_by_id: 'TEXT',
       description: 'TEXT',
+      description_i18n: 'TEXT',
       enforce_unique_vote: 'BOOLEAN DEFAULT FALSE',
       id: 'TEXT NOT NULL',
       is_closed: 'BOOLEAN DEFAULT FALSE',
@@ -232,6 +233,7 @@ export const tables: Tables = {
       latest_votes_by_option: 'TEXT',
       max_votes_allowed: 'INTEGER DEFAULT 1',
       name: 'TEXT',
+      name_i18n: 'TEXT',
       options: 'TEXT',
       own_votes: 'TEXT',
       updated_at: 'INTEGER',
@@ -462,7 +464,9 @@ export type Schema = {
     allow_answers?: boolean;
     allow_user_suggested_options?: boolean;
     description?: string;
+    description_i18n?: string;
     is_closed?: boolean;
+    name_i18n?: string;
     own_votes?: string;
     voting_visibility?: string;
   };

package/src/utils/__tests__/utils.test.ts

@@ -1,4 +1,45 @@
-import { formatMsToMinSec, getUrlWithoutParams } from '../utils';
+import { formatMsToMinSec, getInitialsFromName, getUrlWithoutParams } from '../utils';
+
+describe('getInitialsFromName', () => {
+  it('should return the uppercased first letter of the first two words', () => {
+    expect(getInitialsFromName('ivan sekovanikj')).toBe('IS');
+    expect(getInitialsFromName('  Jane   Mary Doe ')).toBe('JM');
+    expect(getInitialsFromName('Jane Mary Doe', 3)).toBe('JMD');
+    expect(getInitialsFromName('Jane')).toBe('J');
+  });
+
+  it('should return an empty string for empty or blank names', () => {
+    expect(getInitialsFromName('')).toBe('');
+    expect(getInitialsFromName('   ')).toBe('');
+  });
+
+  it('should keep characters outside the Basic Multilingual Plane intact', () => {
+    expect(getInitialsFromName('😀 Smiley')).toBe('😀S');
+    expect(getInitialsFromName('𝒜lice Bob')).toBe('𝒜B');
+  });
+
+  it('should keep emoji sequences intact', () => {
+    expect(getInitialsFromName('👍🏽 Thumb')).toBe('👍🏽T');
+    expect(getInitialsFromName('🇺🇸 Flag')).toBe('🇺🇸F');
+    expect(getInitialsFromName('🇺🇸🇬🇧 Flags')).toBe('🇺🇸F');
+    expect(getInitialsFromName('👨‍👩‍👧 Family')).toBe('👨‍👩‍👧F');
+    expect(getInitialsFromName('❤️ Heart')).toBe('❤️H');
+    expect(getInitialsFromName('🏴󠁧󠁢󠁥󠁮󠁧󠁿 England')).toBe('🏴󠁧󠁢󠁥󠁮󠁧󠁿E');
+  });
+
+  it('should bound the length of a pathological emoji sequence', () => {
+    const initials = getInitialsFromName(`${'👨‍👩‍👧'.repeat(2000)} x`);
+
+    expect(initials.length).toBeLessThanOrEqual(33);
+    expect(initials.endsWith('X')).toBe(true);
+  });
+
+  it('should take the first code unit of words that do not start with an emoji', () => {
+    expect(getInitialsFromName('Иван Петров')).toBe('ИП');
+    expect(getInitialsFromName('大学 同学')).toBe('大同');
+    expect(getInitialsFromName('1️⃣ One')).toBe('1O');
+  });
+});
 
 describe('getUrlWithoutParams', () => {
   const testUrlMap: Record<string, string> = {

package/src/utils/i18n/__tests__/getTranslatedText.test.ts

@@ -0,0 +1,17 @@
+import { getTranslatedText } from '../getTranslatedText';
+
+describe('getTranslatedText', () => {
+  const i18n = { de_text: 'Wie geht es?', language: 'en' };
+
+  it('returns the translation into the given language', () => {
+    expect(getTranslatedText(i18n, 'de')).toBe('Wie geht es?');
+  });
+
+  it('returns undefined when there is no translation into the given language', () => {
+    expect(getTranslatedText(i18n, 'fr')).toBeUndefined();
+  });
+
+  it('returns undefined when the text has no translations', () => {
+    expect(getTranslatedText(undefined, 'de')).toBeUndefined();
+  });
+});

package/src/utils/i18n/getTranslatedText.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the translation of a text into `language`, or undefined if there is none.
+ *
+ * The UI language can be any registered string, while `i18n` only carries the languages the
+ * auto-translation endpoint supports, so an unsupported language returns undefined.
+ */
+export const getTranslatedText = (
+  i18n: Record<string, string> | undefined,
+  language: string,
+): string | undefined => i18n?.[`${language}_text`];

package/src/utils/utils.ts

@@ -313,6 +313,55 @@ export const checkQuotedMessageEquality = (
   return quotedMessageEqual;
 };
 
+const ZERO_WIDTH_JOINER = 0x200d;
+// The longest real emoji sequences are ~15 code units, this only bounds pathological input.
+const MAX_EMOJI_LENGTH = 32;
+// Emoji start with a high surrogate or sit in the BMP symbol blocks (e.g. ❤ U+2764). Kept as
+// one-character strings so a word's first character can be compared without `charCodeAt`.
+const SYMBOLS_START = String.fromCharCode(0x2000);
+const SYMBOLS_END = String.fromCharCode(0x2bff);
+const HIGH_SURROGATE_START = String.fromCharCode(0xd800);
+const HIGH_SURROGATE_END = String.fromCharCode(0xdbff);
+
+const isRegionalIndicator = (codePoint: number) => codePoint >= 0x1f1e6 && codePoint <= 0x1f1ff;
+
+// Code points that attach to the preceding emoji instead of starting a new character.
+const isEmojiModifier = (codePoint: number) =>
+  (codePoint >= 0xfe00 && codePoint <= 0xfe0f) || // variation selectors
+  (codePoint >= 0x1f3fb && codePoint <= 0x1f3ff) || // skin tone modifiers
+  (codePoint >= 0xe0020 && codePoint <= 0xe007f); // tags, used by subdivision flags
+
+const codePointLength = (codePoint: number) => (codePoint > 0xffff ? 2 : 1);
+
+/**
+ * Returns the first character of a string that starts with an emoji, keeping skin tones, flags
+ * and ZWJ sequences intact. Hermes has no `Intl.Segmenter`, so the common cases are covered with
+ * explicit code point ranges.
+ */
+const getFirstEmoji = (text: string) => {
+  const first = text.codePointAt(0) as number;
+  let end = codePointLength(first);
+
+  if (isRegionalIndicator(first)) {
+    const next = text.codePointAt(end);
+    if (next !== undefined && isRegionalIndicator(next)) {
+      end += 2;
+    }
+  }
+  while (end < text.length && end < MAX_EMOJI_LENGTH) {
+    const codePoint = text.codePointAt(end) as number;
+    if (isEmojiModifier(codePoint)) {
+      end += codePointLength(codePoint);
+    } else if (codePoint === ZERO_WIDTH_JOINER && end + 1 < text.length) {
+      end += 1 + codePointLength(text.codePointAt(end + 1) as number);
+    } else {
+      break;
+    }
+  }
+
+  return text.slice(0, end);
+};
+
 /**
  * Returns the uppercase first letters of the first words of a name.
  *
@@ -328,7 +377,14 @@ export const getInitialsFromName = (name: string, numberOfInitials: number = 2)
   return trimmed
     .split(/\s+/)
     .slice(0, numberOfInitials)
-    .map((n) => n.charAt(0).toUpperCase())
+    .map((n) => {
+      const first = n.charAt(0);
+      // Plain names take the same `charAt(0)` path as before; only possible emoji do more work.
+      const mayBeEmoji =
+        first >= SYMBOLS_START &&
+        (first <= SYMBOLS_END || (first >= HIGH_SURROGATE_START && first <= HIGH_SURROGATE_END));
+      return (mayBeEmoji ? getFirstEmoji(n) : first).toUpperCase();
+    })
     .join('');
 };
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "10.0.0-rc.5"
+  "version": "10.0.0"
 }