fix: check the send link capability before sending message

Author: khushal87

package/src/components/Channel/__tests__/ownCapabilities.test.js

@@ -343,11 +343,18 @@ describe('Own capabilities', () => {
   describe(`${allOwnCapabilities.sendLinks} capability`, () => {
     it(`should not allow sending links when "${allOwnCapabilities.sendLinks}" capability is disabled`, async () => {
       await generateChannelWithCapabilities([allOwnCapabilities.sendMessage]);
-      const { queryByTestId } = render(
-        getComponent({
-          initialValue: 'Awesome repository https://github.com/GetStream/stream-chat-react-native',
-        }),
-      );
+      const { queryByTestId } = render(getComponent());
+
+      await act(async () => {
+        const text = 'Awesome repository https://github.com/GetStream/stream-chat-react-native';
+        await channel.messageComposer.textComposer.handleChange({
+          selection: {
+            end: text.length,
+            start: text.length,
+          },
+          text,
+        });
+      });
 
       const sendMessage = jest.fn();
       channel.sendMessage = sendMessage;
@@ -371,10 +378,20 @@ describe('Own capabilities', () => {
           mockFn();
           return sendMessageApi();
         },
-        initialValue: 'Awesome repository https://github.com/GetStream/stream-chat-react-native',
       }),
     );
 
+    await act(async () => {
+      const text = 'Awesome repository https://github.com/GetStream/stream-chat-react-native';
+      await channel.messageComposer.textComposer.handleChange({
+        selection: {
+          end: text.length,
+          start: text.length,
+        },
+        text,
+      });
+    });
+
     act(() => {
       fireEvent(queryByTestId('send-button'), 'onPress');
     });

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -36,6 +36,7 @@ import {
   PollContentProps,
   StopMessageStreamingButtonProps,
 } from '../../components';
+import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { AttachmentUploadProgressIndicatorProps } from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
@@ -75,6 +76,7 @@ import {
 import { useChannelContext } from '../channelContext/ChannelContext';
 import { useChatContext } from '../chatContext/ChatContext';
 import { useMessageComposerAPIContext } from '../messageComposerContext/MessageComposerAPIContext';
+import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useThreadContext } from '../threadContext/ThreadContext';
 import { useTranslationContext } from '../translationContext/TranslationContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -183,9 +185,12 @@ export type InputMessageInputContextValue = {
   AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps>;
 
   /**
-   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.
+   * Custom UI component to render [draggable
+   * handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment
+   * picker.
    *
-   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
+   * **Default**
+   * [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
    */
   AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
   /**
@@ -203,7 +208,8 @@ export type InputMessageInputContextValue = {
   /**
    * Custom UI component for AttachmentPickerSelectionBar
    *
-   * **Default: ** [AttachmentPickerSelectionBar](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx)
+   * **Default: **
+   * [AttachmentPickerSelectionBar](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx)
    */
   AttachmentPickerSelectionBar: React.ComponentType;
   /**
@@ -214,33 +220,41 @@ export type InputMessageInputContextValue = {
   attachmentSelectionBarHeight: number;
 
   /**
-   * Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
+   * Custom UI component for [camera selector
+   * icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
+   * **Default: **
+   * [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
    */
   CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   /**
    * Custom UI component for the poll creation icon.
    *
-   * **Default: ** [CreatePollIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CreatePollIcon.tsx)
+   * **Default: **
+   * [CreatePollIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CreatePollIcon.tsx)
    */
   CreatePollIcon: React.ComponentType;
   /**
-   * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
+   * Custom UI component for [file selector
+   * icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
+   * **Default: **
+   * [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
    */
   FileSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   /**
-   * Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
+   * Custom UI component for [image selector
+   * icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
+   * **Default: **
+   * [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
    */
   ImageSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   /**
    * Custom UI component for Android's video recorder selector icon.
    *
-   * **Default: ** [VideoRecorderSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx)
+   * **Default: **
+   * [VideoRecorderSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx)
    */
   VideoRecorderSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   AudioAttachmentUploadPreview: React.ComponentType<AudioAttachmentUploadPreviewProps>;
@@ -428,6 +442,7 @@ export const MessageInputProvider = ({
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
   const { client, enableOfflineSupport } = useChatContext();
+  const channelCapabilities = useOwnCapabilitiesContext();
 
   const { uploadAbortControllerRef } = useChannelContext();
   const { clearEditingState } = useMessageComposerAPIContext();
@@ -456,7 +471,8 @@ export const MessageInputProvider = ({
 
   /**
    * These are the RN SDK specific middlewares that are added to the message composer to provide the default behaviour.
-   * TODO: Discuss and decide if we provide them by default in the SDK or leave it to the user to add them if they want the feature.
+   * TODO: Discuss and decide if we provide them by default in the SDK or leave it to the user to add them if they want
+   * the feature.
    */
   useEffect(() => {
     if (value.doFileUploadRequest) {
@@ -602,7 +618,15 @@ export const MessageInputProvider = ({
 
     const composition = await messageComposer.compose();
     if (!composition || !composition.message) return;
+
     const { localMessage, message, sendOptions } = composition;
+    const linkInfos = parseLinksFromText(localMessage.text);
+
+    if (!channelCapabilities.sendLinks && linkInfos.length > 0) {
+      Alert.alert(t('Links are disabled'), t('Sending links is not allowed in this conversation'));
+
+      return;
+    }
 
     if (editedMessage && editedMessage.type !== 'error') {
       try {