From 8b79cf397e4d94f2ffaab4c8a83d21ee804e63c0 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 7 Dec 2021 12:12:00 +0100
Subject: [PATCH] Add image to replying (#148)

---
 .../src/components/Chat/ChatInput.tsx         |  6 ++--
 .../src/components/Chat/ChatMessages.tsx      | 28 +++++++++++++++----
 packages/react-chat/src/hooks/useReply.ts     |  1 +
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 6533399..68210d8 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -257,6 +257,7 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
               {reply.sender}
             </ReplyTo>
             <ReplyOn>{reply.content}</ReplyOn>
+            {reply.image && <ImagePreview src={reply.image} />}
             <CloseButton onClick={() => setReply(undefined)}>
               {" "}
               <ClearSvg width={20} height={20} className="input" />
@@ -442,20 +443,18 @@ const ReplyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 96px;
   padding: 6px 12px;
   background: rgba(0, 0, 0, 0.1);
   color: ${({ theme }) => theme.primary};
   border-radius: 14px 14px 4px 14px;
   position: relative;
-
-  ${textSmallStyles};
 `;
 
 export const ReplyTo = styled.div`
   display: flex;
   align-items: center;
   font-weight: 500;
+  ${textSmallStyles};
 `;
 
 export const ReplyOn = styled.div`
@@ -463,4 +462,5 @@ export const ReplyOn = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  ${textSmallStyles};
 `;
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 0c3fab7..d3ce6b6 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -64,12 +64,22 @@ function ChatUiMessage({
       <MessageWrapper className={`${mentioned && "mention"}`}>
         {quote && (
           <QuoteWrapper>
-            <QuoteSvg width={22} height={25} />
-            <QuoteAuthor>
+            <QuoteSvg
+              width={22}
+              height={
+                quote.image && quote.content
+                  ? 88
+                  : quote.image && !quote.content
+                  ? 68
+                  : 25
+              }
+            />
+            <QuoteSender>
               {" "}
               <UserIcon memberView={true} /> {quote.sender}
-            </QuoteAuthor>
-            <Quote>{quote.content} </Quote>
+            </QuoteSender>
+            <Quote>{quote.content}</Quote>
+            {quote.image && <QuoteImage src={quote.image} />}
           </QuoteWrapper>
         )}
         <UserMessageWrapper>
@@ -119,6 +129,7 @@ function ChatUiMessage({
               setReply({
                 sender: message.sender,
                 content: message.content,
+                image: message.image,
                 id: message.id,
               })
             }
@@ -381,10 +392,17 @@ const QuoteWrapper = styled.div`
   position: relative;
 `;
 
-const QuoteAuthor = styled(ReplyTo)`
+const QuoteSender = styled(ReplyTo)`
   color: ${({ theme }) => theme.secondary};
 `;
 
 const Quote = styled(ReplyOn)`
   color: ${({ theme }) => theme.secondary};
 `;
+
+const QuoteImage = styled.img`
+  width: 56px;
+  height: 56px;
+  border-radius: 4px;
+  margin-top: 4px;
+`;
diff --git a/packages/react-chat/src/hooks/useReply.ts b/packages/react-chat/src/hooks/useReply.ts
index ec35980..fb76a53 100644
--- a/packages/react-chat/src/hooks/useReply.ts
+++ b/packages/react-chat/src/hooks/useReply.ts
@@ -1,5 +1,6 @@
 export type Reply = {
   sender: string;
   content: string;
+  image?: string;
   id: string;
 };