More external URL safety

src/components/middle/message/InlineButtons.scss

@@ -46,6 +46,15 @@
     &:last-of-type {
       margin-right: 0;
     }
+
+    i {
+      font-size: 0.75rem;
+      position: absolute;
+      right: 0.125rem;
+      top: 0.125rem;
+      display: block;
+      transform: rotate(-45deg);
+    }
   }
 
   .row:first-of-type .Button {

src/components/middle/message/InlineButtons.tsx

@@ -24,6 +24,7 @@ const InlineButtons: FC<OwnProps> = ({ message, onClick }) => {
               onClick={() => onClick({ button })}
             >
               {button.text}
+              {button.type === 'url' && <i className="icon-arrow-right" />}
             </Button>
           ))}
         </div>

src/components/middle/message/Photo.tsx

@@ -35,6 +35,7 @@ export type OwnProps = {
   size?: 'inline' | 'pictogram';
   shouldAffectAppendix?: boolean;
   dimensions?: IMediaDimensions & { isSmall?: boolean };
+  nonInteractive?: boolean;
   onClick?: (id: number) => void;
   onCancelUpload?: (message: ApiMessage) => void;
 };
@@ -51,6 +52,7 @@ const Photo: FC<OwnProps> = ({
   uploadProgress,
   size = 'inline',
   dimensions,
+  nonInteractive,
   shouldAffectAppendix,
   onClick,
   onCancelUpload,
@@ -117,7 +119,7 @@ const Photo: FC<OwnProps> = ({
 
   const className = buildClassName(
     'media-inner',
-    !isUploading && 'interactive',
+    !isUploading && !nonInteractive && 'interactive',
     isSmall && 'small-image',
     width === height && 'square-image',
   );

src/components/middle/message/WebPage.tsx

@@ -42,12 +42,8 @@ const WebPage: FC<OwnProps> = ({
   }
 
   const handleMediaClick = useCallback(() => {
-    if (webPage && (isSquarePhoto || webPage.hasDocument)) {
+    onMediaClick!();
-      window.open(webPage.url);
+  }, [onMediaClick]);
-    } else if (onMediaClick) {
-      onMediaClick();
-    }
-  }, [webPage, isSquarePhoto, onMediaClick]);
 
   if (!webPage) {
     return undefined;
@@ -62,6 +58,7 @@ const WebPage: FC<OwnProps> = ({
     photo,
   } = webPage;
 
+  const isMediaInteractive = photo && onMediaClick && !isSquarePhoto && !webPage.hasDocument;
   const truncatedDescription = trimText(description, MAX_TEXT_LENGTH);
 
   const className = buildClassName(
@@ -82,7 +79,8 @@ const WebPage: FC<OwnProps> = ({
           observeIntersection={observeIntersection}
           shouldAutoLoad={shouldAutoLoad}
           size={isSquarePhoto ? 'pictogram' : 'inline'}
-          onClick={handleMediaClick}
+          nonInteractive={!isMediaInteractive}
+          onClick={isMediaInteractive ? handleMediaClick : undefined}
           onCancelUpload={onCancelMediaTransfer}
         />
       )}

src/modules/actions/api/bots.ts

@@ -17,7 +17,7 @@ addReducer('clickInlineButton', (global, actions, payload) => {
       if (button.value.match(RE_TME_INVITE_LINK) || button.value.match(RE_TME_LINK)) {
         actions.openTelegramLink({ url: button.value });
       } else {
-        window.open(button.value);
+        actions.toggleSafeLinkModal({ url: button.value });
       }
       break;
     case 'callback': {