Composer: Preserve suggested bot command parameters (#1417)

src/components/middle/composer/helpers/prepareForRegExp.ts

@@ -0,0 +1,12 @@
+const RE_BR = /(<br>|<br\s?\/>)/g;
+const RE_SPACE = /(&nbsp;|\u00A0)/g;
+const RE_CLEAN_HTML = /(<div>|<\/div>)/gi;
+const RE_EXTRA_NEW_LINE = /\n$/i;
+
+export function prepareForRegExp(html: string) {
+  return html
+    .replace(RE_SPACE, ' ')
+    .replace(RE_BR, '\n')
+    .replace(RE_CLEAN_HTML, '')
+    .replace(RE_EXTRA_NEW_LINE, '');
+}

src/components/middle/composer/hooks/useBotCommandTooltip.ts

@@ -4,11 +4,12 @@ import {
 
 import { ApiBotCommand } from '../../../../api/types';
 
+import { prepareForRegExp } from '../helpers/prepareForRegExp';
 import { throttle } from '../../../../util/schedulers';
 import useFlag from '../../../../hooks/useFlag';
 
 const runThrottled = throttle((cb) => cb(), 500, true);
-const RE_COMMAND = /[\w\d_-]*/i;
+const RE_COMMAND = /^[\w@]{1,32}\s?/i;
 
 export default function useBotCommandTooltip(
   isAllowed: boolean,
@@ -44,7 +45,7 @@ export default function useBotCommandTooltip(
     const shouldShowCommands = html.startsWith('/');
 
     if (shouldShowCommands) {
-      const filter = html.substr(1).match(RE_COMMAND);
+      const filter = prepareForRegExp(html.substr(1)).match(RE_COMMAND);
       getFilteredCommands(filter ? filter[0] : '');
     } else {
       unmarkIsOpen();

src/components/middle/composer/hooks/useEmojiTooltip.ts

@@ -4,6 +4,7 @@ import {
 
 import { EDITABLE_INPUT_ID } from '../../../../config';
 import { MEMO_EMPTY_ARRAY } from '../../../../util/memo';
+import { prepareForRegExp } from '../helpers/prepareForRegExp';
 import {
   EmojiData, EmojiModule, EmojiRawData, uncompressEmoji,
 } from '../../../../util/emoji';
@@ -20,9 +21,6 @@ let emojiData: EmojiData;
 let RE_EMOJI_SEARCH: RegExp;
 const EMOJIS_LIMIT = 36;
 const FILTER_MIN_LENGTH = 2;
-const RE_BR = /(<br>|<br\s?\/>)/g;
-const RE_SPACE = /&nbsp;/g;
-const RE_CLEAN_HTML = /(<div>|<\/div>)/gi;
 
 try {
   RE_EMOJI_SEARCH = new RegExp('(^|\\s):[-+_:\\p{L}\\p{N}]*$', 'gui');
@@ -188,12 +186,7 @@ export default function useEmojiTooltip(
 }
 
 function getEmojiCode(html: string) {
-  const emojis = html
+  const emojis = prepareForRegExp(html).match(RE_EMOJI_SEARCH);
-    .replace(RE_SPACE, ' ')
-    .replace(RE_BR, '\n')
-    .replace(/\n$/i, '')
-    .replace(RE_CLEAN_HTML, '')
-    .match(RE_EMOJI_SEARCH);
 
   return emojis ? emojis[0].trim() : undefined;
 }

src/components/middle/composer/hooks/useMentionTooltip.ts

@@ -6,15 +6,13 @@ import { ApiMessageEntityTypes, ApiChatMember, ApiUser } from '../../../../api/t
 import { EDITABLE_INPUT_ID } from '../../../../config';
 import { getUserFirstOrLastName } from '../../../../modules/helpers';
 import searchUserName from '../helpers/searchUserName';
+import { prepareForRegExp } from '../helpers/prepareForRegExp';
 import focusEditableElement from '../../../../util/focusEditableElement';
 import useFlag from '../../../../hooks/useFlag';
 import { unique } from '../../../../util/iteratees';
 import { throttle } from '../../../../util/schedulers';
 
 const runThrottled = throttle((cb) => cb(), 500, true);
-const RE_BR = /(<br>|<br\s?\/>)/g;
-const RE_SPACE = /&nbsp;/g;
-const RE_CLEAN_HTML = /(<div>|<\/div>)/gi;
 let RE_USERNAME_SEARCH: RegExp;
 
 try {
@@ -126,12 +124,7 @@ export default function useMentionTooltip(
 }
 
 function getUsernameFilter(html: string) {
-  const username = html
+  const username = prepareForRegExp(html).match(RE_USERNAME_SEARCH);
-    .replace(RE_SPACE, ' ')
-    .replace(RE_BR, '\n')
-    .replace(RE_CLEAN_HTML, '')
-    .replace(/\n$/i, '')
-    .match(RE_USERNAME_SEARCH);
 
   return username ? username[0].trim() : undefined;
 }

src/modules/actions/api/bots.ts

@@ -69,11 +69,17 @@ addReducer('sendBotCommand', (global, actions, payload) => {
   const { command, chatId } = payload;
   const { currentUserId } = global;
   const chat = chatId ? selectChat(global, chatId) : selectCurrentChat(global);
-  if (!currentUserId || !chat) {
+  const currentMessageList = selectCurrentMessageList(global);
+
+  if (!currentUserId || !chat || !currentMessageList) {
     return;
   }
 
-  void sendBotCommand(chat, currentUserId, command);
+  const { threadId } = currentMessageList;
+  actions.setReplyingToId({ messageId: undefined });
+  actions.clearWebPagePreview({ chatId: chat.id, threadId, value: false });
+
+  void sendBotCommand(chat, currentUserId, command, selectReplyingToId(global, chat.id, threadId));
 });
 
 addReducer('restartBot', (global, actions, payload) => {
@@ -298,10 +304,11 @@ async function searchInlineBot({
   setGlobal(global);
 }
 
-async function sendBotCommand(chat: ApiChat, currentUserId: number, command: string) {
+async function sendBotCommand(chat: ApiChat, currentUserId: number, command: string, replyingTo?: number) {
   await callApi('sendMessage', {
     chat,
     text: command,
+    replyingTo,
   });
 }