Display system messages in chats (#10312)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
2026-04-21 10:43:22 -07:00
parent 0df1d6f53e
commit 2ab1e2c9e9
16 changed files with 219 additions and 11 deletions
@@ -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>
+  )
+}