Add image to replying (#148)

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};
 `;

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;
+`;

packages/react-chat/src/hooks/useReply.ts

@@ -1,5 +1,6 @@
 export type Reply = {
   sender: string;
   content: string;
+  image?: string;
   id: string;
 };