Message Meta: Show info about imported message (#2167)

src/api/gramjs/apiBuilders/messages.ts

@@ -392,6 +392,7 @@ function buildApiMessageForwardInfo(fwdFrom: GramJs.MessageFwdHeader, isChatWith
 
   return {
     date: fwdFrom.date,
+    isImported: fwdFrom.imported,
     isChannelPost: Boolean(fwdFrom.channelPost),
     channelPostId: fwdFrom.channelPost,
     isLinkedChannelPost: Boolean(fwdFrom.channelPost && savedFromPeerId && !isChatWithSelf),

src/api/types/messages.ts

@@ -286,6 +286,7 @@ export interface ApiWebPage {
 
 export interface ApiMessageForwardInfo {
   date: number;
+  isImported?: boolean;
   isChannelPost: boolean;
   channelPostId?: number;
   isLinkedChannelPost?: boolean;

src/components/middle/message/MessageMeta.scss

@@ -20,6 +20,7 @@
   }
 
   .message-time,
+  .message-imported,
   .message-signature,
   .message-views {
     font-size: 0.75rem;
@@ -40,6 +41,7 @@
     margin-inline-start: 0.1875rem;
   }
 
+  .message-imported,
   .message-signature {
     overflow: hidden;
     text-overflow: ellipsis;

src/components/middle/message/MessageMeta.tsx

@@ -1,5 +1,6 @@
 import type { FC } from '../../../lib/teact/teact';
 import React, { memo, useMemo } from '../../../lib/teact/teact';
+import { getActions } from '../../../global';
 
 import type { ApiAvailableReaction, ApiMessage, ApiMessageOutgoingStatus } from '../../../api/types';
 import type { ActiveReaction } from '../../../global/types';
@@ -34,10 +35,18 @@ const MessageMeta: FC<OwnProps> = ({
   activeReaction, withReactionOffset, availableReactions,
   reactionMessage,
 }) => {
+  const { showNotification } = getActions();
   const lang = useLang();
   const [isActivated, markActivated] = useFlag();
 
   const reactions = withReactions && reactionMessage?.reactions?.results.filter((l) => l.count > 0);
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    showNotification({
+      message: lang('ImportedInfo'),
+    });
+  };
 
   const title = useMemo(() => {
     if (!isActivated) return undefined;
@@ -58,9 +67,15 @@ const MessageMeta: FC<OwnProps> = ({
     return text;
   }, [isActivated, lang, message]);
 
+  const fullClassName = buildClassName(
+    'MessageMeta',
+    withReactionOffset && 'reactions-offset',
+    message.forwardInfo?.isImported && 'is-imported',
+  );
+
   return (
     <span
-      className={buildClassName('MessageMeta', withReactionOffset && 'reactions-offset')}
+      className={fullClassName}
       dir={lang.isRtl ? 'rtl' : 'ltr'}
       onClick={onClick}
       data-ignore-on-paste
@@ -85,6 +100,14 @@ const MessageMeta: FC<OwnProps> = ({
         <span className="message-signature">{renderText(signature)}</span>
       )}
       <span className="message-time" title={title} onMouseEnter={markActivated}>
+        {message.forwardInfo?.isImported && (
+          <>
+            <span className="message-imported" onClick={handleClick}>
+              {formatDateTimeToString(message.forwardInfo.date * 1000, lang.code, true)}
+            </span>
+            <span className="message-imported" onClick={handleClick}>{lang('ImportedMessage')}</span>
+          </>
+        )}
         {message.isEdited && `${lang('EditedMessage')} `}
         {formatTime(lang, message.date * 1000)}
       </span>

src/components/middle/message/_message-content.scss

@@ -171,7 +171,7 @@
     bottom: -0.5rem !important;
     margin-top: -0.25rem;
 
-    &:not([dir="rtl"]) {
+    &:not([dir="rtl"]):not(.is-imported) {
       margin-top: -1.25rem;
     }
   }

src/util/dateFormat.ts

@@ -290,7 +290,7 @@ export function formatDateToString(
   return formatDayToStringWithCache(dayStartAt, locale, noYear, monthFormat, noDay);
 }
 
-export function formatDateTimeToString(datetime: Date | number, locale = 'en-US') {
+export function formatDateTimeToString(datetime: Date | number, locale = 'en-US', noSeconds?: boolean) {
   const date = typeof datetime === 'number' ? new Date(datetime) : datetime;
   return date.toLocaleString(
     locale,
@@ -300,7 +300,7 @@ export function formatDateTimeToString(datetime: Date | number, locale = 'en-US'
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
-      second: 'numeric',
+      second: noSeconds ? undefined : 'numeric',
     },
   );
 }