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