Highlight summary content when it changes

wpivis · Jul 25, 2024 · 5396e3c · 5396e3c
1 parent 7fa9037
commit 5396e3c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -124,3 +124,11 @@
 .modalForm {
   padding: 20px;
 }
+
+.markdownContent {
+  transition: background-color 200ms;
+}
+
+.markdownHighlight {
+  background-color: var(--mantine-color-green-1);
+}