fix: commands with username must be replaced with userId

examples/TypeScriptMessaging/package.json

@@ -26,7 +26,7 @@
     "react-native-haptic-feedback": "^1.14.0",
     "react-native-image-crop-picker": "^0.38.0",
     "react-native-image-resizer": "^1.4.5",
-    "react-native-reanimated": "^2.10.0",
+    "react-native-reanimated": "^2.13.0",
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.14.1",
     "react-native-share": "^7.6.4",

examples/TypeScriptMessaging/yarn.lock

@@ -1933,11 +1933,6 @@ array.prototype.flatmap@^1.3.0:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-art@^0.10.1:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
-  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
-
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -2578,14 +2573,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-create-react-class@^15.6.2:
-  version "15.7.0"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
-  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -5060,7 +5047,7 @@ logkitty@^0.7.1:
     dayjs "^1.8.15"
     yargs "^15.1.0"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6251,17 +6238,6 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-react-art@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-art/-/react-art-17.0.2.tgz#ea1b972e0ee19c08f15e2d2cec522f0d992351cc"
-  integrity sha512-x+AhS0ex8B8kWh2GNyRK/IdX9V+xPax22WphtML8RBdu8CYd9dDOgP3ejQlPthpmwILJUaVf/+5a/qQ8X4I+yA==
-  dependencies:
-    art "^0.10.1"
-    create-react-class "^15.6.2"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
 react-devtools-core@4.24.0:
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.24.0.tgz#7daa196bdc64f3626b3f54f2ff2b96f7c4fdf017"
@@ -6365,10 +6341,10 @@ react-native-markdown-package@1.8.2:
     react-native-lightbox "^0.7.0"
     simple-markdown "^0.7.1"
 
-react-native-reanimated@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db"
-  integrity sha512-jKm3xz5nX7ABtHzzuuLmawP0pFWP77lXNdIC6AWOceBs23OHUaJ29p4prxr/7Sb588GwTbkPsYkDqVFaE3ezNQ==
+react-native-reanimated@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.13.0.tgz#d64c1386626822d4dc22094b4efe028ff2c49cc9"
+  integrity sha512-yUHyYVIegWWIza4+nVyS3CSmI/Mc8kLFVHw2c6gnSHaYhYA4LeEjH/jBkoMzHk9Xd0Ra3cwtjYKAMG8OTp6JVg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
@@ -6794,14 +6770,6 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 scheduler@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
@@ -7152,10 +7120,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.4.3:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.4.3.tgz#0342e0359774f5cf92fa6c581dff953922fab38f"
-  integrity sha512-CmZTrkp4iTNiJ56tM3PbTPOWZWoHLECSanI2UPjcdWvIzk5abgPLRK6HPC3qJW4sXeS2uCYAmwlhY9LCn6prIQ==
+stream-chat-react-native-core@5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.6.1.tgz#76b8f882eabac03cced9b9081e865b2af45b7b67"
+  integrity sha512-RUfiu9wjuaJ3UTJtmENMGPdbhKyWmYxkAGIFdI22uf4fTnOGJpu+jhfCo31Co+kMRW0bdCdKW4bfX2DE9EIiaw==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"
@@ -7166,10 +7134,9 @@ stream-chat-react-native-core@5.4.3:
     metro-react-native-babel-preset "0.66.2"
     mime-types "^2.1.34"
     path "0.12.7"
-    react-art "^17.0.2"
     react-native-markdown-package "1.8.2"
     react-native-url-polyfill "^1.3.0"
-    stream-chat "7.0.0"
+    stream-chat "8.1.2"
 
 "stream-chat-react-native-core@link:../../package":
   version "0.0.0"
@@ -7184,10 +7151,10 @@ stream-chat-react-native-devtools@^1.0.4:
   version "0.0.0"
   uid ""
 
-stream-chat@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-7.0.0.tgz#c4021cafda96752ebc21f85e3e306bc3f5b1cfcc"
-  integrity sha512-l1+pANK//Rp6MJm5CZAA0L3Rx0jr4n7TEcUQrkXjqm5oxryo95tuRb7LkMs4kUnqJB7/jHuS0CTjW0v5vLvPoA==
+stream-chat@8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.1.2.tgz#a730072346ae5c96ee0ba0cb334da8ad8d19246c"
+  integrity sha512-C5Xlx+fTGl7fEndcNk1z+t7xYhR9d4FaUPcyoSqq90Gt98SqGFnSZXVbm1MUGfn9Ld31S2W4XBRb8HkDHGoZhg==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@types/jsonwebtoken" "^8.5.6"

package/src/components/Channel/Channel.tsx

@@ -79,6 +79,7 @@ import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { DBSyncManager } from '../../utils/DBSyncManager';
+import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
 import { removeReactionFromLocalState } from '../../utils/removeReactionFromLocalState';
 import { generateRandomId, isLocalUrl, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
@@ -1332,12 +1333,14 @@ const ChannelWithContext = <
       } = updatedMessage;
       if (!channel.id) return;
 
+      const mentionedUserIds = mentioned_users?.map((user) => user.id) || [];
+
       const messageData = {
         attachments,
         id,
-        mentioned_users: mentioned_users?.map((mentionedUser) => mentionedUser.id) || [],
+        mentioned_users: mentionedUserIds,
         parent_id,
-        text,
+        text: patchMessageTextCommand(text ?? '', mentionedUserIds),
         ...extraFields,
       } as StreamMessage<StreamChatGenerics>;
 

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './icons';
 
 export * from './types/types';
 
+export * from './utils/patchMessageTextCommand';
 export * from './utils/Streami18n';
 export * from './utils/utils';
 

package/src/utils/__tests__/patchMessageTextCommand.test.ts

@@ -0,0 +1,14 @@
+import { patchMessageTextCommand } from '../patchMessageTextCommand';
+
+describe('patchMessageTextCommand', () => {
+  test.each<[string, string, string[]]>([
+    ['/ban @santhosh vaiyapuri reason', '/ban @santhosh reason', ['santhosh']],
+    ['/ban @santhosh vaiyapuri', '/ban @santhosh vaiyapuri', ['santhosh']],
+    ['/ban @santhosh', '/ban @santhosh @santhosh', ['santhosh']],
+    ['/ban @santhosh vaiyapuri @khushal reason', '/ban @santhosh reason', ['santhosh', 'khushal']],
+    ['/mute @santhosh vaiyapuri', '/mute @santhosh', ['santhosh']],
+    ['/mute @santhosh vaiyapuri @khushal reason', '/mute @santhosh', ['santhosh', 'khushal']],
+  ])('Patch message with text:"%s" to "%s")', (input, expectedOutput, mentionedUserIds) => {
+    expect(patchMessageTextCommand(input, mentionedUserIds)).toBe(expectedOutput);
+  });
+});

package/src/utils/patchMessageTextCommand.ts

@@ -0,0 +1,35 @@
+/**
+ * Converts a message text command to proper format
+ * Example: "/mute @username" to "/mute @userId"
+ * Supports "/ban", "/unban", "/mute", "/unmute"
+ * @param messageText
+ * @param mentionedUsers
+ * @returns
+ */
+export function patchMessageTextCommand(messageText: string, mentionedUserIds: string[]): string {
+  if (mentionedUserIds.length === 0) {
+    return messageText;
+  }
+  const trimmedMessageText = messageText.trim();
+
+  /**
+   * The required formats are "/unban @userid" or "/mute @userid" or "/unmute @userid"
+   */
+  if (
+    trimmedMessageText.startsWith('/mute ') ||
+    trimmedMessageText.startsWith('/unmute ') ||
+    trimmedMessageText.startsWith('/unban ')
+  ) {
+    return trimmedMessageText.replace(/@.+/, `@${mentionedUserIds[0]}`);
+  }
+
+  /**
+   * The required format is "/ban @userid reason"
+   */
+  if (trimmedMessageText.startsWith('/ban ')) {
+    const reasonText = trimmedMessageText.split(' ').pop() ?? '';
+    return `/ban @${mentionedUserIds[0]} ${reasonText}`.trim();
+  }
+
+  return messageText;
+}