Chat: an unsupported message's plate keeps what a message has — its side, a post's buttons, selection, reading

The plate came in drawn on the service path, which returns before everything the chat does for a message, so
it lost that piece by piece: an outgoing one could hold the unread delimiter, a report's choice and a swipe to
reply passed it by, a channel post lost its share and comments buttons, its views and its reading, a forward on
its way could be selected, a protected channel's post kept a share button, an ad anchored after it was dropped.

- It is drawn on the regular path now, as the content of a bubble with no background of its own, the way a
  sticker stands (`just-media`), so all of that comes with it by construction. What it shows stays Android's
  plate alone: no time (`noMessageInfo`, as a call has), no name, no forward header, no quote; a saved copy
  keeps its button to where it was saved from.
- A post's comments stand beside the plate, as beside a sticker; a broadcast post with no time to be read by
  is watched itself.
- A rich message whose media this client cannot show keeps its rich content, as before.
- The plate gives way to a column narrower than it instead of running past its edge.

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

Author: morethanwords

src/components/chat/bubbleParts/unsupportedMessagePlate.ts

@@ -7,8 +7,10 @@ const ICON_SVG = `<svg class="${CLASS_NAME}-icon" viewBox="0 0 144 144" aria-hid
   <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`);
+/** The plate a message this client cannot show is drawn as, the way Android draws it (`UnsupportedBlockDrawable`) */
+export default function wrapUnsupportedMessagePlate() {
+  const container = document.createElement('div');
+  container.classList.add(CLASS_NAME);
   container.insertAdjacentHTML('beforeend', ICON_SVG);
 
   const text = document.createElement('div');
@@ -23,4 +25,5 @@ export default function wrapUnsupportedMessagePlate(container: HTMLElement) {
   text.append(title, subtitle);
 
   container.append(text);
+  return container;
 }

src/components/chat/bubbles.ts

@@ -148,9 +148,9 @@ 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 wrapUnsupportedMessagePlate from '@components/chat/bubbleParts/unsupportedMessagePlate';
 import {FullMid, makeFullMid, splitFullMid} from '@appManagers/utils/messages/fullMid';
 import apiManagerProxy from '@lib/apiManagerProxy';
 import setBlankToAnchor from '@lib/richTextProcessor/setBlankToAnchor';
@@ -348,21 +348,20 @@ 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';
+// * a rich message keeps its content when its media is one this client cannot show
+const isUnsupportedMessage = (message: Message.message) => message.media?._ === 'messageMediaUnsupported' && !message.rich_message;
 
 /**
  * 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, a message this client cannot show
+ * story mention, self-destructing media that cannot be seen
  */
 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)) ||
-    isUnsupportedMessage(message);
+  return isStoryMentionMessage(message) || (isSelfDestructingMediaMessage(message) && !canSeeMessageMedia(message));
 }
 
 // Service actions whose inline photo (suggested profile photo, or a group/channel
@@ -9092,7 +9091,6 @@ export default class ChatBubbles {
 
     const isStoryMention = isMessage && isStoryMentionMessage(message);
     const isSelfDestructingMedia = isMessage && isSelfDestructingMediaMessage(message);
-    const isUnsupported = isMessage && isUnsupportedMessage(message);
     let returnService: boolean;
 
     if(
@@ -9708,9 +9706,6 @@ 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,
@@ -10145,9 +10140,13 @@ export default class ChatBubbles {
     // message-info block at all, rather than one parked in a corner.
     // A welcome template is sent whenever someone joins, so its own date means nothing (Android
     // draws no time there either).
+    // A message this client cannot show is a plate and nothing else, as Android draws it: no time,
+    // no name, no forward header, no quote.
+    const isUnsupported = isMessage && isUnsupportedMessage(message);
     const noMessageInfo = isSponsored ||
       context.messageMedia?._ === 'messageMediaCall' ||
-      this.chat.type === ChatType.Welcome;
+      this.chat.type === ChatType.Welcome ||
+      isUnsupported;
 
     let timeSpan: HTMLElement, _clearfix: HTMLElement;
     if(!noMessageInfo) {
@@ -10174,6 +10173,9 @@ export default class ChatBubbles {
       }
     } else if(isSponsored) {
       bubble.classList.add('is-sponsored');
+    } else if(isBroadcast) {
+      // * a post with no time to be read by is read by itself
+      setUnreadObserver?.();
     }
 
     bubbleContainer.prepend(messageDiv);
@@ -11722,8 +11724,19 @@ export default class ChatBubbles {
           }
 
           context.attachmentDiv = undefined;
-          context.mediaRequiresMessageDiv = true;
           noAttachmentDivNeeded = true;
+
+          // * a plate on the message's side with no bubble around it, as a sticker stands, and with all a message has
+          // * the way a sticker has it: the buttons beside a post, its side, a selection, a swipe to reply
+          if(isUnsupported) {
+            bubble.classList.add('is-unsupported');
+            context.isStandaloneMedia = true;
+            context.canHaveTail = false;
+            messageDiv.before(wrapUnsupportedMessagePlate());
+            break;
+          }
+
+          context.mediaRequiresMessageDiv = true;
           messageDiv.replaceChildren(i18n(UNSUPPORTED_LANG_PACK_KEY));
           bubble.timeAppenders[0].callback();
           this.log.warn('unrecognized media type:', context.messageMedia._, message);
@@ -11827,7 +11840,11 @@ export default class ChatBubbles {
       (showNameForVerificationCodes && !replyTo);
 
     let nameDiv: HTMLElement;
-    if(needName || fwdFrom || replyTo) { // chat
+    if(isUnsupported) {
+      bubble.classList.add('hide-name');
+      // * the plate is all it shows, but a saved copy still leads to where it was saved from
+      savedFrom = (message as Message.message).savedFrom || savedFrom;
+    } else if(needName || fwdFrom || replyTo) { // chat
       let title: HTMLElement;
       let titleVia: typeof title;
       let noColor: boolean;
@@ -12419,7 +12436,13 @@ export default class ChatBubbles {
     });
     reactionsElement.render(changedResults, waitPromise);
 
-    if(bubble.classList.contains('has-floating-time') || bubble.classList.contains('service')) {
+    // * a bubble with no text to hold them (its time floats over its media, or it is the plate of a message this client
+    // * cannot show, which has no time at all) and a service line take them under their content
+    if(
+      bubble.classList.contains('has-floating-time') ||
+      bubble.classList.contains('service') ||
+      bubble.classList.contains('is-unsupported')
+    ) {
       bubble.querySelector('.bubble-content-wrapper').append(reactionsElement);
     } else {
       const timeSpan = bubble.timeSpan;

src/components/chat/messageRender.ts

@@ -435,7 +435,8 @@ export namespace MessageRender {
   }) => {
     const isFooter = !bubble.classList.contains('sticker') &&
       !bubble.classList.contains('emoji-big') &&
-      !bubble.classList.contains('round');
+      !bubble.classList.contains('round') &&
+      !bubble.classList.contains('is-unsupported');
     const repliesFooter = RepliesElement.create();
     repliesFooter.message = message;
     repliesFooter.type = isFooter ? 'footer' : 'beside';

src/scripts/out/langPack.strings

@@ -477,6 +477,8 @@
 "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,8 +1499,7 @@
 
 	&.is-chat,
   &.with-message-avatars {
-  	.is-in .bubble-content-wrapper,
-  	.bubble.is-unsupported-in .bubble-content-wrapper {
+  	.is-in .bubble-content-wrapper {
      	margin-inline-start: 2.875rem;
    	}
 	}

src/scss/partials/_chatBubble.scss

@@ -2518,17 +2518,19 @@
     }
   }
 
+  // * the plate of a message this client cannot show, drawn as Android draws it (`UnsupportedBlockDrawable`): on the
+  // * wallpaper in the service lines' colours, in a bubble with no background of its own (`.just-media`)
   &-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;
-    }
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    width: 25rem;
+    max-width: 100%;
+    padding: .4375rem .6875rem .4375rem .375rem;
+    border-radius: 1.125rem;
+    background-color: var(--message-highlighting-color);
+    color: #fff;
+    user-select: none;
 
     &-icon {
       flex: 0 0 auto;
@@ -2550,7 +2552,6 @@
       display: flex;
       flex-direction: column;
       gap: .125rem;
-      text-align: start;
     }
 
     &-title {
@@ -2567,6 +2568,11 @@
     }
   }
 
+  // * its width gives way to a column narrower than it, with an avatars' margin beside it too, as text would wrap
+  &.is-unsupported .bubble-content-wrapper {
+    min-width: 0;
+  }
+
   // Generic "media + caption + button" service bubble (e.g. suggested profile
   // photo). Centered round media, modeled on the story-mention bubble above.
   &-service-media {
@@ -3468,20 +3474,6 @@
       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 {