Merge pull request #742 from redjex/unsupported-message-plate

Chat: a message the client cannot show is a plate on its sender's side, as on Android

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: morethanwords

src/components/chat/bubbleParts/unsupportedMessagePlate.ts

@@ -0,0 +1,26 @@
+import {i18n} from '@lib/langPack';
+
+const CLASS_NAME = 'bubble-unsupported';
+
+const ICON_SVG = `<svg class="${CLASS_NAME}-icon" viewBox="0 0 144 144" aria-hidden="true">
+  <path class="${CLASS_NAME}-icon-bubble" fill-rule="evenodd" d="M72.5,14C104.81,14 131,40.19 131,72.5C131,104.81 104.81,131 72.5,131C60.92,131 50.12,127.63 41.04,121.83L19.43,129.16C17.14,129.94 14.92,127.81 15.59,125.49L22.22,102.42C17,93.67 14,83.43 14,72.5C14,40.19 40.19,14 72.5,14Z"/>
+  <path class="${CLASS_NAME}-icon-plane" fill-rule="evenodd" transform="translate(33 33) scale(1.0833)" d="M6.232,35.046C22.115,28.147 32.706,23.599 38.006,21.401C53.136,15.126 56.28,14.036 58.329,14C58.78,13.992 59.788,14.104 60.441,14.632C60.992,15.078 61.143,15.68 61.216,16.103C61.289,16.526 61.379,17.489 61.307,18.241C60.487,26.831 56.939,47.675 55.134,57.295C54.371,61.366 52.867,62.731 51.411,62.865C48.247,63.155 45.844,60.78 42.78,58.777C37.985,55.643 35.276,53.692 30.621,50.634C25.242,47.1 28.729,45.157 31.795,41.983C32.597,41.152 46.537,28.51 46.807,27.363C46.841,27.22 46.872,26.685 46.554,26.403C46.235,26.12 45.765,26.217 45.426,26.294C44.945,26.402 37.284,31.451 22.444,41.438C20.27,42.927 18.3,43.652 16.536,43.614C14.591,43.572 10.849,42.518 8.067,41.616C4.655,40.51 2.448,39.938 2.684,38.06C2.807,37.082 3.99,36.077 6.232,35.046Z"/>
+</svg>`;
+
+export default function wrapUnsupportedMessagePlate(container: HTMLElement) {
+  container.classList.add(`${CLASS_NAME}-wrapper`);
+  container.insertAdjacentHTML('beforeend', ICON_SVG);
+
+  const text = document.createElement('div');
+  text.classList.add(`${CLASS_NAME}-text`);
+
+  const title = i18n('UnsupportedMessageTitle');
+  title.classList.add(`${CLASS_NAME}-title`);
+
+  const subtitle = i18n('UnsupportedMessageMessage');
+  subtitle.classList.add(`${CLASS_NAME}-subtitle`);
+
+  text.append(title, subtitle);
+
+  container.append(text);
+}

src/components/chat/bubbles.ts

@@ -148,6 +148,7 @@ import {modifyAckedPromise} from '@helpers/modifyAckedResult';
 import callbackify from '@helpers/callbackify';
 import {avatarNew, findUpAvatar} from '@components/avatarNew';
 import Icon from '@components/icon';
+import wrapUnsupportedMessagePlate from '@components/chat/bubbleParts/unsupportedMessagePlate';
 import SendingStatusIcon, {SendingStatusIconState, setSendingStatusIconState} from '@components/sendingStatusIcon';
 import wrapCallBubble from '@components/wrappers/callBubble';
 import {FullMid, makeFullMid, splitFullMid} from '@appManagers/utils/messages/fullMid';
@@ -347,18 +348,21 @@ if(IS_GROUP_CALL_SUPPORTED) {
 
 const isStoryMentionMessage = (message: Message.message) => !!(message.media as MessageMedia.messageMediaStory)?.pFlags?.via_mention;
 const isSelfDestructingMediaMessage = (message: Message.message) => !!(message.media as MessageMedia.messageMediaPhoto)?.ttl_seconds;
+const isUnsupportedMessage = (message: Message.message) => message.media?._ === 'messageMediaUnsupported';
 
 /**
  * Whether a message is drawn as a service line, neither incoming nor outgoing: a service message but a call, a
- * story mention, self-destructing media that cannot be seen
+ * story mention, self-destructing media that cannot be seen, a message this client cannot show
  */
 function isDrawnAsService(message: Message.message | Message.messageService) {
   if(message._ !== 'message') {
     const action = (message as Message.messageService).action;
     return !action || !SERVICE_AS_REGULAR.has(action._);
   }
 
-  return isStoryMentionMessage(message) || (isSelfDestructingMediaMessage(message) && !canSeeMessageMedia(message));
+  return isStoryMentionMessage(message) ||
+    (isSelfDestructingMediaMessage(message) && !canSeeMessageMedia(message)) ||
+    isUnsupportedMessage(message);
 }
 
 // Service actions whose inline photo (suggested profile photo, or a group/channel
@@ -9088,6 +9092,7 @@ export default class ChatBubbles {
 
     const isStoryMention = isMessage && isStoryMentionMessage(message);
     const isSelfDestructingMedia = isMessage && isSelfDestructingMediaMessage(message);
+    const isUnsupported = isMessage && isUnsupportedMessage(message);
     let returnService: boolean;
 
     if(
@@ -9703,6 +9708,9 @@ export default class ChatBubbles {
 
           s.append(avatarContainer, text, button);
         }
+      } else if(isUnsupported) {
+        bubble.classList.add('is-unsupported', this.chat.isOutMessage(message) ? 'is-unsupported-out' : 'is-unsupported-in');
+        wrapUnsupportedMessagePlate(s);
       } else if(isSelfDestructingMedia) {
         const promise = wrapMessageForReply({
           message,

src/components/wrappers/messageForReply.ts

@@ -265,7 +265,7 @@ export default async function wrapMessageForReply<T extends WrapMessageForReplyO
             break;
           }
 
-          addPart(UNSUPPORTED_LANG_PACK_KEY);
+          addPart('UnsupportedMessageTitle');
           break;
         }
 

src/lang.ts

@@ -493,6 +493,8 @@ const lang = {
   'Message.Context.Selection.SendNow': 'Send selected now',
   'Message.Unsupported.Desktop': '__This message is currently not supported on Telegram Web. Try [getdesktop.telegram.org](https://getdesktop.telegram.org/)__',
   'Message.Unsupported.Mobile': '__This message is currently not supported on Telegram Web. Try [telegram.org/dl](https://telegram.org/dl/)__',
+  'UnsupportedMessageTitle': 'Unsupported Message',
+  'UnsupportedMessageMessage': 'Update Telegram to view this message',
   'RichMessage.Error.TooLong': 'This rich text message is too long (%1$d of %2$d characters).',
   'RichMessage.Error.TooManyBlocks': 'This rich text message has too many blocks (%1$d of %2$d).',
   'RichMessage.Error.TooDeep': 'This rich text message is nested too deeply (%1$d of %2$d levels).',

src/scss/partials/_chat.scss

@@ -1499,7 +1499,8 @@
 
 	&.is-chat,
   &.with-message-avatars {
-  	.is-in .bubble-content-wrapper {
+  	.is-in .bubble-content-wrapper,
+  	.bubble.is-unsupported-in .bubble-content-wrapper {
      	margin-inline-start: 2.875rem;
    	}
 	}

src/scss/partials/_chatBubble.scss

@@ -2518,6 +2518,55 @@
     }
   }
 
+  &-unsupported {
+    &-wrapper {
+      display: flex !important;
+      align-items: center;
+      gap: .5rem;
+      width: 25rem;
+      max-width: 100%;
+      padding: .4375rem .6875rem .4375rem .375rem !important;
+      border-radius: 1.125rem !important;
+      text-align: start;
+    }
+
+    &-icon {
+      flex: 0 0 auto;
+      width: 3rem;
+      height: 3rem;
+
+      &-bubble {
+        fill: rgba(0, 0, 0, .11);
+      }
+
+      &-plane {
+        fill: currentColor;
+      }
+    }
+
+    &-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: .125rem;
+      text-align: start;
+    }
+
+    &-title {
+      @include text-overflow();
+      font-size: var(--font-size-14);
+      line-height: var(--line-height-14);
+      font-weight: var(--font-weight-bold);
+    }
+
+    &-subtitle {
+      font-size: var(--font-size-13);
+      line-height: var(--line-height-13);
+      opacity: .7;
+    }
+  }
+
   // Generic "media + caption + button" service bubble (e.g. suggested profile
   // photo). Centered round media, modeled on the story-mention bubble above.
   &-service-media {
@@ -3419,6 +3468,20 @@
       padding: 0 2rem;
     }
   }
+
+  &.is-unsupported {
+    .bubble-content-wrapper {
+      padding: 0;
+    }
+
+    &-in {
+      justify-content: flex-start;
+    }
+
+    &-out {
+      justify-content: flex-end;
+    }
+  }
 }
 
 .bubble.service, .bubble.has-fake-service {