Next Release

package/src/components/Channel/Channel.tsx

@@ -852,13 +852,7 @@ const ChannelWithContext = <
             setThreadMessages(updatedThreadMessages);
           }
 
-          if (
-            channel &&
-            thread?.id &&
-            event.message?.id === thread.id &&
-            !threadInstance &&
-            !thread.poll_id
-          ) {
+          if (channel && thread?.id && event.message?.id === thread.id && !threadInstance) {
             const updatedThread = channel.state.formatMessage(event.message);
             setThread(updatedThread);
           }

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -40,13 +40,15 @@ export type LatestMessagePreview<
 export type LatestMessagePreviewSelectorReturnType = {
   createdBy?: UserResponse | null;
   latestVotesByOption?: Record<string, PollVote[]>;
+  name?: string;
 };
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   nextValue: PollState<StreamChatGenerics>,
 ): LatestMessagePreviewSelectorReturnType => ({
   createdBy: nextValue.created_by,
   latestVotesByOption: nextValue.latest_votes_by_option,
+  name: nextValue.name,
 });
 
 const getMessageSenderName = <
@@ -145,8 +147,8 @@ const getLatestMessageDisplayText = <
       { bold: false, text: t('🏙 Attachment...') },
     ];
   }
-  if (message.poll && pollState) {
-    const { createdBy, latestVotesByOption } = pollState;
+  if (message.poll_id && pollState) {
+    const { createdBy, latestVotesByOption, name } = pollState;
     let latestVotes;
     if (latestVotesByOption) {
       latestVotes = Object.values(latestVotesByOption)
@@ -161,7 +163,7 @@ const getLatestMessageDisplayText = <
     }
     const previewMessage = `${
       client.userID === previewUser?.id ? 'You' : previewUser?.name
-    } ${previewAction}: ${message.poll.name}`;
+    } ${previewAction}: ${name}`;
     return [
       { bold: false, text: '📊 ' },
       { bold: false, text: previewMessage },
@@ -311,7 +313,7 @@ export const useLatestMessagePreview = <
   const poll = client.polls.fromState(pollId);
   const pollState: LatestMessagePreviewSelectorReturnType =
     useStateStore(poll?.state, selector) ?? {};
-  const { createdBy, latestVotesByOption } = pollState;
+  const { createdBy, latestVotesByOption, name } = pollState;
 
   useEffect(
     () =>
@@ -326,7 +328,15 @@ export const useLatestMessagePreview = <
         }),
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelLastMessageString, forceUpdate, readEvents, readStatus, latestVotesByOption, createdBy],
+    [
+      channelLastMessageString,
+      forceUpdate,
+      readEvents,
+      readStatus,
+      latestVotesByOption,
+      createdBy,
+      name,
+    ],
   );
 
   return latestMessagePreview;

package/src/components/Chat/hooks/handleEventToSyncDB.ts

@@ -233,11 +233,14 @@ export const handleEventToSyncDB = <
       'poll.vote_removed',
     ].includes(type)
   ) {
-    const poll = event.poll;
+    const { poll, poll_vote, type } = event;
     if (poll) {
       return updatePollMessage({
+        eventType: type,
         flush,
         poll,
+        poll_vote,
+        userID: client?.userID || '',
       });
     }
   }

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -149,7 +149,7 @@ const MessageContentWithContext = <
 
   const {
     theme: {
-      colors: { blue_alice, grey_gainsboro, grey_whisper, transparent, white },
+      colors: { blue_alice, grey_whisper, light_gray, transparent, white_snow },
       messageSimple: {
         content: {
           container: {
@@ -214,20 +214,20 @@ const MessageContentWithContext = <
 
   const isMessageReceivedOrErrorType = !isMyMessage || error;
 
-  let backgroundColor = senderMessageBackgroundColor || grey_gainsboro;
+  let backgroundColor = senderMessageBackgroundColor ?? light_gray;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
     if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = message.quoted_message ? grey_gainsboro : transparent;
+      backgroundColor = message.quoted_message ? light_gray : transparent;
     } else {
       backgroundColor = blue_alice;
     }
   } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor || white;
+    backgroundColor = receiverMessageBackgroundColor ?? white_snow;
   }
 
-  const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : grey_gainsboro;
+  const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : light_gray;
 
   const getBorderRadius = () => {
     // enum('top', 'middle', 'bottom', 'single')

package/src/components/Message/MessageSimple/MessageReplies.tsx

@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
   },
   messageRepliesCurve: {
     borderTopWidth: 0,
-    borderWidth: 1,
+    borderWidth: 2,
     height: 16,
     width: 16,
   },
@@ -181,13 +181,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     message: prevMessage,
     noBorder: prevNoBorder,
     onOpenThread: prevOnOpenThread,
+    repliesCurveColor: prevRepliesCurveColor,
     t: prevT,
     threadList: prevThreadList,
   } = prevProps;
   const {
     message: nextMessage,
     noBorder: nextNoBorder,
     onOpenThread: nextOnOpenThread,
+    repliesCurveColor: nextRepliesCurveColor,
     t: nextT,
     threadList: nextThreadList,
   } = nextProps;
@@ -201,6 +203,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const noBorderEqual = prevNoBorder === nextNoBorder;
   if (!noBorderEqual) return false;
 
+  const repliesCurveColorEqual = prevRepliesCurveColor === nextRepliesCurveColor;
+  if (!repliesCurveColorEqual) return false;
+
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -170,7 +170,7 @@ const MessageOverlayWithContext = <
   );
 
   const {
-    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent },
+    colors: { blue_alice, grey_gainsboro, grey_whisper, light_gray, transparent, white_snow },
     messageSimple: {
       content: {
         container: { borderRadiusL, borderRadiusS },
@@ -364,8 +364,8 @@ const MessageOverlayWithContext = <
                             : grey_gainsboro
                           : blue_alice
                         : alignment === 'left'
-                        ? receiverMessageBackgroundColor
-                        : senderMessageBackgroundColor,
+                        ? receiverMessageBackgroundColor ?? white_snow
+                        : senderMessageBackgroundColor ?? light_gray,
                     borderBottomLeftRadius:
                       (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
                       (!hasThreadReplies || threadList)

package/src/components/Poll/CreatePollContent.tsx

@@ -164,7 +164,12 @@ export const CreatePollContent = () => {
               {t<string>('Multiple answers')}
             </Text>
             <Switch
-              onValueChange={() => setMultipleAnswersAllowed(!multipleAnswersAllowed)}
+              onValueChange={() => {
+                if (multipleAnswersAllowed) {
+                  setMaxVotesPerPersonEnabled(false);
+                }
+                setMultipleAnswersAllowed(!multipleAnswersAllowed);
+              }}
               value={multipleAnswersAllowed}
             />
           </View>

package/src/components/Reply/Reply.tsx

@@ -6,8 +6,9 @@ import dayjs from 'dayjs';
 
 import merge from 'lodash/merge';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, PollState } from 'stream-chat';
 
+import { useChatContext } from '../../contexts';
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
   MessageInputContext,
@@ -22,6 +23,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import { useStateStore } from '../../hooks';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
@@ -31,6 +33,7 @@ import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { VideoThumbnail } from '../Attachment/VideoThumbnail';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { MessageType } from '../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   container: {
@@ -72,6 +75,16 @@ const styles = StyleSheet.create({
   },
 });
 
+export type ReplySelectorReturnType = {
+  name?: string;
+};
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: PollState<StreamChatGenerics>,
+): ReplySelectorReturnType => ({
+  name: nextValue.name,
+});
+
 type ReplyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageInputContextValue<StreamChatGenerics>, 'quotedMessage'> &
@@ -134,6 +147,7 @@ const ReplyWithContext = <
 >(
   props: ReplyPropsWithContext<StreamChatGenerics>,
 ) => {
+  const { client } = useChatContext();
   const {
     attachmentSize = 40,
     FileAttachmentIcon,
@@ -167,6 +181,9 @@ const ReplyWithContext = <
     },
   } = useTheme();
 
+  const poll = client.polls.fromState((quotedMessage as MessageType)?.poll_id ?? '');
+  const { name: pollName }: ReplySelectorReturnType = useStateStore(poll?.state, selector) ?? {};
+
   const messageText = typeof quotedMessage === 'boolean' ? '' : quotedMessage.text || '';
 
   const emojiOnlyText = useMemo(() => {
@@ -262,8 +279,8 @@ const ReplyWithContext = <
               text:
                 quotedMessage.type === 'deleted'
                   ? `_${t('Message deleted')}_`
-                  : quotedMessage.poll
-                  ? `📊 ${quotedMessage.poll.name}`
+                  : pollName
+                  ? `📊 ${pollName}`
                   : quotedMessage.text
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -416,7 +416,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -742,7 +742,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -1068,7 +1068,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "overflow": "hidden",
                                 },
                                 {
-                                  "backgroundColor": "#F2F2F2",
+                                  "backgroundColor": "#FCFCFC",
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
@@ -1422,7 +1422,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "overflow": "hidden",
                                     },
                                     {
-                                      "backgroundColor": "#F2F2F2",
+                                      "backgroundColor": "#FCFCFC",
                                       "borderBottomLeftRadius": 0,
                                       "borderBottomRightRadius": 16,
                                       "borderColor": "#ECEBEB",

package/src/contexts/themeContext/utils/theme.ts

@@ -1218,10 +1218,8 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
-      receiverMessageBackgroundColor: Colors.white_smoke,
       replyBorder: {},
       replyContainer: {},
-      senderMessageBackgroundColor: Colors.grey_gainsboro,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },

package/src/store/QuickSqliteClient.ts

@@ -30,7 +30,7 @@ import type { PreparedQueries, Table } from './types';
  *
  */
 export class QuickSqliteClient {
-  static dbVersion = 6;
+  static dbVersion = 7;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;

package/src/store/apis/getChannelMessages.ts

@@ -8,7 +8,8 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { isBlockedMessage } from '../../utils/utils';
 import { mapStorableToMessage } from '../mappers/mapStorableToMessage';
 import { QuickSqliteClient } from '../QuickSqliteClient';
-import type { TableRowJoinedUser } from '../types';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+import type { TableRow, TableRowJoinedUser } from '../types';
 
 export const getChannelMessages = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -35,6 +36,21 @@ export const getChannelMessages = <
     }
     messageIdVsReactions[reaction.messageId].push(reaction);
   });
+  const messageIdsVsPolls: Record<string, TableRow<'poll'>> = {};
+  const pollsById: Record<string, TableRow<'poll'>> = {};
+  const messagesWithPolls = messageRows.filter((message) => !!message.poll_id);
+  const polls = QuickSqliteClient.executeSql.apply(
+    null,
+    createSelectQuery('poll', ['*'], {
+      id: messagesWithPolls.map((message) => message.poll_id),
+    }),
+  );
+  polls.forEach((poll) => {
+    pollsById[poll.id] = poll;
+  });
+  messagesWithPolls.forEach((message) => {
+    messageIdsVsPolls[message.poll_id] = pollsById[message.poll_id];
+  });
 
   // Populate the messages.
   const cidVsMessages: Record<string, MessageResponse<StreamChatGenerics>[]> = {};
@@ -48,6 +64,7 @@ export const getChannelMessages = <
         mapStorableToMessage<StreamChatGenerics>({
           currentUserId,
           messageRow: m,
+          pollRow: messageIdsVsPolls[m.poll_id],
           reactionRows: messageIdVsReactions[m.id],
         }),
       );

package/src/store/apis/updateMessage.ts

@@ -30,7 +30,9 @@ export const updateMessage = ({
     return queries;
   }
 
-  const storableMessage = mapMessageToStorable(message);
+  const storableMessage = mapMessageToStorable({
+    ...message,
+  });
 
   queries.push(
     createUpdateQuery('messages', storableMessage, {