NikolaGoranNaumovski · Oct 21, 2026 · coderabbitai · Oct 21, 2026
@@ -1882,6 +1882,30 @@ The gallery renders outside any message, so its header reads the current item. W
 - To change only the format, customize `timestamp.GalleryTimestamp`.
 - `MessageTimestamp` renders from its `message` prop outside a `MessageProvider`; without the prop it still requires one.
 
+### New: polls render the reader's translation
+
+Not a break. With automatic translation enabled, the API translates a poll's question, options and answers, and returns them in `name_i18n`, `text_i18n` and `answer_text_i18n`. These have the same shape as `message.i18n`: one `<language>_text` entry per language, plus `language`, the source language. The default poll components now render the entry for `client.user.language` and fall back to the original. That covers the poll in the message, the results, the full option list and the answers dialog. The channel list preview and a quoted poll show the translated question too.
+
+- A poll message starts in the translated view (`MessageContext.translationView`). `MessageTranslationIndicator` shows on it when the poll's question or an option is translated, and its "View original" toggle switches the whole poll back along with any message text.
+- Translations that arrive later through `poll.updated` show without a reload, because the poll renders from `client.polls`, not from `message.poll`.
+- A custom poll component (`PollHeader`, `PollOptionSelector`, ... through `WithComponents`) resolves its texts with `usePollTextTranslation()`, so it follows the same toggle:
+
+```tsx
+import type { PollState } from 'stream-chat';
+import { usePollContext, usePollTextTranslation, useStateStore } from 'stream-chat-react';
+
+const selector = ({ name, name_i18n }: PollState) => ({ name, name_i18n });
+
+export const CustomPollHeader = () => {
+  const { poll } = usePollContext();
+  const { name, name_i18n } = useStateStore(poll.state, selector);
+  const translate = usePollTextTranslation();
+  return <div className='str-chat__poll-title'>{translate(name, name_i18n)}</div>;
+};
+```
+
+This translates poll data only. The SDK's own copy ("View results", "Add a comment", ...) still comes from `Streami18n` and the dictionaries you register ([section 18](#18-i18n)).
+
 ---
 
 ## 13. Message composer

@@ -183,6 +183,56 @@ describe('ChannelPreview utils', () => {
       expect(getLatestMessagePreviewText(channel, tAria)).toBe('Poll: Lunch spot?');
     });
 
+    it('announces a poll by its question in the user language', async () => {
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          messages: [
+            generateMessage({
+              poll: { name: 'Lunch spot?', name_i18n: { es_text: '¿Dónde comer?' } },
+              text: '',
+            }),
+          ],
+        }),
+      );
+      expect(getLatestMessagePreviewText(channel, tAria, 'es')).toBe(
+        'Poll: ¿Dónde comer?',
+      );
+      expect(getLatestMessagePreviewText(channel, tAria, 'de')).toBe('Poll: Lunch spot?');
+    });
+
+    it('announces a vote by the option text in the user language', async () => {
+      const voter = generateUser({ id: 'voter', name: 'Ana' });
+      const vote = {
+        created_at: convertDateToTimestamp(),
+        id: 'vote-1',
+        option_id: 'apples',
+        poll_id: 'poll-voted',
+        updated_at: convertDateToTimestamp(),
+        user: voter,
+        user_id: voter.id,
+      };
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          messages: [
+            generateMessage({
+              poll: {
+                id: 'poll-voted',
+                latest_votes_by_option: { apples: [vote] },
+                name: 'Fruit?',
+                options: [
+                  { id: 'apples', text: 'Apples', text_i18n: { es_text: 'Manzanas' } },
+                ],
+                vote_count: 1,
+              },
+              text: '',
+            }),
+          ],
+        }),
+      );
+      const preview = getLatestMessagePreview(channel, tAria, 'es');
+      expect(preview).toBe('📊 Ana voted: Manzanas');
+    });
+
     it('announces an attachment-only message with a localized type label', async () => {
       const channel = await getQueriedChannelInstance(
         generateChannel({

@@ -12,6 +12,7 @@ import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { PluggableList } from 'unified';
 import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
 import { isMessageDeleted } from '../Message/utils';
+import { getPollTextTranslation } from '../Poll/utils/translations';
 import remarkGfm from 'remark-gfm';
 import {
   deriveChannelDisplayImage,
@@ -130,6 +131,9 @@ const getLatestMessagePreviewParts = (
   }
 
   if (poll) {
+    // Previews have no original/translated toggle: they always show the user's language.
+    const pollName = getPollTextTranslation(poll.name_i18n, userLanguage) ?? poll.name;
+
     if (!poll.vote_count) {
       const createdBy =
         poll.created_by?.id === channel.getClient().userID
@@ -139,13 +143,13 @@ const getLatestMessagePreviewParts = (
         isUserMessageText: false,
         kind: 'poll',
         latestMessage,
-        pollName: poll.name,
+        pollName,
         text: t(
           'channelListItem.created.text',
           '📊 {{createdBy}} created: {{ pollName}}',
           {
             createdBy,
-            pollName: poll.name,
+            pollName,
           },
         ),
       };
@@ -161,12 +165,13 @@ const getLatestMessagePreviewParts = (
           isUserMessageText: false,
           kind: 'poll',
           latestMessage,
-          pollName: poll.name,
+          pollName,
           text: t(
             'channelListItem.voted.text',
             '📊 {{votedBy}} voted: {{pollOptionText}}',
             {
-              pollOptionText: option.text,
+              pollOptionText:
+                getPollTextTranslation(option.text_i18n, userLanguage) ?? option.text,
               votedBy:
                 latestVote?.user?.id === channel.getClient().userID
                   ? t('common.you.label', 'You')

@@ -66,7 +66,13 @@ const MessageWithContext = (props: MessageWithContextProps) => {
   const { getTranslationView, setTranslationView: setTranslationViewInContext } =
     useMessageTranslationViewContext();
 
-  const translationView = getTranslationView(message.id, !!message.i18n);
+  // A poll message has no `i18n` of its own, and its poll's translations live in the poll's state, not
+  // in `message.poll`. Defaulting every poll message to 'translated' is safe: a poll text without a
+  // translation falls back to its original.
+  const translationView = getTranslationView(
+    message.id,
+    !!message.i18n || !!message.poll_id,
+  );
   const setTranslationView = useCallback(
     (view: 'original' | 'translated') => setTranslationViewInContext(message.id, view),
     [message.id, setTranslationViewInContext],

@@ -1,12 +1,25 @@
-import type { LocalMessage } from 'stream-chat';
-import React, { useCallback, useMemo } from 'react';
+import type { LocalMessage, PollState } from 'stream-chat';
+import React, { useCallback, useContext, useMemo } from 'react';
 import {
+  ChatContext,
   getTranslatedMessageText,
   useComponentContextIcons,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
 import { Button } from '../Button';
+import { useStateStore } from '../../store';
+import {
+  getPollSourceLanguage,
+  pollHasTranslation,
+  type PollTexts,
+} from '../Poll/utils/translations';
+
+const pollTextsSelector = ({ name, name_i18n, options }: PollState): PollTexts => ({
+  name,
+  name_i18n,
+  options,
+});
 
 export type TranslationIndicatorProps = {
   message?: LocalMessage;
@@ -24,17 +37,29 @@ export const MessageTranslationIndicator = ({
   } = useMessageContext();
   const message = propMessage ?? contextMessage;
 
+  // The poll renders from its live state, which poll events update; `message.poll` is the snapshot
+  // the message was loaded with. Read without `useChatContext()`, which throws outside <Chat>.
+  const { client } = useContext(ChatContext) ?? {};
+  const livePoll = message?.poll_id
+    ? client?.polls.fromState(message.poll_id)
+    : undefined;
+  const livePollTexts = useStateStore(livePoll?.state, pollTextsSelector);
+  const pollTexts = livePollTexts ?? message?.poll;
+
   const translatedTextForUser = useMemo(
     () => getTranslatedMessageText({ language: userLanguage, message }),
     [userLanguage, message],
   );
 
+  // A poll message is translated when its poll is (question or options), whether or not the message
+  // has text of its own.
   const hasTranslationForUserLanguage = useMemo(
     () =>
-      translatedTextForUser != null &&
-      message?.text !== undefined &&
-      translatedTextForUser !== message.text,
-    [translatedTextForUser, message?.text],
+      (translatedTextForUser != null &&
+        message?.text !== undefined &&
+        translatedTextForUser !== message.text) ||
+      pollHasTranslation(pollTexts, userLanguage),
+    [translatedTextForUser, message?.text, pollTexts, userLanguage],
   );
 
   const viewingOriginal = useMemo(
@@ -49,7 +74,8 @@ export const MessageTranslationIndicator = ({
   }, [setTranslationView, viewingOriginal]);
 
   const sourceLanguageName = useMemo(() => {
-    const sourceLanguageCode = message?.i18n?.language;
+    const sourceLanguageCode =
+      message?.i18n?.language ?? getPollSourceLanguage(pollTexts);
     if (!sourceLanguageCode) return '';
     // `language.*` keys are part of the catalog now (core derives them from the same
     // `TranslationLanguage` union this code is), so the key is checked at compile time rather than
@@ -62,9 +88,9 @@ export const MessageTranslationIndicator = ({
     const languageKey = `language.${sourceLanguageCode}` as const;
     const translatedName = t(languageKey);
     return translatedName === languageKey ? sourceLanguageCode : translatedName;
-  }, [message?.i18n?.language, t]);
+  }, [message?.i18n?.language, pollTexts, t]);
 
-  if (!message?.i18n || !setTranslationView) return null;
+  if (!message || !setTranslationView) return null;
   if (!hasTranslationForUserLanguage) return null;
 
   return (

@@ -11,6 +11,7 @@ import { useMessageContext } from '../../../context/MessageContext';
 import type { MessageContextValue } from '../../../context/MessageContext';
 import {
   generateMessage,
+  generatePoll,
   generateReaction,
   generateUser,
   getOrCreateChannelApi,
@@ -195,6 +196,33 @@ describe('<Message /> component', () => {
   beforeEach(vi.clearAllMocks);
   afterEach(cleanup);
 
+  describe('default translation view', () => {
+    // Poll translations live in the poll's state, not in `message.poll`, so the default can't depend on
+    // them; 'translated' is safe because a poll text without a translation falls back to its original.
+    it('is translated for a poll message', async () => {
+      let context: Record<string, unknown> = {};
+      const poll = generatePoll({ id: 'poll-default-view' });
+      await renderComponent({
+        contextCallback: (ctx) => (context = ctx),
+        message: generateMessage({ poll, poll_id: poll.id, text: '' }),
+      });
+      expect(context.translationView).toBe('translated');
+    });
+
+    it('is original for a message with neither i18n nor a poll', async () => {
+      let context: Record<string, unknown> = {};
+      await renderComponent({
+        contextCallback: (ctx) => (context = ctx),
+        message: generateMessage({
+          i18n: undefined,
+          poll: undefined,
+          poll_id: undefined,
+        }),
+      });
+      expect(context.translationView).toBe('original');
+    });
+  });
+
   it('should not pass custom props to its Message child component', async () => {
     await renderComponentWithMessage({
       customProp: 'some custom prop',