stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

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

@@ -1,26 +1,24 @@
 import React from 'react';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { v5 as uuidv5 } from 'uuid';
 
-import { Thread } from '../Thread';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
-
+import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { ChannelContext } from '../../../contexts/channelContext/ChannelContext';
-import { Streami18n } from '../../../utils/Streami18n';
-
+import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
+import { ImageGalleryProvider } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
-import { ImageGalleryProvider } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
-import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
-import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { Thread } from '../Thread';
 
 const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035';
 
@@ -37,7 +35,7 @@ describe('Thread', () => {
       generateMessage({ parent_id }),
     ];
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       messages: [thread, thread2],
     });
 
@@ -77,7 +75,7 @@ describe('Thread', () => {
       generateStaticMessage('Message6', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
     ];
 
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       channel: {
         id: uuidv5('Channel', StreamReactNativeNamespace),
       },

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

@@ -68,9 +68,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -96,9 +96,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "NeiliBoi3",
-                "image": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
-                "name": "Neil",
+                "id": "finn",
+                "image": "https://i.imgur.com/spueyAP.png",
+                "name": "Finn",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -124,9 +124,9 @@ exports[`Thread should match thread snapshot 1`] = `
               "user": Object {
                 "banned": false,
                 "created_at": "2020-04-27T13:39:49.331742Z",
-                "id": "GrantyBoi2",
-                "image": "https://i.imgur.com/SLx06PP.png",
-                "name": "Grant",
+                "id": "arthur",
+                "image": "https://i.imgur.com/LuuGvh0.png",
+                "name": "Arthur",
                 "online": false,
                 "role": "user",
                 "updated_at": "2020-04-27T13:39:49.332087Z",
@@ -314,7 +314,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/SLx06PP.png",
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
                                 }
                               }
                               style={
@@ -561,7 +561,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
+                                  "uri": "https://i.imgur.com/spueyAP.png",
                                 }
                               }
                               style={
@@ -808,7 +808,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               onError={[Function]}
                               source={
                                 Object {
-                                  "uri": "https://i.imgur.com/SLx06PP.png",
+                                  "uri": "https://i.imgur.com/LuuGvh0.png",
                                 }
                               }
                               style={
@@ -1098,7 +1098,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 onError={[Function]}
                                 source={
                                   Object {
-                                    "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
+                                    "uri": "https://i.imgur.com/spueyAP.png",
                                   }
                                 }
                                 style={

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,19 +12,9 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
-
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
   messagePadding: {
@@ -46,26 +36,14 @@ const styles = StyleSheet.create({
 });
 
 type ThreadFooterComponentPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Message'> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
 
 const ThreadFooterComponentWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
@@ -125,17 +103,9 @@ const ThreadFooterComponentWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
+  nextProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { thread: prevThread } = prevProps;
   const { thread: nextThread } = nextProps;
@@ -167,16 +137,10 @@ const MemoizedThreadFooter = React.memo(
 ) as typeof ThreadFooterComponentWithContext;
 
 export const ThreadFooterComponent = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { Message } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { Message } = useMessagesContext<StreamChatGenerics>();
+  const { thread } = useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter

package/src/components/docs/data.js

@@ -1,7 +1,6 @@
 /* global require */
-
-const StreamChat = require('stream-chat').StreamChat;
 const Dayjs = require('dayjs');
+const StreamChat = require('stream-chat').StreamChat;
 export const client = new StreamChat('qk4nn7rpcn75');
 
 client.connectUser(
@@ -18,8 +17,8 @@ export const channel = client.channel('messaging', 'general', {
 });
 
 export const channelContext = {
-  client,
   channel,
+  client,
 };
 
 export const translationContext = {
@@ -27,13 +26,13 @@ export const translationContext = {
   tDateTimeParser: (date) => Dayjs(date),
 };
 export const suggestionsContext = {
-  openSuggestions: () => {},
   closeSuggestions: () => {},
+  openSuggestions: () => {},
   setInputBoxContainerRef: () => {},
   updateSuggestions: () => {},
 };
 
-const filters = { type: 'team', example: 1 };
+const filters = { example: 1, type: 'team' };
 const sort = { last_message_at: -1 };
 
 export const channels = client.queryChannels(filters, sort, {
@@ -41,11 +40,14 @@ export const channels = client.queryChannels(filters, sort, {
 });
 
 export const message = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -111,8 +113,8 @@ export const message = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'Hey this is getstream message',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -125,12 +127,11 @@ export const message = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const messageWithImages = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -164,6 +165,7 @@ export const messageWithImages = {
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html: '',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -229,8 +231,8 @@ export const messageWithImages = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'This message contains images',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -243,12 +245,12 @@ export const messageWithImages = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
+  
 };
 
 export const messageWithUrlPreview = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -267,6 +269,7 @@ export const messageWithUrlPreview = {
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -332,8 +335,8 @@ export const messageWithUrlPreview = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'https://unsplash.com/photos/lxuB4abGzXc',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -346,12 +349,11 @@ export const messageWithUrlPreview = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const thread = {
+  __html:
+    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
   attachments: [
     {
       image_url:
@@ -370,12 +372,13 @@ export const thread = {
   created_at: '2019-01-25T21:25:45.306Z',
   html:
     '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
+  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   own_reactions: [],
   reaction_counts: null,
   reactions: [],
   reply_count: 2,
+  status: 'received',
   text: 'this place looks amazing: https://unsplash.com/photos/f3hDGOHptrM',
-  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   type: 'regular',
   updated_at: '2019-01-25T21:25:45.306Z',
   user: {
@@ -385,24 +388,24 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
-  __html:
-    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
-  status: 'received',
+  
 };
 
 export const threadMessages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -415,21 +418,21 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -442,24 +445,24 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
 export const messages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -472,21 +475,21 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -499,8 +502,6 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
@@ -516,12 +517,12 @@ export const users = [
 ];
 
 export const MessageMock = {
-  handleFlag: console.log,
-  handleMute: console.log,
-  handleEdit: console.log,
-  handleDelete: console.log,
   canDeleteMessage: () => true,
   canEditMessage: () => true,
+  handleDelete: console.log,
+  handleEdit: console.log,
+  handleFlag: console.log,
+  handleMute: console.log,
 };
 
 // Based on: https://javascript.info/promise-basics#example-loadscript

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
@@ -143,6 +144,7 @@ export * from './MessageOverlay/MessageActionListItem';
 export * from './MessageOverlay/MessageOverlay';
 export * from './MessageOverlay/OverlayBackdrop';
 export * from './MessageOverlay/OverlayReactions';
+export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
 
 export * from './Reply/Reply';

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -1,8 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 type ActiveChannels = React.MutableRefObject<string[]>;
 

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Asset } from '../../native';
-import type { UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
   numberOfImageUploads: number;
@@ -118,18 +117,20 @@ export const AttachmentPickerProvider = ({
 export const useAttachmentPickerContext = () =>
   useContext(AttachmentPickerContext) as unknown as AttachmentPickerContextValue;
 
-export const withAttachmentPickerContext = <P extends UnknownType>(
-  Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof AttachmentPickerContextValue>> => {
+export const withAttachmentPickerContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<StreamChatGenerics>,
+): React.FC<Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>> => {
   const WithAttachmentPickerContextComponent = (
-    props: Omit<P, keyof AttachmentPickerContextValue>,
+    props: Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>,
   ) => {
     const attachmentPickerContext = useAttachmentPickerContext();
 
-    return <Component {...(props as P)} {...attachmentPickerContext} />;
+    return <Component {...(props as StreamChatGenerics)} {...attachmentPickerContext} />;
   };
   WithAttachmentPickerContextComponent.displayName = `WithAttachmentPickerContext${getDisplayName(
-    Component,
+    Component as React.ComponentType,
   )}`;
   return WithAttachmentPickerContextComponent;
 };