From c0a10e9b185aa695b26039ed832c0692075780dc Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Fri, 5 Aug 2022 11:19:26 +0530
Subject: [PATCH] Send user pills

---
 src/app/organisms/room/RoomViewCmdBar.jsx |  2 +-
 src/app/organisms/room/RoomViewInput.jsx  |  4 +++-
 src/client/state/RoomsInput.js            | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx
index e1a4e184..15f298e9 100644
--- a/src/app/organisms/room/RoomViewCmdBar.jsx
+++ b/src/app/organisms/room/RoomViewCmdBar.jsx
@@ -253,7 +253,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     }
     if (myCmd.prefix === '@') {
       viewEvent.emit('cmd_fired', {
-        replace: myCmd.result.name,
+        replace: `@${myCmd.result.userId}`,
       });
     }
     deactivateCmd();
diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index 37e02989..f4ba3f3f 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -129,7 +129,9 @@ function RoomViewInput({
   function firedCmd(cmdData) {
     const msg = textAreaRef.current.value;
     textAreaRef.current.value = replaceCmdWith(
-      msg, cmdCursorPos, typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '',
+      msg,
+      cmdCursorPos,
+      typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '',
     );
     deactivateCmd();
   }
diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index a9ecbb4d..1c78179d 100644
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -111,6 +111,7 @@ function bindReplyToContent(roomId, reply, content) {
 
 function formatAndEmojifyText(mx, roomList, roomId, text) {
   const room = mx.getRoom(roomId);
+  const { userIdsToDisplayNames } = room.currentState;
   const parentIds = roomList.getAllParentSpaces(roomId);
   const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
   const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
@@ -122,13 +123,24 @@ function formatAndEmojifyText(mx, roomList, roomId, text) {
     formattedText = text;
   }
 
+  const MXID_REGEX = /\B@\S+:\S+\.\S+/g;
+  Array.from(formattedText.matchAll(MXID_REGEX))
+    .filter((mxidMatch) => userIdsToDisplayNames[mxidMatch[0]])
+    .reverse()
+    .forEach((mxidMatch) => {
+      const tag = `<a href="https://matrix.to/#/${mxidMatch[0]}">${userIdsToDisplayNames[mxidMatch[0]]}</a>`;
+
+      formattedText = formattedText.substr(0, mxidMatch.index)
+        + tag
+        + formattedText.substr(mxidMatch.index + mxidMatch[0].length);
+    });
+
   const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
   Array.from(formattedText.matchAll(SHORTCODE_REGEX))
     .filter((shortcodeMatch) => allEmoji.has(shortcodeMatch[1]))
     .reverse() /* Reversing the array ensures that indices are preserved as we start replacing */
     .forEach((shortcodeMatch) => {
       const emoji = allEmoji.get(shortcodeMatch[1]);
-      console.log(shortcodeMatch);
 
       let tag;
       if (emoji.mxc) {