feat: clear converation interactions if a new message appears in a chat

currently on checks text we need it to be more unique

ts/components/leftpane/conversation-list-item/InteractionItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { isEmpty } from 'lodash';
 
 import { useIsPrivate, useIsPublic } from '../../../hooks/useParamSelector';
@@ -8,23 +8,50 @@ import {
   ConversationInteractionProps,
   ConversationInteractionStatus,
   ConversationInteractionType,
+  clearConversationInteractionState,
 } from '../../../interactions/conversationInteractions';
 import styled from 'styled-components';
+import { getConversationController } from '../../../session/conversations';
+import { LastMessageType } from '../../../state/ducks/conversations';
 
 const StyledInteractionItemText = styled.div<{ isError: boolean }>`
   ${props => props.isError && 'color: var(--danger-color) !important;'}
 `;
 
-export const InteractionItem = (props: ConversationInteractionProps) => {
-  const { conversationId, interactionStatus, interactionType } = props;
+type InteractionItemProps = ConversationInteractionProps & {
+  lastMessage?: LastMessageType | null;
+};
+
+export const InteractionItem = (props: InteractionItemProps) => {
+  const { conversationId, interactionStatus, interactionType, lastMessage } = props;
   const isGroup = !useIsPrivate(conversationId);
   const isCommunity = useIsPublic(conversationId);
 
+  const [storedLastMessage, setStoredLastMessage] = useState(lastMessage?.text);
+
+  // NOTE we want to reset the interaction state when the last message changes
+  useEffect(() => {
+    if (conversationId) {
+      const convo = getConversationController().get(conversationId);
+
+      window.log.debug(
+        `WIP: storedLastMessage "${storedLastMessage}" convo.get('lastMessage') "${convo.get(
+          'lastMessage'
+        )}'`
+      );
+
+      if (storedLastMessage !== convo.get('lastMessage')) {
+        setStoredLastMessage(convo.get('lastMessage'));
+        void clearConversationInteractionState({ conversationId });
+      }
+    }
+  }, [conversationId, interactionStatus, lastMessage?.text]);
+
   if (isEmpty(conversationId) || isEmpty(interactionType) || isEmpty(interactionStatus)) {
     return null;
   }
 
-  let text = '';
+  let text = storedLastMessage || '';
   switch (interactionType) {
     case ConversationInteractionType.Leave:
       const failText = isCommunity
@@ -38,7 +65,7 @@ export const InteractionItem = (props: ConversationInteractionProps) => {
           ? failText
           : interactionStatus === ConversationInteractionStatus.Loading
           ? window.i18n('leaving')
-          : '';
+          : text;
       break;
     default:
       assertUnreachable(interactionType, `MessageItem: Missing case error "${interactionType}"`);

ts/components/leftpane/conversation-list-item/MessageItem.tsx

@@ -31,7 +31,7 @@ export const MessageItem = () => {
   const interactionProps = useConversationInteractionPropsById(conversationId);
 
   if (!isConvoTyping && interactionProps) {
-    return <InteractionItem {...interactionProps} />;
+    return <InteractionItem lastMessage={lastMessage} {...interactionProps} />;
   }
 
   if (!lastMessage && !isConvoTyping) {