2 files changed, 16 insertions, 5 deletions
diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx
index 74e65488e..822b17804 100644
--- a/src/screens/Messages/Conversation/MessageItem.tsx
+++ b/src/screens/Messages/Conversation/MessageItem.tsx
@@ -1,12 +1,16 @@
 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
@@ -15,13 +19,17 @@ export function MessageItem({item}: {item: TempDmChatDefs.MessageView}) {
         a.px_md,
         a.my_xs,
         a.rounded_md,
+        fromMe ? a.self_end : a.self_start,
         {
-          backgroundColor: t.palette.primary_500,
+          backgroundColor: fromMe
+            ? t.palette.primary_500
+            : t.palette.contrast_50,
           maxWidth: '65%',
           borderRadius: 17,
         },
       ]}>
-      <Text style={[a.text_md, {lineHeight: 1.2, color: 'white'}]}>
+      <Text
+        style={[a.text_md, a.leading_snug, fromMe && {color: t.palette.white}]}>
         {item.text}
       </Text>
     </View>
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index aafed42af..e3b518f65 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react'
-import {Alert, FlatList, View, ViewToken} from 'react-native'
+import {FlatList, View, ViewToken} from 'react-native'
+import {Alert} from 'react-native'
 import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 
 import {isWeb} from 'platform/detection'
@@ -64,6 +65,7 @@ export function MessagesList({chatId}: {chatId: string}) {
   const totalMessages = useRef(10)
 
   // TODO later
+
   const [_, setShowSpinner] = useState(false)
 
   // Query Data
@@ -147,6 +149,8 @@ export function MessagesList({chatId}: {chatId: string}) {
       },
     )
     totalMessages.current = filtered.length
+
+    return filtered
   }, [chat])
 
   return (
@@ -162,7 +166,7 @@ export function MessagesList({chatId}: {chatId: string}) {
         contentContainerStyle={{paddingHorizontal: 10}}
         // In the future, we might want to adjust this value. Not very concerning right now as long as we are only
         // dealing with text. But whenever we have images or other media and things are taller, we will want to lower
-        // this...probably
+        // this...probably.
         initialNumToRender={20}
         // Same with the max to render per batch. Let's be safe for now though.
         maxToRenderPerBatch={25}
@@ -175,7 +179,6 @@ export function MessagesList({chatId}: {chatId: string}) {
         maintainVisibleContentPosition={{
           minIndexForVisible: 0,
         }}
-        // This is actually a header since we are inverted!
         ListFooterComponent={<MaybeLoader isLoading={false} />}
         removeClippedSubviews={true}
         ref={flatListRef}