Add "Copy as plain text" feature for chat messages, including translations and clipboard functionality

Author: MartinBraquet

common/messages/de.json

@@ -589,6 +589,7 @@
   "messages.cannot_message_deleted": "Sie können ihnen keine Nachricht senden, da sie ihr Konto gelöscht haben.",
   "messages.cannot_message_banned": "Sie können ihnen keine Nachricht senden, da sie gesperrt wurden.",
   "messages.cannot_message_you_banned": "Sie können ihnen keine Nachricht senden, da Sie gesperrt wurden.",
+  "messages.copy.me_suffix": "(ich)",
   "messages.create": "Erstellen",
   "messages.delete_confirm": "Sind Sie sicher, dass Sie diese Nachricht löschen möchten?",
   "messages.delete_failed": "Löschen der Nachricht fehlgeschlagen",
@@ -597,6 +598,7 @@
   "messages.edited": "bearbeitet",
   "messages.empty": "Sie haben noch keine Nachrichten.",
   "messages.input_placeholder": "Nachricht senden",
+  "messages.menu.copy_plain_text": "Als Klartext kopieren",
   "messages.menu.leave_chat": "Unterhaltung verlassen",
   "messages.menu.mute_1_day": "Benachrichtigungen für 1 Tag stummschalten",
   "messages.menu.mute_forever": "Benachrichtigungen dauerhaft stummschalten",
@@ -606,6 +608,8 @@
   "messages.no_access": "Sie haben keinen Zugriff auf diese Konversation",
   "messages.seo.description": "Ihre Nachrichten",
   "messages.title": "Nachrichten",
+  "messages.toast.copy_empty": "Keine Nachrichten zum Kopieren",
+  "messages.toast.copy_success": "Unterhaltung kopiert",
   "messages.toast.edit_failed": "Bearbeiten der Nachricht fehlgeschlagen.",
   "messages.toast.muting_1_day.error": "Stummschaltung der Benachrichtigungen fehlgeschlagen",
   "messages.toast.muting_1_day.loading": "Benachrichtigungen für 1 Tag stummschalten...",

common/messages/fr.json

@@ -589,6 +589,7 @@
   "messages.cannot_message_deleted": "Vous ne pouvez pas leur envoyer de message car ils ont supprimé leur compte.",
   "messages.cannot_message_banned": "Ce profil a été supprimé en raison d'une activité suspecte; n'envoyez jamais d'argent à une personne que vous n'avez jamais rencontrée.",
   "messages.cannot_message_you_banned": "Vous ne pouvez pas leur envoyer de message car vous avez été banni.",
+  "messages.copy.me_suffix": "(moi)",
   "messages.create": "Créer",
   "messages.delete_confirm": "Êtes-vous sûr de vouloir supprimer ce message ?",
   "messages.delete_failed": "Échec de la suppression du message",
@@ -597,6 +598,7 @@
   "messages.edited": "modifié",
   "messages.empty": "Vous n'avez pas encore de messages.",
   "messages.input_placeholder": "Envoyer un message",
+  "messages.menu.copy_plain_text": "Copier en texte brut",
   "messages.menu.leave_chat": "Quitter la conversation",
   "messages.menu.mute_1_day": "Couper notifs pendant 1 jour",
   "messages.menu.mute_forever": "Couper notifs définitivement",
@@ -606,6 +608,8 @@
   "messages.no_access": "Vous n'avez pas accès à cette conversation.",
   "messages.seo.description": "Vos messages",
   "messages.title": "Messages",
+  "messages.toast.copy_empty": "Aucun message à copier",
+  "messages.toast.copy_success": "Conversation copiée",
   "messages.toast.edit_failed": "Échec de la modification du message.",
   "messages.toast.muting_1_day.error": "Échec de la coupure des notifs",
   "messages.toast.muting_1_day.loading": "Couper notifs pour 1 jour...",

web/pages/messages/[channelId].tsx

@@ -5,13 +5,13 @@ import {ChatMessage} from 'common/chat-message'
 import {PrivateMessageChannel} from 'common/supabase/private-messages'
 import {User} from 'common/user'
 import {buildArray, filterDefined} from 'common/util/array'
-import {cleanDoc} from 'common/util/parse'
+import {cleanDoc, richTextToString} from 'common/util/parse'
 import {DAY_MS, YEAR_MS} from 'common/util/time'
-import {uniq} from 'lodash'
+import {keyBy, uniq} from 'lodash'
 import {useRouter} from 'next/router'
 import {useCallback, useEffect, useState} from 'react'
 import toast from 'react-hot-toast'
-import {FaFlag, FaUserFriends, FaUserMinus} from 'react-icons/fa'
+import {FaFlag, FaRegCopy, FaUserFriends, FaUserMinus} from 'react-icons/fa'
 import {GiSpeakerOff} from 'react-icons/gi'
 import {BackButton} from 'web/components/back-button'
 import {ChatMessageItem, SystemChatMessageItem} from 'web/components/chat/chat-message'
@@ -45,6 +45,7 @@ import {firebaseLogin} from 'web/lib/firebase/users'
 import {useT} from 'web/lib/locale'
 import {track} from 'web/lib/service/analytics'
 import {useGroupedMessages, usePaginatedScrollingMessages} from 'web/lib/supabase/chat-messages'
+import {copyToClipboard} from 'web/lib/util/copy'
 
 export default function PrivateMessagesPage() {
   const router = useRouter()
@@ -113,6 +114,38 @@ export const getFirstName = (name: string) => {
   return first
 }
 
+/**
+ * Renders the loaded messages as a plain-text transcript, oldest first:
+ *   Martin (me): hello
+ *
+ *   Liz: hi
+ * System status messages (joined/left the chat) are left out.
+ */
+export const messagesToPlainText = (
+  messages: ChatMessage[] | undefined,
+  user: User,
+  otherUsers: DisplayUser[] | undefined,
+  t: ReturnType<typeof useT>,
+) => {
+  const usersById = keyBy(filterDefined(otherUsers ?? []), 'id')
+  const nameOf = (userId: string) => {
+    if (userId === user.id)
+      return `${getFirstName(user.name)} ${t('messages.copy.me_suffix', '(me)')}`
+    const name = usersById[userId]?.name
+    return name ? getFirstName(name) : t('messages.deleted_user', 'Deleted user')
+  }
+
+  return (
+    (messages ?? [])
+      // usePrivateMessages returns newest first; a transcript reads oldest first.
+      .slice()
+      .reverse()
+      .filter((m) => m.visibility !== 'system_status')
+      .map((m) => `${nameOf(m.userId)}: ${richTextToString(m.content).trim()}`)
+      .join('\n\n')
+  )
+}
+
 export const PrivateChat = (props: {
   user: User
   channel: PrivateMessageChannel
@@ -391,6 +424,19 @@ export const PrivateChat = (props: {
                 router.push('/messages')
               },
             },
+            {
+              icon: <FaRegCopy className="h-5 w-5" />,
+              name: t('messages.menu.copy_plain_text', 'Copy as plain text'),
+              onClick: () => {
+                const text = messagesToPlainText(messages, user, otherUsers, t)
+                if (!text) {
+                  toast.error(t('messages.toast.copy_empty', 'No messages to copy'))
+                  return
+                }
+                copyToClipboard(text)
+                toast.success(t('messages.toast.copy_success', 'Conversation copied'))
+              },
+            },
           )}
         />
         {showUsers && (