diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index a81df7ad..16c69614 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -1,4 +1,10 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { utils } from "status-communities/dist/cjs"; import styled from "styled-components"; @@ -44,9 +50,30 @@ type MessageQuoteProps = { }; function MessageQuote({ quote }: MessageQuoteProps) { + const quoteClick = useCallback(() => { + if (quote) { + const quoteDiv = document.getElementById(quote.id); + if (quoteDiv) { + quoteDiv.scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "center", + }); + quoteDiv.style.background = "lightblue"; + quoteDiv.style.transition = "background-color 1000ms linear"; + window.setTimeout(() => { + quoteDiv.style.background = ""; + window.setTimeout(() => { + quoteDiv.style.transition = ""; + }, 1000); + }, 1000); + } + } + }, [quote]); + if (quote) { return ( - + {" "} @@ -129,7 +156,7 @@ function ChatUiMessage({ : message.date.toLocaleDateString()} )} - + -