Add /me & /shrug commands

src/app/organisms/room/RoomViewInput.jsx

@@ -21,6 +21,7 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';
 
 import StickerBoard from '../sticker-board/StickerBoard';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
@@ -184,38 +185,17 @@ function RoomViewInput({
     };
   }, [roomId]);
 
-  const processCommand = (cmdBody) => {
+  const sendBody = async (body, msgType = 'm.text') => {
-    const spaceIndex = cmdBody.indexOf(' ');
-    const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
-    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
-    if (!commands[cmdName]) {
-      console.log('Invalid command');
-      return;
-    }
-    commands[cmdName].exe(roomId, cmdData);
-  };
-
-  const sendMessage = async () => {
-    requestAnimationFrame(() => deactivateCmdAndEmit());
-    const msgBody = textAreaRef.current.value;
-    if (msgBody.startsWith('/')) {
-      processCommand(msgBody.trim());
-
-      textAreaRef.current.value = '';
-      textAreaRef.current.style.height = 'unset';
-      return;
-    }
     if (roomsInput.isSending(roomId)) return;
-    if (msgBody.trim() === '' && attachment === null) return;
     sendIsTyping(false);
 
-    roomsInput.setMessage(roomId, msgBody);
+    roomsInput.setMessage(roomId, body);
     if (attachment !== null) {
       roomsInput.setAttachment(roomId, attachment);
     }
     textAreaRef.current.disabled = true;
     textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId);
+    await roomsInput.sendInput(roomId, msgType);
     textAreaRef.current.disabled = false;
     textAreaRef.current.style.cursor = 'unset';
     focusInput();
@@ -225,6 +205,34 @@ function RoomViewInput({
     if (replyTo !== null) setReplyTo(null);
   };
 
+  const processCommand = (cmdBody) => {
+    const spaceIndex = cmdBody.indexOf(' ');
+    const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
+    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
+    if (!commands[cmdName]) {
+      confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
+      return;
+    }
+    if (['me', 'shrug'].includes(cmdName)) {
+      commands[cmdName].exe(roomId, cmdData, (message, msgType) => sendBody(message, msgType));
+      return;
+    }
+    commands[cmdName].exe(roomId, cmdData);
+  };
+
+  const sendMessage = async () => {
+    requestAnimationFrame(() => deactivateCmdAndEmit());
+    const msgBody = textAreaRef.current.value.trim();
+    if (msgBody.startsWith('/')) {
+      processCommand(msgBody.trim());
+      textAreaRef.current.value = '';
+      textAreaRef.current.style.height = 'unset';
+      return;
+    }
+    if (msgBody === '' && attachment === null) return;
+    sendBody(msgBody, 'm.text');
+  };
+
   const handleSendSticker = async (data) => {
     roomsInput.sendSticker(roomId, data);
   };

src/app/organisms/room/commands.js

@@ -13,17 +13,18 @@ const commands = {
   me: {
     name: 'me',
     description: 'Display action',
-    exe: (roomId, data) => {
+    exe: (roomId, data, onSuccess) => {
       const body = data.trim();
-      if (body === '') return undefined;
+      if (body === '') return;
-      return body;
+      onSuccess(body, 'm.emote');
     },
   },
   shrug: {
     name: 'shrug',
     description: 'Send ¯\\_(ツ)_/¯ as message',
-    exe: (roomId, data) => (
+    exe: (roomId, data, onSuccess) => onSuccess(
-      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`
+      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
+      'm.text',
     ),
   },
   markdown: {

src/client/state/RoomsInput.js

@@ -274,7 +274,7 @@ class RoomsInput extends EventEmitter {
     return this.roomIdToInput.get(roomId)?.isSending || false;
   }
 
-  async sendInput(roomId) {
+  async sendInput(roomId, msgType) {
     const room = this.matrixClient.getRoom(roomId);
     const input = this.getInput(roomId);
     input.isSending = true;
@@ -288,7 +288,7 @@ class RoomsInput extends EventEmitter {
       const rawMessage = input.message;
       let content = {
         body: rawMessage,
-        msgtype: 'm.text',
+        msgtype: msgType ?? 'm.text',
       };
 
       // Apply formatting if relevant
@@ -459,12 +459,14 @@ class RoomsInput extends EventEmitter {
     const room = this.matrixClient.getRoom(roomId);
     const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
 
+    const msgtype = mEvent.getWireContent().msgtype ?? 'm.text';
+
     const content = {
       body: ` * ${editedBody}`,
-      msgtype: 'm.text',
+      msgtype,
       'm.new_content': {
         body: editedBody,
-        msgtype: 'm.text',
+        msgtype,
       },
       'm.relates_to': {
         event_id: mEvent.getId(),