Various fixes (#4955)

src/components/common/DeleteMessageModal.tsx

@@ -25,10 +25,11 @@ import {
   selectAllowedMessageActionsSlow,
   selectBot,
   selectChat, selectChatFullInfo, selectCurrentMessageIds,
-  selectCurrentMessageList, selectSenderFromMessage, selectTabState,
+  selectCurrentMessageList, selectSender, selectSenderFromMessage, selectTabState,
   selectUser,
 } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
+import { MEMO_EMPTY_ARRAY } from '../../util/memo';
 import renderText from './helpers/renderText';
 
 import useLastCallback from '../../hooks/useLastCallback';
@@ -182,8 +183,9 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
   });
 
   const filterMessageIdByUserId = useLastCallback((userIds: string[], selectedMessageIdList: number[]) => {
+    if (!chat) return MEMO_EMPTY_ARRAY;
     return selectedMessageIdList.filter((msgId) => {
-      const senderPeer = selectSenderFromMessage(getGlobal(), chat, msgId);
+      const senderPeer = selectSenderFromMessage(getGlobal(), chat.id, msgId);
       return senderPeer && userIds.includes(senderPeer.id);
     });
   });
@@ -220,6 +222,8 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
   });
 
   const handleDeleteMessageForSelf = useLastCallback(() => {
+    if (!chat) return;
+
     onConfirm?.();
     const messageIds = album?.messages
       ? album.messages.map(({ id }) => id)
@@ -241,7 +245,7 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
 
       if (chosenBanOption && !havePermissionChanged && message) {
         const filteredUserIdList = chosenBanOption.filter((userId) => messageIds?.some((msgId) => {
-          const senderPeer = selectSenderFromMessage(getGlobal(), chat, msgId);
+          const senderPeer = selectSenderFromMessage(getGlobal(), chat.id, msgId);
           return senderPeer && senderPeer.id === userId;
         }));
         handleDeleteMember(filteredUserIdList);
@@ -253,7 +257,7 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
 
       if (chosenBanOption && havePermissionChanged) {
         const filteredUserIdList = chosenBanOption.filter((userId) => messageIds?.some((msgId) => {
-          const senderPeer = selectSenderFromMessage(getGlobal(), chat, msgId);
+          const senderPeer = selectSenderFromMessage(getGlobal(), chat.id, msgId);
           return senderPeer && senderPeer.id === userId;
         }));
         handleUpdateChatMemberBannedRights(filteredUserIdList);
@@ -439,8 +443,7 @@ export default memo(withGlobal<OwnProps>(
     const messageIdList = chat && selectCurrentMessageIds(global, chat.id, threadId!, type!);
     const isGroup = Boolean(chat) && isChatBasicGroup(chat);
     const isSuperGroup = Boolean(chat) && isChatSuperGroup(chat);
-    const sender = deleteMessageModal && chat && deleteMessageModal.message
+    const sender = deleteMessageModal?.message && selectSender(global, deleteMessageModal.message);
-      && selectSenderFromMessage(global, chat, deleteMessageModal.message.id);
     const contactName = chat && isUserId(chat.id)
       ? getUserFirstOrLastName(selectUser(global, getPrivateChatUserId(chat)!))
       : undefined;

src/components/main/premium/PremiumGiftModal.module.scss

@@ -7,7 +7,7 @@
 }
 
 .root {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .root :global(.modal-content) {

src/components/main/premium/StarsGiftModal.module.scss

@@ -5,7 +5,7 @@
 }
 
 .root {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .root :global(.modal-content) {

src/components/main/premium/StarsGiftingPickerModal.module.scss

@@ -1,5 +1,5 @@
 .root {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .root :global(.modal-content) {

src/components/mediaViewer/MediaViewer.tsx

@@ -119,7 +119,7 @@ const MediaViewer = ({
 
   /* Animation */
   const animationKey = useRef<number>();
-  const senderId = message?.senderId || avatarOwner?.id;
+  const senderId = message?.senderId || avatarOwner?.id || message?.chatId;
   const prevSenderId = usePreviousDeprecated<string | undefined>(senderId);
   const headerAnimation = withAnimation ? 'slideFade' : 'none';
   const isGhostAnimation = Boolean(withAnimation && !shouldSkipHistoryAnimations);

src/components/middle/DeleteSelectedMessageModal.tsx

@@ -32,6 +32,7 @@ import {
 } from '../../global/selectors';
 import buildClassName from '../../util/buildClassName';
 import { buildCollectionByCallback } from '../../util/iteratees';
+import { MEMO_EMPTY_ARRAY } from '../../util/memo';
 import renderText from '../common/helpers/renderText';
 
 import useLang from '../../hooks/useLang';
@@ -219,8 +220,9 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
   });
 
   const filterMessageIdByUserId = useLastCallback((userIds: string[], selectedMessageIdList: number[]) => {
+    if (!chat) return MEMO_EMPTY_ARRAY;
     return selectedMessageIdList.filter((msgId) => {
-      const sender = selectSenderFromMessage(getGlobal(), chat, msgId);
+      const sender = selectSenderFromMessage(getGlobal(), chat.id, msgId);
       return sender && userIds.includes(sender.id);
     });
   });
@@ -248,13 +250,15 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
   });
 
   const handleDeleteMessageForSelf = useLastCallback(() => {
+    if (!chat) return;
+
     if (isSchedule) {
       deleteScheduledMessages({ messageIds: selectedMessageIds! });
     } else if (!isSenderOwner && shouldShowOptions) {
       if (chosenSpanOption) {
         const userIdList = chosenSpanOption.filter((option) => !Number.isNaN(Number(option)));
         const filteredMessageIdList = filterMessageIdByUserId(userIdList, selectedMessageIds!);
-        if (filteredMessageIdList && filteredMessageIdList.length) {
+        if (filteredMessageIdList?.length) {
           reportMessages({ messageIds: filteredMessageIdList, reason: 'spam', description: '' });
         }
       }
@@ -268,7 +272,7 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
       if (chosenBanOption && !havePermissionChanged) {
         const userIdList = chosenBanOption.filter((option) => !Number.isNaN(Number(option)));
         const filteredUserIdList = userIdList.filter((userId) => selectedMessageIds?.some((msgId) => {
-          const sender = selectSenderFromMessage(getGlobal(), chat, msgId);
+          const sender = selectSenderFromMessage(getGlobal(), chat.id, msgId);
           return sender && sender.id === userId;
         }));
         handleDeleteMember(filteredUserIdList);
@@ -279,7 +283,7 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
       if (chosenBanOption && havePermissionChanged) {
         const userIdList = chosenBanOption.filter((option) => !Number.isNaN(Number(option)));
         const filteredUserIdList = userIdList.filter((userId) => selectedMessageIds?.some((msgId) => {
-          const sender = selectSenderFromMessage(getGlobal(), chat, msgId);
+          const sender = selectSenderFromMessage(getGlobal(), chat.id, msgId);
           return sender && sender.id === userId;
         }));
         handleUpdateChatMemberBannedRights(filteredUserIdList);

src/components/middle/HeaderPinnedMessage.tsx

@@ -77,7 +77,7 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
 
   const handleInlineButtonClick = useLastCallback(() => {
     if (inlineButton) {
-      clickBotInlineButton({ messageId: message.id, button: inlineButton });
+      clickBotInlineButton({ chatId: message.chatId, messageId: message.id, button: inlineButton });
     }
   });
 

src/components/middle/composer/BotKeyboardMenu.tsx

@@ -70,7 +70,7 @@ const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
                 ripple
                 disabled={button.type === 'unsupported'}
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick={() => clickBotInlineButton({ messageId: message.id, button })}
+                onClick={() => clickBotInlineButton({ chatId: message.chatId, messageId: message.id, button })}
               >
                 {buttonTexts?.[i][j]}
               </Button>

src/components/middle/message/Game.tsx

@@ -39,6 +39,7 @@ const Game: FC<OwnProps> = ({
 
   const handleGameClick = () => {
     clickBotInlineButton({
+      chatId: message.chatId,
       messageId: message.id,
       button: message.inlineButtons![0][0],
     });

src/components/middle/message/InlineButtons.tsx

@@ -2,6 +2,7 @@ import type { FC, TeactNode } from '../../../lib/teact/teact';
 import React, { memo, useMemo } from '../../../lib/teact/teact';
 
 import type { ApiKeyboardButton, ApiMessage } from '../../../api/types';
+import type { ActionPayloads } from '../../../global/types';
 
 import { RE_TME_LINK } from '../../../config';
 import renderKeyboardButtonText from '../composer/helpers/renderKeyboardButtonText';
@@ -15,7 +16,7 @@ import './InlineButtons.scss';
 
 type OwnProps = {
   message: ApiMessage;
-  onClick: ({ messageId, button }: { messageId: number; button: ApiKeyboardButton }) => void;
+  onClick: (payload: ActionPayloads['clickBotInlineButton']) => void;
 };
 
 const InlineButtons: FC<OwnProps> = ({ message, onClick }) => {
@@ -62,7 +63,7 @@ const InlineButtons: FC<OwnProps> = ({ message, onClick }) => {
               ripple
               disabled={button.type === 'unsupported'}
               // eslint-disable-next-line react/jsx-no-bind
-              onClick={() => onClick({ messageId: message.id, button })}
+              onClick={() => onClick({ chatId: message.chatId, messageId: message.id, button })}
             >
               <span className="inline-button-text">
                 {buttonTexts[i][j]}

src/components/modals/ModalContainer.tsx

@@ -52,6 +52,7 @@ type Entries<T> = {
 }[keyof T][];
 
 const MODALS: ModalRegistry = {
+  webApp: WebAppModal,
   giftCodeModal: GiftCodeModal,
   boostModal: BoostModal,
   chatlistModal: ChatlistModal,
@@ -60,7 +61,6 @@ const MODALS: ModalRegistry = {
   inviteViaLinkModal: InviteViaLinkModal,
   requestedAttachBotInstall: AttachBotInstallModal,
   reportAdModal: ReportAdModal,
-  webApp: WebAppModal,
   collectibleInfoModal: CollectibleInfoModal,
   mapModal: MapModal,
   isStarPaymentModalOpen: StarsPaymentModal,

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -1,7 +1,7 @@
 @use '../../../styles/mixins';
 
 .root {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .root :global(.modal-content) {

src/components/modals/stars/transaction/StarsTransactionModal.module.scss

@@ -1,5 +1,5 @@
 .modal {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .modal :global(.modal-dialog) {

src/components/modals/webApp/WebAppModal.tsx

@@ -595,6 +595,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
     <Modal
       className={styles.root}
       isOpen={isOpen}
+      isLowStackPriority
       onClose={handleClose}
       header={renderHeader()}
       style={`background-color: ${backgroundColor}`}

src/components/payment/ReceiptModal.module.scss

@@ -1,5 +1,5 @@
 .modal {
-  z-index: calc(var(--z-media-viewer) - 1);
+  z-index: calc(var(--z-modal-low-priority) + 1);
 }
 
 .positive {

src/components/ui/Modal.scss

@@ -7,6 +7,10 @@
     z-index: var(--z-modal-confirm);
   }
 
+  &.low-priority {
+    z-index: var(--z-modal-low-priority);
+  }
+
   &.delete,
   &.error,
   &.confirm,

src/components/ui/Modal.tsx

@@ -39,6 +39,7 @@ export type OwnProps = {
   children: React.ReactNode;
   style?: string;
   dialogRef?: React.RefObject<HTMLDivElement>;
+  isLowStackPriority?: boolean;
   onClose: () => void;
   onCloseAnimationEnd?: () => void;
   onEnter?: () => void;
@@ -59,6 +60,7 @@ const Modal: FC<OwnProps> = ({
   noBackdropClose,
   children,
   style,
+  isLowStackPriority,
   onClose,
   onCloseAnimationEnd,
   onEnter,
@@ -153,6 +155,7 @@ const Modal: FC<OwnProps> = ({
     className,
     noBackdrop && 'transparent-backdrop',
     isSlim && 'slim',
+    isLowStackPriority && 'low-priority',
   );
 
   return (

src/global/actions/api/bots.ts

@@ -37,6 +37,7 @@ import {
   selectMessageReplyInfo,
   selectPeer,
   selectSendAs,
+  selectSender,
   selectTabState,
   selectUser,
   selectUserFullInfo,
@@ -49,7 +50,14 @@ const runDebouncedForSearch = debounce((cb) => cb(), 500, false);
 let botFatherId: string | null;
 
 addActionHandler('clickBotInlineButton', (global, actions, payload): ActionReturnType => {
-  const { messageId, button, tabId = getCurrentTabId() } = payload;
+  const {
+    chatId, messageId, button, tabId = getCurrentTabId(),
+  } = payload;
+  const chat = selectChat(global, chatId);
+  const message = selectChatMessage(global, chatId, messageId);
+  if (!chat || !message) {
+    return;
+  }
 
   switch (button.type) {
     case 'command':
@@ -61,11 +69,6 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
       break;
     }
     case 'callback': {
-      const chat = selectCurrentChat(global, tabId);
-      if (!chat) {
-        return;
-      }
-
       void answerCallbackButton(global, actions, chat, messageId, button.data, undefined, tabId);
       break;
     }
@@ -89,10 +92,6 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
       break;
     }
     case 'receipt': {
-      const chat = selectCurrentChat(global, tabId);
-      if (!chat) {
-        return;
-      }
       const { receiptMessageId } = button;
       actions.getReceipt({
         chatId: chat.id, messageId: receiptMessageId, tabId,
@@ -100,10 +99,6 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
       break;
     }
     case 'buy': {
-      const chat = selectCurrentChat(global, tabId);
-      if (!chat) {
-        return;
-      }
       actions.openInvoice({
         type: 'message',
         chatId: chat.id,
@@ -113,11 +108,6 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
       break;
     }
     case 'game': {
-      const chat = selectCurrentChat(global, tabId);
-      if (!chat) {
-        return;
-      }
-
       void answerCallbackButton(global, actions, chat, messageId, undefined, true, tabId);
       break;
     }
@@ -137,30 +127,22 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
 
     case 'simpleWebView': {
       const { url } = button;
-      const { chatId } = selectCurrentMessageList(global, tabId) || {};
+      const sender = selectSender(global, message);
-      if (!chatId) {
+      if (!sender) {
         return;
       }
-      const message = selectChatMessage(global, chatId, messageId);
+
-      if (!message?.senderId) return;
       const theme = extractCurrentThemeParams();
       actions.requestSimpleWebView({
-        url, botId: message?.senderId, theme, buttonText: button.text, tabId,
+        url, botId: sender.id, theme, buttonText: button.text, tabId,
       });
       break;
     }
 
     case 'webView': {
       const { url } = button;
-      const chat = selectCurrentChat(global, tabId);
+      const sender = selectSender(global, message);
-      if (!chat) {
+      const botId = message.viaBotId || sender?.id;
-        return;
-      }
-      const message = selectChatMessage(global, chat.id, messageId);
-      if (!message) {
-        return;
-      }
-      const botId = message.viaBotId || message.senderId;
       if (!botId) {
         return;
       }
@@ -177,10 +159,6 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
     }
     case 'urlAuth': {
       const { url } = button;
-      const chat = selectCurrentChat(global, tabId);
-      if (!chat) {
-        return;
-      }
       actions.requestBotUrlAuth({
         chatId: chat.id,
         messageId,
@@ -355,7 +333,8 @@ addActionHandler('switchBotInline', (global, actions, payload): ActionReturnType
     if (!message) {
       return undefined;
     }
-    botId = message.viaBotId || message.senderId;
+    const sender = selectSender(global, message);
+    botId = message.viaBotId || sender?.id;
   }
 
   if (!botId) {

src/global/actions/ui/misc.ts

@@ -31,6 +31,7 @@ import {
   selectCurrentMessageList,
   selectIsCurrentUserPremium,
   selectIsTrustedBot,
+  selectSender,
   selectTabState,
 } from '../../selectors';
 
@@ -433,7 +434,7 @@ addActionHandler('openGame', (global, actions, payload): ActionReturnType => {
   const message = selectChatMessage(global, chatId, messageId);
   if (!message) return;
 
-  const botId = message.viaBotId || message.senderId;
+  const botId = message.viaBotId || selectSender(global, message)?.id;
   if (!botId) return;
 
   if (!selectIsTrustedBot(global, botId)) {

src/global/helpers/payments.ts

@@ -200,7 +200,7 @@ export function getStarsTransactionFromGift(message: ApiMessage): ApiStarsTransa
     stars: stars!,
     peer: {
       type: 'peer',
-      id: message.isOutgoing ? message.chatId : message.senderId!,
+      id: message.isOutgoing ? message.chatId : (message.senderId || message.chatId),
     },
     date: message.date,
     isGift: true,

src/global/selectors/messages.ts

@@ -432,28 +432,18 @@ export function getSendersFromSelectedMessages<T extends GlobalState>(
 
   return selectedMessageIds.map((id) => {
     const message = selectChatMessage(global, chat.id, id);
-    if (!message?.senderId) {
+    return message && selectSender(global, message);
-      return undefined;
-    }
-    return selectSender(global, message);
   });
 }
 
 export function selectSenderFromMessage<T extends GlobalState>(
   global: T,
-  chat: ApiChat | undefined,
+  chatId: string,
-  selectedMessageId: number | undefined,
+  messageId: number,
 ): ApiPeer | undefined {
-  if (!chat?.id || !selectedMessageId) {
+  const message = selectChatMessage(global, chatId, messageId);
-    return undefined;
-  }
 
-  const message = selectChatMessage(global, chat.id, selectedMessageId);
+  return message && selectSender(global, message);
-  if (!message?.senderId) {
-    return undefined;
-  }
-
-  return selectPeer(global, message.senderId);
 }
 
 export function selectSenderFromHeader<T extends GlobalState>(

src/global/types.ts

@@ -2847,6 +2847,7 @@ export interface ActionPayloads {
   };
 
   clickBotInlineButton: {
+    chatId: string;
     messageId: number;
     button: ApiKeyboardButton;
   } & WithTabId;

src/styles/_variables.scss

@@ -248,6 +248,7 @@ $color-message-story-mention-to: #74bcff;
   --z-modal: 1510;
   --z-modal-menu: 1600;
   --z-media-viewer: 1500;
+  --z-modal-low-priority: 1400;
   --z-video-player-controls: 3;
   --z-drop-area: 55;
   --z-animation-fade: 50;