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

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import type { Channel as ChannelType } from 'stream-chat';
+
+import { useChannelsStateContext } from './ChannelsStateContext';
+
+import type { ChannelsStateContextValue, ChannelState, Keys } from './ChannelsStateContext';
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+
+type StateManagerParams<
+  Key extends Keys,
+  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,
+> = Omit<
+  ChannelsStateContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  'increaseSubscriberCount' | 'decreaseSubscriberCount'
+> & {
+  cid: string;
+  key: Key;
+};
+
+/* 
+  This hook takes care of creating a useState-like interface which can be used later to call
+  updates to the ChannelsStateContext reducer. It receives the cid and key which it wants to update
+  and perform the state updates. Also supports a initialState.
+*/
+function useStateManager<
+  Key extends Keys,
+  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,
+>(
+  {
+    cid,
+    key,
+    setState,
+    state,
+  }: Omit<
+    StateManagerParams<Key, At, Ch, Co, Ev, Me, Re, Us>,
+    'increaseSubscriberCount' | 'decreaseSubscriberCount'
+  >,
+  initialValue?: ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key],
+) {
+  const memoizedInitialValue = useMemo(() => initialValue, []);
+  const value =
+    state[cid]?.[key] || (memoizedInitialValue as ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key]);
+
+  const setValue = useCallback(
+    (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key]) => setState({ cid, key, value }),
+    [cid, key],
+  );
+
+  return [value, setValue] as const;
+}
+
+export type UseChannelStateValue<
+  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,
+> = {
+  members: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['members'];
+  messages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'];
+  read: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['read'];
+  setMembers: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['members']) => void;
+  setMessages: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => void;
+  setRead: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['read']) => void;
+  setThreadMessages: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threadMessages']) => void;
+  setTyping: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['typing']) => void;
+  setWatcherCount: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcherCount']) => void;
+  setWatchers: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers']) => void;
+  threadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'];
+  typing: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['typing'];
+  watcherCount: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcherCount'];
+  watchers: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers'];
+};
+
+export function useChannelState<
+  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,
+>(
+  channel: ChannelType<At, Ch, Co, Ev, Me, Re, Us> | undefined,
+  threadId?: string,
+): UseChannelStateValue<At, Ch, Co, Ev, Me, Re, Us> {
+  const cid = channel?.id || 'id'; // in case channel is not initialized, use generic id string for indexing
+  const { decreaseSubscriberCount, increaseSubscriberCount, setState, state } =
+    useChannelsStateContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+  // Keeps track of how many Channel components are subscribed to this Channel state (Channel vs Thread concurrency)
+  useEffect(() => {
+    increaseSubscriberCount({ cid });
+    return () => {
+      decreaseSubscriberCount({ cid });
+    };
+  }, []);
+
+  const [members, setMembers] = useStateManager(
+    {
+      cid,
+      key: 'members',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [messages, setMessages] = useStateManager(
+    {
+      cid,
+      key: 'messages',
+      setState,
+      state,
+    },
+    channel?.state?.messages || [],
+  );
+
+  const [read, setRead] = useStateManager(
+    {
+      cid,
+      key: 'read',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [typing, setTyping] = useStateManager(
+    {
+      cid,
+      key: 'typing',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [watcherCount, setWatcherCount] = useStateManager({
+    cid,
+    key: 'watcherCount',
+    setState,
+    state,
+  });
+
+  const [watchers, setWatchers] = useStateManager(
+    {
+      cid,
+      key: 'watchers',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [threadMessages, setThreadMessages] = useStateManager(
+    {
+      cid,
+      key: 'threadMessages',
+      setState,
+      state,
+    },
+    (threadId && channel?.state?.threads?.[threadId]) || [],
+  );
+
+  return {
+    members,
+    messages,
+    read,
+    setMembers,
+    setMessages,
+    setRead,
+    setThreadMessages,
+    setTyping,
+    setWatcherCount,
+    setWatchers,
+    threadMessages,
+    typing,
+    watcherCount,
+    watchers,
+  };
+}

package/src/contexts/messageContext/MessageContext.tsx

@@ -40,10 +40,6 @@ export type MessageContextValue<
   actionsEnabled: boolean;
   /** Position of the message, either 'right' or 'left' */
   alignment: Alignment;
-  /**
-   * Function that returns a boolean indicating whether or not the user can edit/delete the message.
-   */
-  canModifyMessage: boolean;
   /** The files attached to a message */
   files: Attachment<At>[];
   /**
@@ -115,10 +111,7 @@ export type MessageContextValue<
   preventPress?: boolean;
   /** Whether or not the avatar show show next to Message */
   showAvatar?: boolean;
-} & Pick<
-  ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'channel' | 'disabled' | 'members' | 'readEventsEnabled'
->;
+} & Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel' | 'disabled' | 'members'>;
 
 export const MessageContext = React.createContext({} as MessageContextValue);
 

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
-import { Keyboard } from 'react-native';
+import { Alert, Keyboard } from 'react-native';
 import uniq from 'lodash/uniq';
 import {
   Attachment,
@@ -21,6 +21,7 @@ import { useChatContext } from '../chatContext/ChatContext';
 import { ChannelContextValue, useChannelContext } from '../channelContext/ChannelContext';
 import { useThreadContext } from '../threadContext/ThreadContext';
 import { getDisplayName } from '../utils/getDisplayName';
+import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
 
 import {
   ACITriggerSettings,
@@ -28,14 +29,20 @@ import {
   FileState,
   generateRandomId,
   TriggerSettings,
+  urlRegex,
 } from '../../utils/utils';
 
 import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
 
+import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { useTranslationContext } from '../translationContext/TranslationContext';
+
 import type { TextInput, TextInputProps } from 'react-native';
+import { lookup } from 'mime-types';
 
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
+import type { CooldownTimerProps } from '../../components/MessageInput/CooldownTimer';
 import type { FileUploadPreviewProps } from '../../components/MessageInput/FileUploadPreview';
 import type { ImageUploadPreviewProps } from '../../components/MessageInput/ImageUploadPreview';
 import type { InputButtonsProps } from '../../components/MessageInput/InputButtons';
@@ -55,8 +62,6 @@ import type {
   UnknownType,
 } from '../../types/types';
 
-const MIME_TYPE_OCTET_STREAM = 'application/octet-stream';
-
 export type FileUpload = {
   file: {
     name: string;
@@ -78,11 +83,6 @@ export type ImageUpload = {
   url?: string;
 };
 
-export type InputConfig = {
-  maxMessageLength?: number;
-  uploadsEnabled?: boolean;
-};
-
 export type MentionAllAppUsersQuery<Us extends DefaultUserType> = {
   filters?: UserFilters<Us>;
   options?: UserOptions;
@@ -103,6 +103,8 @@ export type LocalMessageInputContext<
     };
   };
   closeAttachmentPicker: () => void;
+  /** The time at which the active cooldown will end */
+  cooldownEndsAt: Date;
   /**
    * An array of file objects which are set for upload. It has the following structure:
    *
@@ -243,6 +245,14 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: [CommandsButton](https://getstream.github.io/stream-chat-react-native/v3/#commandsbutton)
    */
   CommandsButton: React.ComponentType<CommandsButtonProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom UI component to display the remaining cooldown a user will have to wait before
+   * being allowed to send another message. This component is displayed in place of the
+   * send button for the MessageInput component.
+   *
+   * **default** [CooldownTimer](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/CooldownTimer.tsx)
+   */
+  CooldownTimer: React.ComponentType<CooldownTimerProps>;
   editing: boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>;
   editMessage: StreamChat<At, Ch, Co, Ev, Me, Re, Us>['updateMessage'];
   /**
@@ -375,6 +385,7 @@ export type InputMessageInputContextValue<
    * - toggleAttachmentPicker
    */
   InputButtons?: React.ComponentType<InputButtonsProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  maxMessageLength?: number;
   mentionAllAppUsersEnabled?: boolean;
   /** Object containing filters/sort/options overrides for an @mention user query */
   mentionAllAppUsersQuery?: MentionAllAppUsersQuery<Us>;
@@ -382,6 +393,7 @@ export type InputMessageInputContextValue<
    * Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
    */
   onChangeText?: (newText: string) => void;
+  SendMessageDisallowedIndicator?: React.ComponentType;
   /**
    * ref for input setter function
    *
@@ -390,7 +402,7 @@ export type InputMessageInputContextValue<
    * @overrideType Function
    */
   setInputRef?: (ref: TextInput | null) => void;
-} & InputConfig;
+};
 
 export type MessageInputContextValue<
   At extends UnknownType = DefaultAttachmentType,
@@ -422,10 +434,11 @@ export const MessageInputProvider = <
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const channelCapabities = useOwnCapabilitiesContext();
 
   const { channel, giphyEnabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
-
+  const { t } = useTranslationContext();
   const inputBoxRef = useRef<TextInput | null>(null);
   const sending = useRef(false);
 
@@ -453,6 +466,8 @@ export const MessageInputProvider = <
     showMoreOptions,
     text,
   } = useMessageDetailsForState<At, Ch, Co, Ev, Me, Re, Us>(editing, initialValue);
+  const { endsAt: cooldownEndsAt, start: startCooldown } =
+    useCooldown<At, Ch, Co, Ev, Me, Re, Us>();
 
   const threadId = thread?.id;
   useEffect(() => {
@@ -502,7 +517,7 @@ export const MessageInputProvider = <
     }
     setText(newText);
 
-    if (newText && channel) {
+    if (newText && channel && channelCapabities.sendTypingEvents) {
       logChatPromiseExecution(channel.keystroke(thread?.id), 'start typing event');
     }
 
@@ -608,14 +623,25 @@ export const MessageInputProvider = <
     setText('');
   };
 
+  // TODO: Figure out why this is async, as it doesn't await any promise.
+  // eslint-disable-next-line require-await
   const sendMessage = async () => {
     if (sending.current) {
       return;
     }
+
+    if (!channelCapabities.sendLinks && !!text.match(urlRegex)) {
+      Alert.alert(t('Links are disabled'), t('Sending links is not allowed in this conversation'));
+
+      return;
+    }
+
     sending.current = true;
 
+    startCooldown();
+
     const prevText = giphyEnabled && giphyActive ? `/giphy ${text}` : text;
-    await setText('');
+    setText('');
     if (inputBoxRef.current) {
       inputBoxRef.current.clear();
     }
@@ -665,6 +691,14 @@ export const MessageInputProvider = <
             image_url: file.url,
             type: 'image',
           } as Attachment<At>);
+        } else if (file.file.type?.startsWith('video/')) {
+          attachments.push({
+            asset_url: file.url,
+            file_size: file.file.size,
+            mime_type: file.file.type,
+            title: file.file.name,
+            type: 'video',
+          } as Attachment<At>);
         } else {
           attachments.push({
             asset_url: file.url,
@@ -741,6 +775,7 @@ export const MessageInputProvider = <
         },
       ] as StreamMessage<At, Me, Us>['attachments'];
 
+      startCooldown();
       try {
         value.sendMessage({
           attachments,
@@ -809,7 +844,7 @@ export const MessageInputProvider = <
     }
     const { file, id } = newFile;
 
-    await setFileUploads((prevFileUploads) =>
+    setFileUploads((prevFileUploads) =>
       prevFileUploads.map((fileUpload) => {
         if (fileUpload.id === id) {
           return {
@@ -826,7 +861,7 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
-        response = await channel.sendFile(file.uri, file.name, MIME_TYPE_OCTET_STREAM);
+        response = await channel.sendFile(file.uri, file.name, file.type);
       }
     } catch (error) {
       console.warn(error);
@@ -905,12 +940,13 @@ export const MessageInputProvider = <
             uri,
             width: file.width,
           }));
-
+      const filename = uri.replace(/^(file:\/\/|content:\/\/|assets-library:\/\/)/, '');
+      const contentType = lookup(filename) || 'multipart/form-data';
       if (value.doImageUploadRequest) {
         response = await value.doImageUploadRequest(file, channel);
       } else if (compressedUri && channel) {
         if (value.sendImageAsync) {
-          channel.sendImage(compressedUri, undefined, MIME_TYPE_OCTET_STREAM).then((res) => {
+          channel.sendImage(compressedUri, undefined, contentType).then((res) => {
             if (asyncIds.includes(id)) {
               // Evaluates to true if user hit send before image successfully uploaded
               setAsyncUploads((prevAsyncUploads) => {
@@ -937,7 +973,7 @@ export const MessageInputProvider = <
             }
           });
         } else {
-          response = await channel.sendImage(compressedUri, undefined, MIME_TYPE_OCTET_STREAM);
+          response = await channel.sendImage(compressedUri, undefined, contentType);
         }
       }
 
@@ -983,8 +1019,9 @@ export const MessageInputProvider = <
     uri?: string;
   }) => {
     const id = generateRandomId();
+    const mimeType = lookup(file.name);
     const newFile = {
-      file: { ...file, type: MIME_TYPE_OCTET_STREAM },
+      file: { ...file, type: mimeType || file?.type },
       id,
       state: FileState.UPLOADING,
     };
@@ -1016,6 +1053,7 @@ export const MessageInputProvider = <
     asyncIds,
     asyncUploads,
     closeAttachmentPicker,
+    cooldownEndsAt,
     fileUploads,
     giphyActive,
     imageUploads,

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

@@ -35,6 +35,8 @@ export const useCreateMessageInputContext = <
   closeAttachmentPicker,
   CommandsButton,
   compressImageQuality,
+  cooldownEndsAt,
+  CooldownTimer,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -78,6 +80,7 @@ export const useCreateMessageInputContext = <
   sending,
   sendMessage,
   sendMessageAsync,
+  SendMessageDisallowedIndicator,
   sendThreadMessageInChannel,
   setAsyncIds,
   setAsyncUploads,
@@ -104,7 +107,6 @@ export const useCreateMessageInputContext = <
   uploadNewFile,
   uploadNewImage,
   UploadProgressIndicator,
-  uploadsEnabled,
 }: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us> &
   Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>) => {
   const editingExists = !!editing;
@@ -131,6 +133,8 @@ export const useCreateMessageInputContext = <
       closeAttachmentPicker,
       CommandsButton,
       compressImageQuality,
+      cooldownEndsAt,
+      CooldownTimer,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -174,6 +178,7 @@ export const useCreateMessageInputContext = <
       sending,
       sendMessage,
       sendMessageAsync,
+      SendMessageDisallowedIndicator,
       sendThreadMessageInChannel,
       setAsyncIds,
       setAsyncUploads,
@@ -199,9 +204,9 @@ export const useCreateMessageInputContext = <
       uploadNewFile,
       uploadNewImage,
       UploadProgressIndicator,
-      uploadsEnabled,
     }),
     [
+      cooldownEndsAt,
       editingExists,
       fileUploadsValue,
       giphyActive,
@@ -214,7 +219,6 @@ export const useCreateMessageInputContext = <
       showMoreOptions,
       text,
       threadId,
-      uploadsEnabled,
     ],
   );
 

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -2,14 +2,18 @@ import React, { PropsWithChildren, useContext, useState } from 'react';
 
 import { getDisplayName } from '../utils/getDisplayName';
 
-import type { StyleProp, TextStyle } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
 import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
 import type { MessagesContextValue } from '../messagesContext/MessagesContext';
 
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { MessageActionsProps } from '../../components/MessageOverlay/MessageActions';
+import type {
+  MessageActionListItemProps,
+  MessageActionType,
+} from '../../components/MessageOverlay/MessageActionListItem';
+import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
 import type {
@@ -24,13 +28,6 @@ import type {
 } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
-export type MessageAction = {
-  action: () => void;
-  title: string;
-  icon?: React.ReactElement;
-  titleStyle?: StyleProp<TextStyle>;
-};
-
 export type MessageOverlayData<
   At extends UnknownType = DefaultAttachmentType,
   Ch extends UnknownType = DefaultChannelType,
@@ -47,13 +44,14 @@ export type MessageOverlayData<
   handleReaction?: (reactionType: string) => Promise<void>;
   images?: Attachment<At>[];
   message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageActions?: MessageAction[];
+  messageActions?: MessageActionType[];
   messageContext?: MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>;
   messageReactionTitle?: string;
   messagesContext?: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>;
   onlyEmojis?: boolean;
   otherAttachments?: Attachment<At>[];
   OverlayReactionList?: React.ComponentType<OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
 };
@@ -70,9 +68,10 @@ export type MessageOverlayContextValue<
   /**
    * Custom UI component for rendering [message actions](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay.
    *
-   * **Default** [MessageActions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
    */
-  MessageActions: React.ComponentType<MessageActionsProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  MessageActionList: React.ComponentType<MessageActionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  MessageActionListItem: React.ComponentType<MessageActionListItemProps>;
   /**
    * Custom UI component for rendering [reaction selector](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay (which shows up on long press on message).
    *
@@ -109,6 +108,7 @@ export const MessageOverlayProvider = <
   const [data, setData] = useState(value?.data);
 
   const reset = () => {
+    // TODO: Add the isMounted check here.
     setData(value?.data);
   };