Add unread indicator + fix bug with read receipts

app/soapbox/actions/streaming.ts

@@ -168,7 +168,14 @@ const connectTimelineStream = (
           removeChatMessage(data.payload);
           break;
         case 'chat_message.read': // TruthSocial
-          updateChatQuery(JSON.parse(data.payload));
+          dispatch((_dispatch: AppDispatch, getState: () => RootState) => {
+            const chat = JSON.parse(data.payload);
+            const me = getState().me;
+            const isFromOtherUser = chat.account.id !== me;
+            if (isFromOtherUser) {
+              updateChatQuery(JSON.parse(data.payload));
+            }
+          });
           break;
         case 'pleroma:follow_relationships_update':
           dispatch(updateFollowRelationships(JSON.parse(data.payload)));

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -344,10 +344,18 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                   {intl.formatTime(chatMessage.created_at)}
                 </Text>
 
-                {isRead ? (
+                {isMyMessage ? (
-                  <span className='rounded-full flex flex-col items-center justify-center h-3.5 w-3.5 dark:bg-primary-400 dark:text-primary-900'>
+                  <>
-                    <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='w-2.5 h-2.5' />
+                    {isRead ? (
-                  </span>
+                      <span className='rounded-full flex flex-col items-center justify-center p-0.5 dark:bg-primary-400 dark:text-primary-900 border border-solid border-primary-400'>
+                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='w-3 h-3' />
+                      </span>
+                    ) : (
+                      <span className='rounded-full flex flex-col items-center justify-center p-0.5 bg-transparent dark:text-primary-400 border border-solid dark:border-primary-400'>
+                        <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='w-3 h-3' />
+                      </span>
+                    )}
+                  </>
                 ) : null}
               </span>
             </div>