diff --git a/code/frontend/src/components/Answer/Answer.tsx b/code/frontend/src/components/Answer/Answer.tsx index 8cc50873d..3fb6e867d 100644 --- a/code/frontend/src/components/Answer/Answer.tsx +++ b/code/frontend/src/components/Answer/Answer.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState, useRef } from "react"; import { useBoolean } from "@fluentui/react-hooks" import { FontIcon, Stack, Text } from "@fluentui/react"; @@ -29,7 +29,7 @@ export const Answer = ({ const parsedAnswer = useMemo(() => parseAnswer(answer), [answer]); const [chevronIsExpanded, setChevronIsExpanded] = useState(isRefAccordionOpen); - + const refContainer = useRef(null); const handleChevronClick = () => { setChevronIsExpanded(!chevronIsExpanded); toggleIsRefAccordionOpen(); @@ -37,6 +37,9 @@ export const Answer = ({ useEffect(() => { setChevronIsExpanded(isRefAccordionOpen); + if(chevronIsExpanded && refContainer.current){ + refContainer.current.scrollIntoView({ behavior:'smooth'}); + } }, [isRefAccordionOpen]); const createCitationFilepath = (citation: Citation, index: number, truncate: boolean = false) => { @@ -104,11 +107,11 @@ export const Answer = ({ {chevronIsExpanded && -
+
{parsedAnswer.citations.map((citation, idx) => { return ( onCitationClicked(citation)} className={styles.citationContainer}> -
{idx}
+
{idx}
{createCitationFilepath(citation, idx, true)}
); })}