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}
{reply.content}
+ {reply.image && }
setReply(undefined)}>
{" "}
@@ -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({
{quote && (
-
-
+
+
{" "}
{quote.sender}
-
- {quote.content}
+
+ {quote.content}
+ {quote.image && }
)}
@@ -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;
};