session-desktop/ts/components/conversation/message/message-item/DataExtractionNotification.tsx

import { ExpirableReadableMessage } from './ExpirableReadableMessage';
import { NotificationBubble } from './notification-bubble/NotificationBubble';
import { Localizer } from '../../../basic/Localizer';
import { useMessageAuthor, useMessageDataExtractionType } from '../../../../state/selectors';
import { useNicknameOrProfileNameOrShortenedPubkey } from '../../../../hooks/useParamSelector';
import type { WithMessageId } from '../../../../session/types/with';
import { SignalService } from '../../../../protobuf';

export const DataExtractionNotification = (props: WithMessageId) => {
  const { messageId } = props;
  const author = useMessageAuthor(messageId);
  const authorName = useNicknameOrProfileNameOrShortenedPubkey(author);

  const dataExtractionType = useMessageDataExtractionType(messageId);

  if (!author || !dataExtractionType) {
    return null;
  }

  return (
    <ExpirableReadableMessage
      messageId={messageId}
      dataTestId="data-extraction-notification"
      key={`readable-message-${messageId}`}
      isControlMessage={true}
    >
      <NotificationBubble iconType="save">
        <Localizer
          token={
            dataExtractionType === SignalService.DataExtractionNotification.Type.MEDIA_SAVED
              ? 'attachmentsMediaSaved'
              : 'screenshotTaken'
          }
          args={{ name: authorName }}
        />
      </NotificationBubble>
    </ExpirableReadableMessage>
  );
};