Display system messages in chats (#10312)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

assets/icons/arrowBoxRight_stroke2_corner3_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M17 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4h-2a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h2Zm-6.707 4.793a1 1 0 0 1 1.414 0l3.5 3.5a1 1 0 0 1 0 1.414l-3.5 3.5a1 1 0 1 1-1.414-1.414L12.086 13H4a1 1 0 1 1 0-2h8.086l-1.793-1.793a1 1 0 0 1 0-1.414Z"/></svg>

assets/icons/chainLinkBroken_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M14.3 23v-1.1a1 1 0 0 1 2 0V23a1 1 0 1 1-2 0Zm5.243-3.457a1 1 0 0 1 1.414 0l1.1 1.1a1 1 0 1 1-1.414 1.414l-1.1-1.1a1 1 0 0 1 0-1.414ZM4.788 9.298a1 1 0 0 1 1.424 1.404l-.742.752-.004.005a5.003 5.003 0 1 0 7.075 7.075l.005-.004.752-.742a1 1 0 0 1 1.404 1.424l-.747.736a7.003 7.003 0 1 1-9.904-9.904l.737-.746ZM23 14.3a1 1 0 0 1 0 2h-1.1a1 1 0 1 1 0-2H23ZM10.044 4.05a7.005 7.005 0 0 1 9.905 9.906h0l-.737.746a1 1 0 0 1-1.424-1.404l.742-.752.004-.005a5.003 5.003 0 1 0-7.075-7.075l-.005.004-.752.742a1 1 0 0 1-1.404-1.424l.746-.737ZM2.1 7.7a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2h1.1Zm-.157-5.757a1 1 0 0 1 1.414 0l1.1 1.1a1 1 0 1 1-1.414 1.414l-1.1-1.1a1 1 0 0 1 0-1.414ZM7.7 2.1V1a1 1 0 1 1 2 0v1.1a1 1 0 0 1-2 0Z"/></svg>

assets/icons/unlock_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12 13a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z"/><path fill="#000" fill-rule="evenodd" d="M12 2a5 5 0 0 1 4.843 3.751 1 1 0 0 1-1.938.498A3.002 3.002 0 0 0 9 7v2h8a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3V7a5 5 0 0 1 5-5Zm-5 9a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H7Z" clip-rule="evenodd"/></svg>

package.json

@@ -81,7 +81,7 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.19.9",
+    "@atproto/api": "^0.19.10",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
     "@bsky.app/alf": "^0.1.7",

src/components/dms/DateDivider.tsx

@@ -61,7 +61,6 @@ let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
         style={[
           a.text_xs,
           a.text_center,
-          t.atoms.bg,
           t.atoms.text_contrast_medium,
           a.px_md,
         ]}>

src/components/dms/MessageItem.tsx

@@ -474,7 +474,23 @@ let MessageItem = ({
                   ]}>
                   <RichText
                     value={rt}
-                    style={[a.text_md, isFromSelf && {color: t.palette.white}]}
+                    style={[
+                      a.text_md,
+                      isFromSelf && {color: t.palette.white},
+                      // Emoji-only: add top leading to avoid clipping the
+                      // glyph, then pull the bottom up by the same amount so
+                      // the glyph bottom-aligns with the avatar instead of
+                      // sitting above its line-box baseline.
+                      isOnlyEmoji(message.text) && [
+                        a.leading_tight,
+                        // Visually align bottom of the emoji with the avatar
+                        !isFromSelf &&
+                          platform({
+                            android: {marginTop: a.mt_2xs.marginTop},
+                            default: {marginBottom: -a.mb_sm.marginBottom},
+                          }),
+                      ],
+                    ]}
                     interactiveStyle={a.underline}
                     enableTags
                     emojiMultiplier={3}

src/components/dms/SystemMessageItem.tsx

@@ -0,0 +1,44 @@
+import {View} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
+
+import {type ConvoItem} from '#/state/messages/convo/types'
+import {atoms as a, useTheme} from '#/alf'
+import {getSystemMessageInfo} from '#/components/dms/systemMessage'
+import {Text} from '#/components/Typography'
+
+export function SystemMessageItem({
+  item,
+}: {
+  item: ConvoItem & {type: 'system-message'}
+}) {
+  const t = useTheme()
+  const {i18n} = useLingui()
+
+  const info = getSystemMessageInfo(item.message.data)
+  if (!info) return null
+
+  const {Icon, message} = info
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.justify_center,
+        a.px_md,
+        a.mt_md,
+      ]}>
+      <Icon size="xs" style={[a.mr_2xs, t.atoms.text_contrast_medium]} />
+      <Text
+        style={[
+          a.text_xs,
+          a.text_center,
+          t.atoms.text_contrast_medium,
+          {includeFontPadding: false, textAlignVertical: 'center'},
+        ]}>
+        {i18n._(message)}
+      </Text>
+    </View>
+  )
+}

src/components/dms/systemMessage.ts

@@ -0,0 +1,68 @@
+import {ChatBskyConvoDefs} from '@atproto/api'
+import {type MessageDescriptor} from '@lingui/core'
+import {msg} from '@lingui/core/macro'
+
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
+import {ArrowBoxRight_Stroke2_Corner3_Rounded as JoinIcon} from '#/components/icons/ArrowBoxRight'
+import {
+  ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon,
+  ChainLinkBroken_Stroke2_Corner0_Rounded as ChainLinkBrokenIcon,
+} from '#/components/icons/ChainLink'
+import {type Props as SVGIconProps} from '#/components/icons/common'
+import {
+  Lock_Stroke2_Corner0_Rounded as LockIcon,
+  Unlock_Stroke2_Corner2_Rounded as UnlockIcon,
+} from '#/components/icons/Lock'
+import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
+
+export type SystemMessageInfo = {
+  message: MessageDescriptor
+  Icon: React.ComponentType<SVGIconProps>
+}
+
+export function getSystemMessageInfo(
+  data: ChatBskyConvoDefs.SystemMessageView['data'],
+): SystemMessageInfo | null {
+  if (ChatBskyConvoDefs.isSystemMessageDataAddMember(data)) {
+    return {
+      Icon: JoinIcon,
+      message: msg`${createSanitizedDisplayName(data.member)} was added to the group`,
+    }
+  } else if (ChatBskyConvoDefs.isSystemMessageDataRemoveMember(data)) {
+    return {
+      Icon: LeaveIcon,
+      message: msg`${createSanitizedDisplayName(data.member)} was removed from the group`,
+    }
+  } else if (ChatBskyConvoDefs.isSystemMessageDataMemberJoin(data)) {
+    return {
+      Icon: JoinIcon,
+      message: msg`${createSanitizedDisplayName(data.member)} joined the group`,
+    }
+  } else if (ChatBskyConvoDefs.isSystemMessageDataMemberLeave(data)) {
+    return {
+      Icon: LeaveIcon,
+      message: msg`${createSanitizedDisplayName(data.member)} left the group`,
+    }
+  } else if (ChatBskyConvoDefs.isSystemMessageDataLockConvo(data)) {
+    return {Icon: LockIcon, message: msg`Chat locked`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataUnlockConvo(data)) {
+    return {Icon: UnlockIcon, message: msg`Chat unlocked`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataLockConvoPermanently(data)) {
+    return {Icon: LockIcon, message: msg`Chat locked permanently`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataEditGroup(data)) {
+    return {
+      Icon: PencilIcon,
+      message: msg`Chat title changed to ${data.newName ?? ''}`,
+    }
+  } else if (ChatBskyConvoDefs.isSystemMessageDataCreateJoinLink(data)) {
+    return {Icon: ChainLinkIcon, message: msg`Invite link created`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataEditJoinLink(data)) {
+    return {Icon: ChainLinkIcon, message: msg`Invite link edited`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataEnableJoinLink(data)) {
+    return {Icon: ChainLinkIcon, message: msg`Invite link enabled`}
+  } else if (ChatBskyConvoDefs.isSystemMessageDataDisableJoinLink(data)) {
+    return {Icon: ChainLinkBrokenIcon, message: msg`Invite link disabled`}
+  }
+  return null
+}

src/components/icons/ArrowBoxRight.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowBoxRight_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M17 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4h-2a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h2Zm-6.707 4.793a1 1 0 0 1 1.414 0l3.5 3.5a1 1 0 0 1 0 1.414l-3.5 3.5a1 1 0 1 1-1.414-1.414L12.086 13H4a1 1 0 1 1 0-2h8.086l-1.793-1.793a1 1 0 0 1 0-1.414Z',
+})

src/components/icons/ChainLink.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const ChainLink_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M18.535 5.465a5.003 5.003 0 0 0-7.076 0l-.005.005-.752.742a1 1 0 1 1-1.404-1.424l.749-.74a7.003 7.003 0 0 1 9.904 9.905l-.002.003-.737.746a1 1 0 1 1-1.424-1.404l.747-.757a5.003 5.003 0 0 0 0-7.076ZM6.202 9.288a1 1 0 0 1 .01 1.414l-.747.757a5.003 5.003 0 1 0 7.076 7.076l.005-.005.752-.742a1 1 0 1 1 1.404 1.424l-.746.737-.003.002a7.003 7.003 0 0 1-9.904-9.904l.74-.75a1 1 0 0 1 1.413-.009Zm8.505.005a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0Z',
 })
+
+export const ChainLinkBroken_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M14.3 23v-1.1a1 1 0 0 1 2 0V23a1 1 0 1 1-2 0Zm5.243-3.457a1 1 0 0 1 1.414 0l1.1 1.1a1 1 0 1 1-1.414 1.414l-1.1-1.1a1 1 0 0 1 0-1.414ZM4.788 9.298a1 1 0 0 1 1.424 1.404l-.742.752-.004.005a5.003 5.003 0 1 0 7.075 7.075l.005-.004.752-.742a1 1 0 0 1 1.404 1.424l-.747.736a7.003 7.003 0 1 1-9.904-9.904l.737-.746ZM23 14.3a1 1 0 0 1 0 2h-1.1a1 1 0 1 1 0-2H23ZM10.044 4.05a7.005 7.005 0 0 1 9.905 9.906h0l-.737.746a1 1 0 0 1-1.424-1.404l.742-.752.004-.005a5.003 5.003 0 1 0-7.075-7.075l-.005.004-.752.742a1 1 0 0 1-1.404-1.424l.746-.737ZM2.1 7.7a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2h1.1Zm-.157-5.757a1 1 0 0 1 1.414 0l1.1 1.1a1 1 0 1 1-1.414 1.414l-1.1-1.1a1 1 0 0 1 0-1.414ZM7.7 2.1V1a1 1 0 1 1 2 0v1.1a1 1 0 0 1-2 0Z',
+})

src/components/icons/Lock.tsx

@@ -7,3 +7,7 @@ export const Lock_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const Lock_Stroke2_Corner2_Rounded = createSinglePathSVG({
   path: 'M7 7a5 5 0 0 1 10 0v2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3V7Zm0 4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H7Zm8-2H9V7a3 3 0 1 1 6 0v2Zm-3 4a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z',
 })
+
+export const Unlock_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M12 13a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z"/><path fill="#000" fill-rule="evenodd" d="M12 2a5 5 0 0 1 4.843 3.751 1 1 0 0 1-1.938.498A3.002 3.002 0 0 0 9 7v2h8a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3V7a5 5 0 0 1 5-5Zm-5 9a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H7Z',
+})

src/screens/Messages/components/ChatListItem.tsx

@@ -37,6 +37,7 @@ import {AvatarBubbles} from '#/components/AvatarBubbles'
 import {useDialogControl} from '#/components/Dialog'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
+import {getSystemMessageInfo} from '#/components/dms/systemMessage'
 import {type ConvoWithDetails, parseConvoView} from '#/components/dms/util'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
 import {Envelope_Open_Stroke2_Corner0_Rounded as EnvelopeOpen} from '#/components/icons/EnveopeOpen'
@@ -233,7 +234,7 @@ function BaseChatItem({
 }) {
   const ax = useAnalytics()
   const t = useTheme()
-  const {t: l} = useLingui()
+  const {t: l, i18n} = useLingui()
   const {currentAccount} = useSession()
   const menuControl = useMenuControl()
   const leaveConvoControl = useDialogControl()
@@ -265,6 +266,7 @@ function BaseChatItem({
 
       let latestReportableMessage: ChatBskyConvoDefs.MessageView | undefined
 
+      // Message
       if (ChatBskyConvoDefs.isMessageView(convo.lastMessage)) {
         const isFromMe = convo.lastMessage.sender?.did === currentAccount?.did
 
@@ -310,6 +312,8 @@ function BaseChatItem({
 
         lastMessageSentAt = convo.lastMessage.sentAt
       }
+
+      // Deleted message
       if (ChatBskyConvoDefs.isDeletedMessageView(convo.lastMessage)) {
         lastMessageSentAt = convo.lastMessage.sentAt
 
@@ -318,6 +322,7 @@ function BaseChatItem({
           : l`Message deleted`
       }
 
+      // Reaction
       if (ChatBskyConvoDefs.isMessageAndReactionView(convo.lastReaction)) {
         if (
           !lastMessageSentAt ||
@@ -362,6 +367,14 @@ function BaseChatItem({
         }
       }
 
+      // System message
+      if (ChatBskyConvoDefs.isSystemMessageView(convo.lastMessage)) {
+        const info = getSystemMessageInfo(convo.lastMessage.data)
+        if (info) {
+          lastMessage = i18n._(info.message)
+        }
+      }
+
       return {
         lastMessage,
         lastMessageSentAt,
@@ -369,6 +382,7 @@ function BaseChatItem({
       }
     }, [
       l,
+      i18n,
       convo.lastMessage,
       convo.lastReaction,
       currentAccount?.did,

src/screens/Messages/components/MessagesList.tsx

@@ -58,6 +58,7 @@ import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {DateDividerToggleProvider} from '#/components/dms/DateDividerToggle'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
+import {SystemMessageItem} from '#/components/dms/SystemMessageItem'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
@@ -383,6 +384,8 @@ export function MessagesList({
       )
     } else if (item.type === 'deleted-message') {
       return <Text>Deleted message</Text>
+    } else if (item.type === 'system-message') {
+      return <SystemMessageItem item={item} />
     } else if (item.type === 'error') {
       return <MessageListError item={item} />
     }

src/state/messages/convo/agent.ts

@@ -52,6 +52,26 @@ export function isConvoItemMessage(
   )
 }
 
+function toSystemMessageView(
+  ev: ChatBskyConvoGetLog.OutputSchema['logs'][number],
+): ChatBskyConvoDefs.SystemMessageView | null {
+  const isSystem =
+    ChatBskyConvoDefs.isLogAddMember(ev) ||
+    ChatBskyConvoDefs.isLogRemoveMember(ev) ||
+    ChatBskyConvoDefs.isLogMemberJoin(ev) ||
+    ChatBskyConvoDefs.isLogMemberLeave(ev) ||
+    ChatBskyConvoDefs.isLogLockConvo(ev) ||
+    ChatBskyConvoDefs.isLogUnlockConvo(ev) ||
+    ChatBskyConvoDefs.isLogLockConvoPermanently(ev) ||
+    ChatBskyConvoDefs.isLogEditGroup(ev) ||
+    ChatBskyConvoDefs.isLogCreateJoinLink(ev) ||
+    ChatBskyConvoDefs.isLogEditJoinLink(ev) ||
+    ChatBskyConvoDefs.isLogEnableJoinLink(ev) ||
+    ChatBskyConvoDefs.isLogDisableJoinLink(ev)
+  if (!isSystem) return null
+  return ev.message
+}
+
 export class Convo {
   private id: string
 
@@ -67,11 +87,15 @@ export class Convo {
 
   private pastMessages: Map<
     string,
-    ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView
+    | ChatBskyConvoDefs.MessageView
+    | ChatBskyConvoDefs.DeletedMessageView
+    | ChatBskyConvoDefs.SystemMessageView
   > = new Map()
   private newMessages: Map<
     string,
-    ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView
+    | ChatBskyConvoDefs.MessageView
+    | ChatBskyConvoDefs.DeletedMessageView
+    | ChatBskyConvoDefs.SystemMessageView
   > = new Map()
   private pendingMessages: Map<
     string,
@@ -680,7 +704,8 @@ export class Convo {
       for (const message of messages) {
         if (
           ChatBskyConvoDefs.isMessageView(message) ||
-          ChatBskyConvoDefs.isDeletedMessageView(message)
+          ChatBskyConvoDefs.isDeletedMessageView(message) ||
+          ChatBskyConvoDefs.isSystemMessageView(message)
         ) {
           /*
            * If this message is already in new messages, it was added by the
@@ -832,6 +857,12 @@ export class Convo {
               this.newMessages.set(ev.message.id, ev.message)
               needsCommit = true
             }
+          } else {
+            const systemView = toSystemMessageView(ev)
+            if (systemView) {
+              this.newMessages.set(systemView.id, systemView)
+              needsCommit = true
+            }
           }
         }
       }
@@ -1119,6 +1150,12 @@ export class Convo {
           nextMessage: null,
           prevMessage: null,
         })
+      } else if (ChatBskyConvoDefs.isSystemMessageView(m)) {
+        items.unshift({
+          type: 'system-message',
+          key: m.id,
+          message: m,
+        })
       }
     })
 
@@ -1150,6 +1187,12 @@ export class Convo {
           nextMessage: null,
           prevMessage: null,
         })
+      } else if (ChatBskyConvoDefs.isSystemMessageView(m)) {
+        items.push({
+          type: 'system-message',
+          key: m.id,
+          message: m,
+        })
       }
     })
 

src/state/messages/convo/types.ts

@@ -126,6 +126,11 @@ export type ConvoItem =
         | ChatBskyConvoDefs.DeletedMessageView
         | null
     }
+  | {
+      type: 'system-message'
+      key: string
+      message: ChatBskyConvoDefs.SystemMessageView
+    }
   | {
       type: 'error'
       key: string

yarn.lock

@@ -20,10 +20,10 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@atproto/api@^0.19.9":
-  version "0.19.9"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.19.9.tgz#f09ed8412159d6878eeaf25a0a8b4445c62fa9eb"
-  integrity sha512-+sUYNuiA1Rv8HemMCURHwRkMp2D7cq6nNquefjosu6UB54IzkD0MLK3YY383poLRShiApouOxRse2OKK25dbQw==
+"@atproto/api@^0.19.10":
+  version "0.19.10"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.19.10.tgz#311a3fb8c642ee8bb1eea96acadfedbf500e9f08"
+  integrity sha512-HrHWjL6aEEfUKBSZFZ7Fz+MF3WcGOdhTlX6f71j4fgf91pMhwxgdo2K13Qjn2CxIh8/iHAJi+oiLWKOgZnOLNA==
   dependencies:
     "@atproto/common-web" "^0.4.21"
     "@atproto/lexicon" "^0.6.2"