From ed2a19c1fc4c3cf186215b232ee09a8821581880 Mon Sep 17 00:00:00 2001
From: Rohini-Microsoft <v-rwalunj@microsoft.com>
Date: Fri, 24 May 2024 14:07:57 +0530
Subject: [PATCH 1/2] added scroll bar logic for references

---
 code/frontend/src/components/Answer/Answer.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/code/frontend/src/components/Answer/Answer.tsx b/code/frontend/src/components/Answer/Answer.tsx
index 26222761a..1c69371ba 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<HTMLDivElement>(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) => {
@@ -97,18 +100,18 @@ export const Answer = ({
                                 onClick={handleChevronClick} iconName={chevronIsExpanded ? 'ChevronDown' : 'ChevronRight'}
                                 />
                             </Stack>
-                            
+
                         </Stack>
                     </Stack.Item>
                 )}
-                
+
                 </Stack>
-                {chevronIsExpanded && 
-                    <div style={{ marginTop: 8, display: "flex", flexDirection: "column", height: "100%", gap: "4px", maxWidth: "100%" }}>
+                {chevronIsExpanded &&
+                    <div ref={refContainer} style={{ marginTop: 8, display: "flex", flexDirection: "column", height: "100%", gap: "4px", maxWidth: "100%" }}>
                         {parsedAnswer.citations.map((citation, idx) => {
                             return (
                                 <span title={createCitationFilepath(citation, ++idx)} key={idx} onClick={() => onCitationClicked(citation)} className={styles.citationContainer}>
-                                    <div className={styles.citation}>{idx}</div>
+                                    <div className={styles.citation} key={idx}>{idx}</div>
                                     {createCitationFilepath(citation, idx, true)}
                                 </span>);
                         })}

From 80cd365dba0fa0a1fdb2deb726416f899707cc04 Mon Sep 17 00:00:00 2001
From: Rohini-Microsoft <v-rwalunj@microsoft.com>
Date: Fri, 31 May 2024 11:12:33 +0530
Subject: [PATCH 2/2] resolved issue. First time click on references scrollbar
 not working

---
 code/frontend/src/components/Answer/Answer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frontend/src/components/Answer/Answer.tsx b/code/frontend/src/components/Answer/Answer.tsx
index 3fb6e867d..1f689a20e 100644
--- a/code/frontend/src/components/Answer/Answer.tsx
+++ b/code/frontend/src/components/Answer/Answer.tsx
@@ -40,7 +40,7 @@ export const Answer = ({
         if(chevronIsExpanded && refContainer.current){
             refContainer.current.scrollIntoView({ behavior:'smooth'});
         }
-    }, [isRefAccordionOpen]);
+    }, [chevronIsExpanded,isRefAccordionOpen]);
 
     const createCitationFilepath = (citation: Citation, index: number, truncate: boolean = false) => {
         let citationFilename = "";