feat: started updating reply to ui

finished text reply

ts/components/conversation/Emojify.tsx

@@ -36,9 +36,8 @@ export const Emojify = (props: Props): JSX.Element => {
       size = 1.1;
       break;
     case 'default':
-      size = 1.0;
-      break;
     default:
+      size = 1.0;
   }
 
   return <span style={{ fontSize: `${size}rem`, userSelect: 'inherit' }}>{rendered}</span>;

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -10,34 +10,39 @@ import { Flex } from '../basic/Flex';
 import { Image } from '../../../ts/components/conversation/Image';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
+import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment';
 
-const QuotedMessageComposition = styled.div`
-  background-color: var(--background-secondary-color);
-  width: 100%;
-  padding-inline-end: var(--margins-md);
-  padding-inline-start: var(--margins-md);
-  padding-bottom: var(--margins-xs);
+const QuotedMessageComposition = styled(Flex)`
+  border-top: 1px solid var(--border-color);
 `;
 
-const QuotedMessageCompositionReply = styled.div`
-  background: var(--message-bubbles-received-background-color);
-  border-radius: var(--margins-sm);
-  padding: var(--margins-xs);
-  margin: var(--margins-xs);
+const QuotedMessageCompositionReply = styled(Flex)`
+  border-left: 3px solid var(--primary-color);
 `;
 
 const Subtle = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   color: var(--text-primary-color);
 `;
 
-const ReplyingTo = styled.div`
-  color: var(--text-primary-color);
+const StyledImage = styled.div`
+  div {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+`;
+
+const StyledText = styled(Flex)`
+  margin: 0 0 0 var(--margins-sm);
+  p {
+    font-weight: bold;
+    margin: 0;
+  }
 `;
 
 export const SessionQuotedMessageComposition = () => {
@@ -45,21 +50,15 @@ export const SessionQuotedMessageComposition = () => {
 
   const dispatch = useDispatch();
 
-  const { text: body, attachments } = quotedMessageProps || {};
-  const hasAttachments = attachments && attachments.length > 0;
-
-  let hasImageAttachment = false;
+  const { author, attachments, text: quoteText } = quotedMessageProps || {};
 
-  let firstImageAttachment;
-  // we have to handle the case we are trying to reply to an audio message
-
-  if (attachments?.length && attachments[0].contentType !== AUDIO_MP3 && attachments[0].thumbnail) {
-    firstImageAttachment = attachments[0];
-    hasImageAttachment = true;
-  }
-
-  const hasAudioAttachment =
-    hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
+  const hasAttachments = attachments && attachments.length > 0 && attachments[0];
+  const firstImageAttachment =
+    hasAttachments && attachments[0].contentType !== AUDIO_MP3 && attachments[0].thumbnail
+      ? attachments[0]
+      : undefined;
+  const hasAudio = hasAttachments && isAudio(attachments);
+  const hasAudioAttachment = hasAudio !== false && hasAudio !== undefined && hasAudio !== '';
 
   const removeQuotedMessage = () => {
     dispatch(quoteMessage(undefined));
@@ -67,40 +66,52 @@ export const SessionQuotedMessageComposition = () => {
 
   useKey('Escape', removeQuotedMessage, undefined, []);
 
-  if (!quotedMessageProps?.id) {
+  if (!author || !quotedMessageProps?.id) {
     return null;
   }
 
   return (
-    <QuotedMessageComposition>
-      <Flex
+    <QuotedMessageComposition
+      container={true}
+      justifyContent="space-between"
+      alignItems="center"
+      width={'100%'}
+      flexGrow={1}
+      padding={'var(--margins-md)'}
+    >
+      <QuotedMessageCompositionReply
         container={true}
-        justifyContent="space-between"
-        flexGrow={1}
-        margin={'0 var(--margins-xs) var(--margins-xs)'}
-        padding={'var(--margins-xs)'}
+        justifyContent="flex-start"
+        alignItems={'center'}
       >
-        <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
-        <SessionIconButton iconType="exit" iconSize="small" onClick={removeQuotedMessage} />
-      </Flex>
-      <QuotedMessageCompositionReply>
-        <Flex container={true} justifyContent="space-between" margin={'var(--margins-xs)'}>
-          <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
-
-          {hasImageAttachment && (
+        {firstImageAttachment && (
+          <StyledImage>
             <Image
               alt={getAlt(firstImageAttachment)}
               attachment={firstImageAttachment}
               height={100}
               width={100}
-              url={firstImageAttachment.thumbnail.objectUrl}
+              url={getAbsoluteAttachmentPath((firstImageAttachment as any).thumbnail.path)}
               softCorners={false}
             />
-          )}
-
-          {hasAudioAttachment && <SessionIcon iconType="microphone" iconSize="huge" />}
-        </Flex>
+          </StyledImage>
+        )}
+        <StyledText
+          container={true}
+          flexDirection="column"
+          justifyContent={'center'}
+          alignItems={'flex-start'}
+        >
+          <p>{author}</p>
+          <Subtle>
+            {(firstImageAttachment && window.i18n('mediaMessage')) ||
+              (quoteText !== '' && quoteText)}
+          </Subtle>
+        </StyledText>
+
+        {hasAudioAttachment && <SessionIcon iconType="microphone" iconSize="huge" />}
       </QuotedMessageCompositionReply>
+      <SessionIconButton iconType="exit" iconSize="small" onClick={removeQuotedMessage} />
     </QuotedMessageComposition>
   );
 };

ts/models/conversation.ts

@@ -517,6 +517,10 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
         msgSource = await findCachedOurBlindedPubkeyOrLookItUp(room.serverPublicKey, sodium);
       }
     }
+
+    const { title, isMe } = quotedMessage.findAndFormatContact(msgSource);
+    msgSource = isMe ? window.i18n('you') : title ? title : msgSource;
+
     return {
       author: msgSource,
       id: `${quotedMessage.get('sent_at')}` || '',

ts/state/ducks/conversations.ts

@@ -287,6 +287,7 @@ export type ConversationLookupType = {
 export type ConversationsStateType = {
   conversationLookup: ConversationLookupType;
   selectedConversation?: string;
+  // NOTE the messages that are in view
   messages: Array<MessageModelPropsWithoutConvoProps>;
   firstUnreadMessageId: string | undefined;
   messageDetailProps?: MessagePropsDetails;