Merge pull request #1333 from GetStream/Enigma-I-am/mentioned-user-profile

feat: ability to add onPress handler for mentioned user names - [Documentation link](https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#onpressmessage)

Author: vishalnarkhede

.gitignore

@@ -3,3 +3,4 @@ NEXT_RELEASE_CHANGELOG.md
 artifacts
 e2e/.env
 *.log
+.DS_STORE

docusaurus/docs/reactnative/common-content/core-components/channel/props/on_press_message.mdx

@@ -11,6 +11,27 @@ You will have to handle these cases when overriding this function.
 | -------- |
 | function |
 
-| Parameter | Description                   |
-| --------- | ----------------------------- |
-| payload   | `{ actionHandlers, message }` |
+| Parameter | Description                                   |
+| --------- | --------------------------------------------- |
+| payload   | `{ additionalInfo, actionHandlers, message }` |
+
+The `additionalInfo` prop is handy for getting information from certain click events.
+A good example of this is getting the user details when a textMention (for example @Enigma-I-am) is clicked.
+
+For example:
+
+```tsx
+    <Channel
+    onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {
+        if (emitter === 'textMention') {
+          console.log(additionalInfo?.user);
+          return;
+        }
+        defaultHandler?.();
+    }}
+    >
+```
+
+:::info
+
+The `additionalInfo` prop will change over time as we explore more usecases for different `emitter's`.

examples/SampleApp/ios/Podfile.lock

@@ -848,4 +848,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: a640bd2ecc4e73329d8379590f3ee5bc09ecba5f
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3

package/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -52,21 +52,34 @@ import {
 } from '../MessageList/hooks/useMessageList';
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
+export type TouchableEmitter =
+  | 'card'
+  | 'fileAttachment'
+  | 'gallery'
+  | 'giphy'
+  | 'message'
+  | 'messageContent'
+  | 'messageReplies'
+  | 'reactionList'
+  | 'textLink';
+
+export type TextMentionTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'textMention';
+  additionalInfo?: { user?: UserResponse<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
-  emitter?:
-    | 'card'
-    | 'fileAttachment'
-    | 'gallery'
-    | 'giphy'
-    | 'message'
-    | 'messageContent'
-    | 'messageReplies'
-    | 'reactionList'
-    | 'textLink'
-    | 'textMention';
   event?: GestureResponderEvent;
-};
+} & (
+  | {
+      additionalInfo?: Record<string, unknown>;
+      emitter?: TouchableEmitter;
+    }
+  | TextMentionTouchableHandlerPayload
+);
 
 export type MessageTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -595,45 +608,40 @@ const MessageWithContext = <
     onlyEmojis,
     onOpenThread,
     onPress: (payload) => {
-      onPressProp
-        ? onPressProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : onPressMessageProp
-        ? onPressMessageProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : payload.defaultHandler
-        ? payload.defaultHandler()
-        : onPress();
+      const onPressArgs = {
+        actionHandlers,
+        additionalInfo: payload.additionalInfo,
+        defaultHandler: payload.defaultHandler || onPress,
+        emitter: payload.emitter || 'message',
+        event: payload.event,
+        message,
+      };
+
+      const handleOnPress = () => {
+        if (onPressProp) return onPressProp(onPressArgs);
+        if (onPressMessageProp) return onPressMessageProp(onPressArgs);
+        if (payload.defaultHandler) return payload.defaultHandler();
+
+        return onPress();
+      };
+
+      handleOnPress();
     },
     onPressIn:
       onPressInProp || onPressInMessageProp
         ? (payload) => {
-            onPressInProp
-              ? onPressInProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                })
-              : onPressInMessageProp &&
-                onPressInMessageProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                });
+            const onPressInArgs = {
+              actionHandlers,
+              defaultHandler: payload.defaultHandler,
+              emitter: payload.emitter || 'message',
+              event: payload.event,
+              message,
+            };
+            const handleOnpressIn = () => {
+              if (onPressInProp) return onPressInProp(onPressInArgs);
+              if (onPressInMessageProp) return onPressInMessageProp(onPressInArgs);
+            };
+            handleOnpressIn();
           }
         : null,
     otherAttachments: attachments.other,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -17,6 +17,8 @@ import {
   State,
 } from 'simple-markdown';
 
+import type { UserResponse } from 'stream-chat';
+
 import { parseLinksFromText } from './parseLinks';
 
 import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
@@ -211,9 +213,16 @@ export const renderText = <
   const match: MatchFunction = (source) => regEx.exec(source);
 
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
+    /**removes the @ prefix of username */
+    const userName = node.content[0]?.content?.substring(1);
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
+          additionalInfo: {
+            user: mentioned_users?.find(
+              (user: UserResponse<StreamChatGenerics>) => userName === user.name,
+            ),
+          },
           emitter: 'textMention',
           event,
         });

package/src/contexts/messageContext/MessageContext.tsx

@@ -3,7 +3,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { Attachment } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
-import type { TouchableHandlerPayload } from '../../components/Message/Message';
+import type {
+  MessageTouchableHandlerPayload,
+  TouchableHandlerPayload,
+} from '../../components/Message/Message';
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
@@ -62,7 +65,7 @@ export type MessageContextValue<
    *
    * By default, we show the overlay with all the message actions on long press.
    *
-   * @param event   Event object for onLongPress event
+   * @param payload   Payload object for onLongPress event
    */
   onLongPress: (payload: TouchableHandlerPayload) => void;
   /** Whether the message is only text and the text is only emojis */
@@ -77,9 +80,9 @@ export type MessageContextValue<
    *
    * By default, we will dismiss the keyboard on press.
    *
-   * @param event   Event object for onPress event
+   * @param payload   Payload object for onPress event
    */
-  onPress: (payload: TouchableHandlerPayload) => void;
+  onPress: (payload: MessageTouchableHandlerPayload) => void;
   onPressIn: ((payload: TouchableHandlerPayload) => void) | null;
   /** The images attached to a message */
   otherAttachments: Attachment<StreamChatGenerics>[];