stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -18,8 +18,12 @@ exports[`MessageInputContext's sendMessage exit sendMessage when edit message is
   "html": "<p>regular</p>",
   "id": "7a85f744-cc89-4f82-a1d4-5456432cc8bf",
   "mentioned_users": [
-    "dummy1",
-    "dummy2",
+    {
+      "id": "dummy1",
+    },
+    {
+      "id": "dummy2",
+    },
   ],
   "quoted_message": undefined,
   "text": "",
@@ -42,7 +46,7 @@ exports[`MessageInputContext's sendMessage exit sendMessage when file upload sta
     {
       "asset_url": undefined,
       "file_size": undefined,
-      "mime_type": undefined,
+      "mime_type": "file",
       "originalFile": {
         "name": "dummy.pdf",
         "state": "uploaded",
@@ -54,7 +58,7 @@ exports[`MessageInputContext's sendMessage exit sendMessage when file upload sta
     {
       "asset_url": undefined,
       "file_size": undefined,
-      "mime_type": undefined,
+      "mime_type": "video/mp4",
       "originalFile": {
         "name": "dummy.pdf",
         "state": "finished",
@@ -66,7 +70,7 @@ exports[`MessageInputContext's sendMessage exit sendMessage when file upload sta
     {
       "asset_url": undefined,
       "file_size": undefined,
-      "mime_type": undefined,
+      "mime_type": "audio/mp3",
       "originalFile": {
         "name": "dummy.pdf",
         "state": "uploaded",
@@ -78,7 +82,7 @@ exports[`MessageInputContext's sendMessage exit sendMessage when file upload sta
     {
       "asset_url": undefined,
       "file_size": undefined,
-      "mime_type": undefined,
+      "mime_type": "image/jpeg",
       "originalFile": {
         "name": "dummy.pdf",
         "state": "finished",

package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx

@@ -3,7 +3,8 @@ import { act } from 'react-test-renderer';
 
 import { renderHook, waitFor } from '@testing-library/react-native';
 
-import type { MessageType } from '../../../components/MessageList/hooks/useMessageList';
+import { LocalMessage } from 'stream-chat';
+
 import {
   generateFileUploadPreview,
   generateImageUploadPreview,
@@ -40,7 +41,7 @@ describe("MessageInputContext's sendMessage", () => {
     setSelectedFiles: jest.fn(),
     setSelectedImages: jest.fn(),
   }));
-  const message: boolean | MessageType = generateMessage({
+  const message: LocalMessage | undefined = generateMessage({
     created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
     id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',
     updated_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
@@ -49,7 +50,7 @@ describe("MessageInputContext's sendMessage", () => {
       image: 'fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33',
       name: '50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995',
     }),
-  }) as unknown as MessageType;
+  }) as unknown as LocalMessage;
 
   it('exit sendMessage when file upload status failed', async () => {
     const initialProps = {
@@ -223,7 +224,7 @@ describe("MessageInputContext's sendMessage", () => {
   it('exit sendMessage when image upload has an error and catch block is executed', () => {
     const setQuotedMessageStateMock = jest.fn();
     const clearQuotedMessageStateMock = jest.fn();
-    const generatedQuotedMessage: boolean | MessageType = message;
+    const generatedQuotedMessage: boolean | LocalMessage = message;
     const images = [
       generateImageUploadPreview({ state: FileState.UPLOADED }),
       generateImageUploadPreview({ state: FileState.FINISHED }),
@@ -268,7 +269,7 @@ describe("MessageInputContext's sendMessage", () => {
     const clearEditingStateMock = jest.fn();
     const editMessageMock = jest.fn().mockResolvedValue({ data: {} });
     const images = generateImageUploadPreview({ state: FileState.UPLOADED });
-    const generatedMessage: boolean | MessageType = message;
+    const generatedMessage: boolean | LocalMessage = message;
     const initialProps = {
       clearEditingState: clearEditingStateMock,
       clearQuotedMessageState: clearQuotedMessageStateMock,

package/src/contexts/messageInputContext/__tests__/updateMessage.test.tsx

@@ -3,9 +3,7 @@ import { act } from 'react-test-renderer';
 
 import { renderHook } from '@testing-library/react-native';
 
-import type { StreamChat } from 'stream-chat';
-
-import type { MessageType } from '../../../components/MessageList/hooks/useMessageList';
+import type { LocalMessage, StreamChat } from 'stream-chat';
 
 import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { generateMessage } from '../../../mock-builders/generator/message';
@@ -51,7 +49,7 @@ describe("MessageInputContext's updateMessage", () => {
     setSelectedImages: jest.fn(),
   }));
   const clearEditingStateMock = jest.fn();
-  const generatedMessage: boolean | MessageType = generateMessage({
+  const generatedMessage: boolean | LocalMessage = generateMessage({
     created_at: 'Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)',
     id: '7a85f744-cc89-4f82-a1d4-5456432cc8bf',
     text: 'hey',
@@ -61,7 +59,7 @@ describe("MessageInputContext's updateMessage", () => {
       image: 'fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33',
       name: '50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995',
     }),
-  }) as unknown as MessageType;
+  }) as unknown as LocalMessage;
 
   it('updateMessage throws error as clearEditingState is not available', async () => {
     const initialProps = {

package/src/contexts/messageInputContext/__tests__/useMessageDetailsForState.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-native';
 
-import type { MessageType } from '../../../components';
+import { LocalMessage } from 'stream-chat';
 
 import {
   generateFileAttachment,
@@ -13,24 +13,29 @@ import { generateUser } from '../../../mock-builders/generator/user';
 import { useMessageDetailsForState } from '../hooks/useMessageDetailsForState';
 
 describe('useMessageDetailsForState', () => {
-  it.each([[{ message: true }], [{ initialValue: '', message: true }]])(
+  const message = generateMessage({ text: 'Dummy text' });
+  it.each([[{ message }, { initialValue: '', message }]])(
     'test state of useMessageDetailsForState when initialProps differ',
     () => {
-      const { result } = renderHook(({ message }) => useMessageDetailsForState(message), {
-        initialProps: { message: true },
-      });
+      const { result } = renderHook(
+        ({ message }) => useMessageDetailsForState(message as unknown as LocalMessage),
+        {
+          initialProps: { message },
+        },
+      );
 
-      expect(result.current.text).toBe('');
+      expect(result.current.text).toBe(message.text);
     },
   );
 
   it('showMoreOptions is true when initialValue and text is same', () => {
     const { result } = renderHook(
-      ({ initialValue, message }) => useMessageDetailsForState(message, initialValue),
+      ({ initialValue, message }) =>
+        useMessageDetailsForState(message as unknown as LocalMessage, initialValue),
       {
         initialProps: {
           initialValue: 'Dummy text',
-          message: generateMessage({ text: 'Dummy text' }) as MessageType,
+          message: generateMessage({ text: 'Dummy text' }),
         },
       },
     );
@@ -41,7 +46,7 @@ describe('useMessageDetailsForState', () => {
   it('fileUploads, imageUploads and mentionedUsers are not empty when attachments are present in message', () => {
     const { result } = renderHook(
       ({ initialValue, message }) =>
-        useMessageDetailsForState(message as unknown as MessageType | boolean, initialValue),
+        useMessageDetailsForState(message as unknown as LocalMessage, initialValue),
       {
         initialProps: {
           initialValue: '',

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -38,11 +38,13 @@ export const useCreateMessageInputContext = ({
   FileUploadPreview,
   fileUploads,
   giphyActive,
+  giphyEnabled,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
   hasFilePicker,
   hasImagePicker,
+  hasText,
   ImageUploadPreview,
   imageUploads,
   initialValue,
@@ -114,9 +116,7 @@ export const useCreateMessageInputContext = ({
   UploadProgressIndicator,
 }: MessageInputContextValue & Pick<ThreadContextValue, 'thread'>) => {
   const editingdep = editing?.id;
-  const fileUploadsValue = fileUploads
-    .map(({ duration, paused, progress, state }) => `${state},${paused},${progress},${duration}`)
-    .join();
+  const fileUploadsValue = fileUploads.map(({ state }) => state).join();
   const imageUploadsValue = imageUploads.map(({ state }) => state).join();
   const asyncUploadsValue = Object.keys(asyncUploads).join();
   const mentionedUsersLength = mentionedUsers.length;
@@ -160,11 +160,13 @@ export const useCreateMessageInputContext = ({
       FileUploadPreview,
       fileUploads,
       giphyActive,
+      giphyEnabled,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,
       hasFilePicker,
       hasImagePicker,
+      hasText,
       ImageUploadPreview,
       imageUploads,
       initialValue,
@@ -242,6 +244,8 @@ export const useCreateMessageInputContext = ({
       editingdep,
       fileUploadsValue,
       giphyActive,
+      giphyEnabled,
+      hasText,
       imageUploadsValue,
       maxMessageLength,
       mentionedUsersLength,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 
 import { Attachment } from 'stream-chat';
 
-import { FileTypes, FileUpload, ImageUpload } from '../../../types/types';
-import { generateRandomId, stringifyMessage } from '../../../utils/utils';
+import { FileTypes, FileUpload } from '../../../types/types';
+import { generateRandomId, getFileTypeFromMimeType, stringifyMessage } from '../../../utils/utils';
 
 import type { MessageInputContextValue } from '../MessageInputContext';
 
@@ -12,23 +12,25 @@ export const useMessageDetailsForState = (
   initialValue?: string,
 ) => {
   const [fileUploads, setFileUploads] = useState<FileUpload[]>([]);
-  const [imageUploads, setImageUploads] = useState<ImageUpload[]>([]);
+  const [imageUploads, setImageUploads] = useState<FileUpload[]>([]);
   const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
-  const [showMoreOptions, setShowMoreOptions] = useState(true);
 
   const initialTextValue = initialValue || '';
   const [text, setText] = useState(initialTextValue);
 
+  const isEqualToInitialText = text === initialTextValue;
+
+  const [showMoreOptions, setShowMoreOptions] = useState(true);
+
   useEffect(() => {
-    if (text !== initialTextValue) {
+    if (!isEqualToInitialText) {
       setShowMoreOptions(false);
     }
     if (fileUploads.length || imageUploads.length) {
       setShowMoreOptions(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text, imageUploads.length, fileUploads.length]);
+  }, [isEqualToInitialText, imageUploads.length, fileUploads.length]);
 
   const messageValue = message ? stringifyMessage(message) : '';
 
@@ -46,66 +48,59 @@ export const useMessageDetailsForState = (
     if (attachment.type === FileTypes.Audio) {
       return {
         file: {
-          duration: attachment.duration,
-          mimeType: attachment.mime_type,
+          duration: attachment.duration || 0,
           name: attachment.title || '',
-          size: attachment.file_size,
-          uri: attachment.asset_url,
+          size: attachment.file_size || 0,
+          type: attachment.mime_type || '',
+          uri: attachment.asset_url || '',
         },
         id,
         state: 'finished',
+        type: FileTypes.Audio,
         url: attachment.asset_url,
       };
     } else if (attachment.type === FileTypes.Video) {
       return {
         file: {
-          duration: attachment.duration,
-          mimeType: attachment.mime_type,
+          duration: attachment.duration || 0,
           name: attachment.title || '',
-          size: attachment.file_size,
-          uri: attachment.asset_url,
+          size: attachment.file_size || 0,
+          thumb_url: attachment.thumb_url || '',
+          type: attachment.mime_type || '',
+          uri: attachment.asset_url || '',
         },
         id,
         state: 'finished',
         thumb_url: attachment.thumb_url,
+        type: FileTypes.Video,
         url: attachment.asset_url,
       };
     } else if (attachment.type === FileTypes.VoiceRecording) {
       return {
         file: {
-          duration: attachment.duration,
-          mimeType: attachment.mime_type,
+          duration: attachment.duration || 0,
           name: attachment.title || '',
-          size: attachment.file_size,
-          uri: attachment.asset_url,
+          size: attachment.file_size || 0,
+          type: attachment.mime_type || '',
+          uri: attachment.asset_url || '',
           waveform_data: attachment.waveform_data,
         },
         id,
         state: 'finished',
-        url: attachment.asset_url,
-      };
-    } else if (attachment.type === FileTypes.File) {
-      return {
-        file: {
-          mimeType: attachment.mime_type,
-          name: attachment.title || '',
-          size: attachment.file_size,
-          uri: attachment.asset_url,
-        },
-        id,
-        state: 'finished',
+        type: FileTypes.VoiceRecording,
         url: attachment.asset_url,
       };
     } else {
       return {
         file: {
-          mimeType: attachment.mime_type,
           name: attachment.title || '',
-          size: attachment.file_size,
-          uri: attachment.asset_url,
+          size: attachment.file_size || 0,
+          type: attachment.mime_type || '',
+          uri: attachment.asset_url || '',
         },
         id,
         state: 'finished',
+        type: getFileTypeFromMimeType(attachment.mime_type || ''),
         url: attachment.asset_url,
       };
     }
@@ -115,7 +110,7 @@ export const useMessageDetailsForState = (
     if (message) {
       setText(message?.text || '');
       const newFileUploads: FileUpload[] = [];
-      const newImageUploads: ImageUpload[] = [];
+      const newImageUploads: FileUpload[] = [];
 
       const attachments = Array.isArray(message.attachments) ? message.attachments : [];
 
@@ -124,14 +119,16 @@ export const useMessageDetailsForState = (
           const id = generateRandomId();
           newImageUploads.push({
             file: {
-              height: attachment.original_height,
-              name: attachment.fallback,
-              size: attachment.file_size,
-              type: attachment.type,
-              width: attachment.original_width,
+              height: attachment.original_height || 0,
+              name: attachment.fallback || '',
+              size: attachment.file_size || 0,
+              type: attachment.type || '',
+              uri: attachment.image_url || '',
+              width: attachment.original_width || 0,
             },
             id,
             state: 'finished',
+            type: FileTypes.Image,
             url: attachment.image_url || attachment.asset_url || attachment.thumb_url,
           });
         } else {

package/src/contexts/messageInputContext/utils/utils.ts

@@ -1,13 +1,13 @@
 import { lookup } from 'mime-types';
 import type { FileUploadConfig } from 'stream-chat';
 
-import { Asset, File } from '../../../types/types';
+import { File } from '../../../types/types';
 
 export const MAX_FILE_SIZE_TO_UPLOAD = 100 * 1024 * 1024; // 100 MB
 
 type CheckUploadPermissionsParams = {
   config: FileUploadConfig;
-  file: File | Partial<Asset>;
+  file: File;
 };
 
 /**
@@ -44,10 +44,9 @@ export const isUploadAllowed = ({ config, file }: CheckUploadPermissionsParams)
   }
 
   if (allowed_mime_types?.length) {
-    if (file.mimeType) {
+    if (file.type) {
       const allowed = allowed_mime_types.some(
-        (mimeType: string) =>
-          file.mimeType && file.mimeType.toLowerCase() === mimeType.toLowerCase(),
+        (mimeType: string) => file.type && file.type.toLowerCase() === mimeType.toLowerCase(),
       );
 
       if (!allowed) {
@@ -66,10 +65,9 @@ export const isUploadAllowed = ({ config, file }: CheckUploadPermissionsParams)
   }
 
   if (blocked_mime_types?.length) {
-    if (file.mimeType) {
+    if (file.type) {
       const blocked = blocked_mime_types.some(
-        (mimeType: string) =>
-          file.mimeType && file.mimeType.toLowerCase() === mimeType.toLowerCase(),
+        (mimeType: string) => file.type && file.type.toLowerCase() === mimeType.toLowerCase(),
       );
 
       if (blocked) {

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import { PressableProps, ViewProps } from 'react-native';
 
-import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
+import type { Attachment, ChannelState, LocalMessage, MessageResponse } from 'stream-chat';
 
 import type { PollContentProps, StreamingMessageViewProps } from '../../components';
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
@@ -16,6 +16,7 @@ import type { GalleryProps } from '../../components/Attachment/Gallery';
 import type { GiphyProps } from '../../components/Attachment/Giphy';
 import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachment/ImageLoadingFailedIndicator';
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicatorProps } from '../../components/Attachment/ImageReloadIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
   MessagePressableHandlerPayload,
@@ -40,7 +41,6 @@ import type { ReactionListTopProps } from '../../components/Message/MessageSimpl
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
 import type { MessageListProps } from '../../components/MessageList/MessageList';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
@@ -107,7 +107,7 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    **/
   DateHeader: React.ComponentType<DateHeaderProps>;
-  deleteMessage: (message: MessageResponse) => Promise<void>;
+  deleteMessage: (message: LocalMessage) => Promise<void>;
   deleteReaction: (type: string, messageId: string) => Promise<void>;
 
   /** Should keyboard be dismissed when messaged is touched */
@@ -151,6 +151,11 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   ImageLoadingFailedIndicator: React.ComponentType<ImageLoadingFailedIndicatorProps>;
 
+  /**
+   * The indicator rendered at the center of an image whenever its loading fails, used to trigger retries.
+   */
+  ImageReloadIndicator: React.ComponentType<ImageReloadIndicatorProps>;
+
   /**
    * The indicator rendered when image is loading. By default renders <ActivityIndicator/>
    */
@@ -289,15 +294,15 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   /**
    * Override the api request for retry message functionality.
    */
-  retrySendMessage: (message: MessageType) => Promise<void>;
+  retrySendMessage: (message: LocalMessage) => Promise<void>;
   /**
    * UI component for ScrollToBottomButton
    * Defaults to: [ScrollToBottomButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/scroll-to-bottom-button/)
    */
   ScrollToBottomButton: React.ComponentType<ScrollToBottomButtonProps>;
   sendReaction: (type: string, messageId: string) => Promise<void>;
-  setEditingState: (message?: MessageType) => void;
-  setQuotedMessageState: (message?: MessageType) => void;
+  setEditingState: (message?: LocalMessage) => void;
+  setQuotedMessageState: (message?: LocalMessage) => void;
   /**
    * UI component for StreamingMessageView. Displays the text of a message with a typewriter animation.
    */
@@ -314,12 +319,13 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   TypingIndicatorContainer: React.ComponentType<TypingIndicatorContainerProps>;
   UnreadMessagesNotification: React.ComponentType<UnreadMessagesNotificationProps>;
   updateMessage: (
-    updatedMessage: MessageResponse,
+    updatedMessage: MessageResponse | LocalMessage,
     extraState?: {
       commands?: SuggestionCommand[];
       messageInput?: string;
       threadMessages?: ChannelState['threads'][string];
     },
+    throttled?: boolean,
   ) => void;
   /**
    * Custom UI component to display enriched url preview.
@@ -376,29 +382,29 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    * Handler to access when a ban user action is invoked.
    * @param message
    */
-  handleBan?: (message: MessageType) => Promise<void>;
+  handleBan?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a copy message action is invoked */
-  handleCopy?: (message: MessageType) => Promise<void>;
+  handleCopy?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a delete message action is invoked */
-  handleDelete?: (message: MessageType) => Promise<void>;
+  handleDelete?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when an edit message action is invoked */
-  handleEdit?: (message: MessageType) => void;
+  handleEdit?: (message: LocalMessage) => void;
   /** Handler to access when a flag message action is invoked */
-  handleFlag?: (message: MessageType) => Promise<void>;
+  handleFlag?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a mark unread action is invoked */
-  handleMarkUnread?: (message: MessageType) => Promise<void>;
+  handleMarkUnread?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a mute user action is invoked */
-  handleMute?: (message: MessageType) => Promise<void>;
+  handleMute?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a pin/unpin user action is invoked*/
-  handlePinMessage?: ((message: MessageType) => MessageActionType) | null;
+  handlePinMessage?: ((message: LocalMessage) => MessageActionType) | null;
   /** Handler to access when a quoted reply action is invoked */
-  handleQuotedReply?: (message: MessageType) => Promise<void>;
+  handleQuotedReply?: (message: LocalMessage) => Promise<void>;
   /** Handler to process a reaction */
-  handleReaction?: (message: MessageType, reactionType: string) => Promise<void>;
+  handleReaction?: (message: LocalMessage, reactionType: string) => Promise<void>;
   /** Handler to access when a retry action is invoked */
-  handleRetry?: (message: MessageType) => Promise<void>;
+  handleRetry?: (message: LocalMessage) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
-  handleThreadReply?: (message: MessageType) => Promise<void>;
+  handleThreadReply?: (message: LocalMessage) => Promise<void>;
   /** A flag specifying whether the poll creation button is available or not. */
   hasCreatePoll?: boolean;
   /** Handler to deal with custom memoization logic of Attachment */
@@ -586,7 +592,7 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    *
    * Please check [cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#override-or-intercept-message-actions-edit-delete-reaction-reply-etc) for details.
    * */
-  selectReaction?: (message: MessageType) => (reactionType: string) => Promise<void>;
+  selectReaction?: (message: LocalMessage) => (reactionType: string) => Promise<void>;
 
   /**
    * Boolean to enable/disable the message underlay background when there are unread messages in the Message List.

package/src/contexts/pollContext/pollContext.tsx

@@ -1,15 +1,13 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { Poll } from 'stream-chat';
-
-import { MessageType } from '../../components';
+import { LocalMessage, Poll } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type PollContextValue = {
-  message: MessageType;
+  message: LocalMessage;
   poll: Poll;
 };
 

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
 
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
@@ -70,35 +70,54 @@ export const SuggestionsProvider = ({
   children,
   value,
 }: PropsWithChildren<{ value?: Partial<SuggestionsContextValue> }>) => {
+  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem, AutoCompleteSuggestionList } =
+    value ?? {};
   const [triggerType, setTriggerType] = useState<SuggestionComponentType | null>(null);
   const [suggestions, setSuggestions] = useState<Suggestions>();
   const [suggestionsViewActive, setSuggestionsViewActive] = useState(false);
 
-  const openSuggestions = (component: SuggestionComponentType) => {
+  const openSuggestions = useCallback((component: SuggestionComponentType) => {
     setTriggerType(component);
     setSuggestionsViewActive(true);
-  };
-
-  const updateSuggestions = (newSuggestions: Suggestions) => {
-    setSuggestions(newSuggestions);
-    setSuggestionsViewActive(!!triggerType);
-  };
+  }, []);
+
+  const updateSuggestions = useCallback(
+    (newSuggestions: Suggestions) => {
+      setSuggestions(newSuggestions);
+      setSuggestionsViewActive(!!triggerType);
+    },
+    [triggerType],
+  );
 
-  const closeSuggestions = () => {
+  const closeSuggestions = useCallback(() => {
     setTriggerType(null);
     setSuggestions(undefined);
     setSuggestionsViewActive(false);
-  };
-
-  const suggestionsContext = {
-    ...value,
+  }, []);
+
+  const suggestionsContext = useMemo(() => {
+    return {
+      AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem,
+      AutoCompleteSuggestionList,
+      closeSuggestions,
+      openSuggestions,
+      suggestions,
+      suggestionsViewActive,
+      triggerType,
+      updateSuggestions,
+    };
+  }, [
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    AutoCompleteSuggestionList,
     closeSuggestions,
     openSuggestions,
     suggestions,
     suggestionsViewActive,
     triggerType,
     updateSuggestions,
-  };
+  ]);
 
   return (
     <SuggestionsContext.Provider value={suggestionsContext as unknown as SuggestionsContextValue}>

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

@@ -674,6 +674,7 @@ export type Theme = {
       roundedView: ViewStyle;
     };
     unreadUnderlayColor?: ColorValue;
+    wrapper: ViewStyle;
   };
   poll: {
     allOptions: {
@@ -1466,6 +1467,7 @@ export const defaultTheme: Theme = {
       container: {},
       roundedView: {},
     },
+    wrapper: {},
   },
   poll: {
     allOptions: {