feat: support close send api to hide

web/app/components/app/in-site-message/index.tsx

@@ -20,6 +20,7 @@ type InSiteMessageProps = {
   className?: string
   headerBgUrl?: string
   main: string
+  onAction?: (action: InSiteMessageActionItem) => void
   subtitle: string
   title: string
 }
@@ -46,11 +47,14 @@ function normalizeLinkData(data: unknown): { href: string, rel?: string, target?
   }
 }
 
+const DEFAULT_HEADER_BG_URL = '/in-site-message/header-bg.svg'
+
 function InSiteMessage({
   actions,
   className,
-  headerBgUrl = '/in-site-message/header-bg.svg',
+  headerBgUrl = DEFAULT_HEADER_BG_URL,
   main,
+  onAction,
   subtitle,
   title,
 }: InSiteMessageProps) {
@@ -60,11 +64,13 @@ function InSiteMessage({
 
   const headerStyle = useMemo(() => {
     return {
-      backgroundImage: `url(${headerBgUrl})`,
+      backgroundImage: `url(${headerBgUrl || DEFAULT_HEADER_BG_URL})`,
     }
   }, [headerBgUrl])
 
   const handleAction = (item: InSiteMessageActionItem) => {
+    onAction?.(item)
+
     if (item.action === 'close') {
       setVisible(false)
       return

web/app/components/app/in-site-message/notification.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { InSiteMessageActionItem } from './index'
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { IS_CLOUD_EDITION } from '@/config'
 import { consoleClient, consoleQuery } from '@/service/client'
@@ -60,6 +60,17 @@ function parseNotificationBody(body: string): NotificationBodyPayload | null {
 
 function InSiteMessageNotification() {
   const { t } = useTranslation()
+  const dismissNotificationMutation = useMutation({
+    mutationKey: consoleQuery.notificationDismiss.mutationKey(),
+    mutationFn: async (notificationId: string) => {
+      return await consoleClient.notificationDismiss({
+        body: {
+          notification_id: notificationId,
+        },
+      })
+    },
+  })
+
   const { data } = useQuery({
     queryKey: consoleQuery.notification.queryKey(),
     queryFn: async () => {
@@ -83,7 +94,13 @@ function InSiteMessageNotification() {
   ]
 
   const actions = parsedBody?.actions?.length ? parsedBody.actions : fallbackActions
-  const main = parsedBody?.main ?? 'Invalid notification body'
+  const main = parsedBody?.main ?? notification.body
+  const handleAction = (action: InSiteMessageActionItem) => {
+    if (action.action !== 'close')
+      return
+
+    dismissNotificationMutation.mutate(notification.notification_id)
+  }
 
   return (
     <InSiteMessage
@@ -93,6 +110,7 @@ function InSiteMessageNotification() {
       headerBgUrl={notification.title_pic_url}
       main={main}
       actions={actions}
+      onAction={handleAction}
     />
   )
 }

web/contract/console/notification.ts

@@ -22,3 +22,15 @@ export const notificationContract = base
     method: 'GET',
   })
   .output(type<ConsoleNotificationResponse>())
+
+export const notificationDismissContract = base
+  .route({
+    path: '/notification/dismiss',
+    method: 'POST',
+  })
+  .input(type<{
+    body: {
+      notification_id: string
+    }
+  }>())
+  .output(type<unknown>())

web/contract/router.ts

@@ -12,7 +12,7 @@ import {
   exploreInstalledAppsContract,
   exploreInstalledAppUninstallContract,
 } from './console/explore'
-import { notificationContract } from './console/notification'
+import { notificationContract, notificationDismissContract } from './console/notification'
 import { systemFeaturesContract } from './console/system'
 import {
   triggerOAuthConfigContract,
@@ -69,6 +69,7 @@ export const consoleRouterContract = {
     bindPartnerStack: bindPartnerStackContract,
   },
   notification: notificationContract,
+  notificationDismiss: notificationDismissContract,
   triggers: {
     list: triggersContract,
     providerInfo: triggerProviderInfoContract,