From 5396e3c4c43e72bd8f318b503a8a2f70d5e28d07 Mon Sep 17 00:00:00 2001
From: Hilson Shrestha <hilsonshrestha@gmail.com>
Date: Thu, 25 Jul 2024 15:57:11 -0400
Subject: [PATCH] Highlight summary content when it changes

---
 src/public/sumshaper/Markdown.tsx         | 23 ++++++++++++++++++++++-
 src/public/sumshaper/SummaryApp.tsx       |  2 ++
 src/public/sumshaper/sumsifter.module.css |  8 ++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/public/sumshaper/Markdown.tsx b/src/public/sumshaper/Markdown.tsx
index 0cb2e25a1..2549242db 100644
--- a/src/public/sumshaper/Markdown.tsx
+++ b/src/public/sumshaper/Markdown.tsx
@@ -155,8 +155,29 @@ function CustomMarkdown({
   onSourceClick?: (elem: HTMLDivElement | null, id: string | null, sourceId: string | null) => void;
   onActiveRefChange?: (_: HTMLDivElement | null) => void;
 }) {
+  const [wasUpdated, setWasUpdated] = useState(false);
+  const isFirstRender = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      return () => {};
+    }
+    setWasUpdated(true);
+    const t = setTimeout(() => {
+      setWasUpdated(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(t);
+    };
+  }, [data, isFirstRender]);
+
+  useEffect(() => {
+    isFirstRender.current = false;
+  }, []);
+
   return (
-    <div>
+    <div className={`${style.markdownContent} ${wasUpdated ? style.markdownHighlight : ''}`}>
       {data.map((item, index) => {
         if (item.text === '\n') {
           return (
diff --git a/src/public/sumshaper/SummaryApp.tsx b/src/public/sumshaper/SummaryApp.tsx
index b02e9f617..4bac4d7d3 100644
--- a/src/public/sumshaper/SummaryApp.tsx
+++ b/src/public/sumshaper/SummaryApp.tsx
@@ -379,6 +379,7 @@ function SummaryApp({ parameters, setAnswer }: StimulusParams<SumParams>) {
           </ScrollArea>
           {activeDocumentId !== null && (
             <Summary
+              key={activeDocumentId}
               conversationId={localSummaries[activeDocumentId].conversationId}
               sentences={localSummaries[activeDocumentId].content}
               onSummaryBadgePositionChange={handleSummaryBadgePositionChange}
@@ -395,6 +396,7 @@ function SummaryApp({ parameters, setAnswer }: StimulusParams<SumParams>) {
         <Grid.Col span={4}>
           {activeDocumentId !== null && (
             <Source
+              key={activeDocumentId}
               conversationId={localSummaries[activeDocumentId].conversationId}
               sourceList={sources[activeDocumentId].content}
               onSourceBadgePositionChange={handleSourceBadgePositionChange}
diff --git a/src/public/sumshaper/sumsifter.module.css b/src/public/sumshaper/sumsifter.module.css
index 4d0eb8eb9..c784ea2fd 100644
--- a/src/public/sumshaper/sumsifter.module.css
+++ b/src/public/sumshaper/sumsifter.module.css
@@ -124,3 +124,11 @@
 .modalForm {
   padding: 20px;
 }
+
+.markdownContent {
+  transition: background-color 200ms;
+}
+
+.markdownHighlight {
+  background-color: var(--mantine-color-green-1);
+}
\ No newline at end of file