src/screens/Messages/Conversation/MessageItem.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import React from 'react'
import {View} from 'react-native'

import {useAgent} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
import * as TempDmChatDefs from '#/temp/dm/defs'

export function MessageItem({item}: {item: TempDmChatDefs.MessageView}) {
  const t = useTheme()
  const {getAgent} = useAgent()

  const fromMe = item.sender?.did === getAgent().session?.did

  return (
    <View
      style={[
        a.py_sm,
        a.px_md,
        a.my_xs,
        a.rounded_md,
        fromMe ? a.self_end : a.self_start,
        {
          backgroundColor: fromMe
            ? t.palette.primary_500
            : t.palette.contrast_50,
          maxWidth: '65%',
          borderRadius: 17,
        },
      ]}>
      <Text
        style={[a.text_md, a.leading_snug, fromMe && {color: t.palette.white}]}>
        {item.text}
      </Text>
    </View>
  )
}