From 435954c439d3da91a165a6ca24ffd2b1322f52ec Mon Sep 17 00:00:00 2001
From: liangfung <jueliang@tabbyml.com>
Date: Thu, 3 Apr 2025 16:35:50 +0800
Subject: [PATCH] chore(ui): mark as read when a link in a notification is
 clicked

---
 ee/tabby-ui/components/notification-box.tsx | 38 ++++++++++++++-------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/ee/tabby-ui/components/notification-box.tsx b/ee/tabby-ui/components/notification-box.tsx
index 8fb6ab53ea82..2d5ff4467fdb 100644
--- a/ee/tabby-ui/components/notification-box.tsx
+++ b/ee/tabby-ui/components/notification-box.tsx
@@ -2,6 +2,7 @@
 
 import { HTMLAttributes, useMemo } from 'react'
 import { TabsContent } from '@radix-ui/react-tabs'
+import { AnimatePresence, motion } from 'framer-motion'
 import moment from 'moment'
 import useSWR from 'swr'
 import { useQuery } from 'urql'
@@ -135,18 +136,20 @@ function NotificationList({
 
   return (
     <div className="space-y-2">
-      {notifications?.map((item, index) => {
-        return (
-          <div key={item.id}>
-            <NotificationItem data={item} />
-            <Separator
-              className={cn('my-3', {
-                hidden: index === len - 1
-              })}
-            />
-          </div>
-        )
-      })}
+      <AnimatePresence>
+        {notifications?.map((item, index) => {
+          return (
+            <motion.div layout key={item.id}>
+              <NotificationItem data={item} />
+              <Separator
+                className={cn('my-3', {
+                  hidden: index === len - 1
+                })}
+              />
+            </motion.div>
+          )
+        })}
+      </AnimatePresence>
     </div>
   )
 }
@@ -171,6 +174,17 @@ function NotificationItem({ data }: NotificationItemProps) {
           'prose max-w-none break-words text-sm dark:prose-invert prose-p:my-1 prose-p:leading-relaxed',
           { 'unread-notification': !data.read }
         )}
+        components={{
+          a: props => (
+            <a
+              {...props}
+              onClick={e => {
+                onClickMarkRead()
+                props.onClick?.(e)
+              }}
+            />
+          )
+        }}
       >
         {data.content}
       </MemoizedReactMarkdown>