[RFC] Notification 系统通知

[kimteayon]

Motivation

随着MCP的广泛应用，同时智能体已具备执行长程任务的能力（类似manus），一个任务执行时间从之前简单交互的几秒钟到几十分钟，也有大概率执行小时级别的任务，系统级别的提示也是页面智能体应用的常用功能。

manus

Summary

新增notification 系统通知组件
description: 系统级别发送在页面外部显示的通知。

Motivation

在模型或智能体运行过程中，可推送系统级别通知，让用户随时掌握任务运行进展。

Detailed Design

核心能力

state:

1. permission：通知权限状态（hook&静态属性）

function：

1. requestPermission：请求权限：
2. open: 发送通知
3. close: 关闭通知

API Design

Type

type Notification = {
  permission: "denied"|"granted"|"default",
  requestPermission:  ()=>Promise<NotificationPermission>,
  open: (arg: TypeOpen)=>void,
  close:(key?:string)=>void,
}

type TypeOpen = NotificationOptions & {
  title: string; //通知标题
  key?: string | number; //唯一标识
  onClick?: (event: any, close?: Notification['close']) => void; //点击回调
  onClose?: any; //关闭回调
  onError?: any; // 错误回调
  onShow?: any;//展示回调
  duration?: number;// 默认自动关闭延时，单位秒 4.5
};

type NotificationOptions = {
 // 详细查看：https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification#options
 actiosn: {action:  string,title:string,icon?:string}[] // 要在通知中显示的一系列操作的数组，默认值为空数组。
 body: string //一个表示通知正文的字符串，显示在标题下方，默认值是一个空字符串。
 dir: "ltr" | "rtl" | "auto"  //  表示通知的方向。默认为 auto，即采用浏览器的语言设置行为，但你可以通过设置 ltr 和 rtl 的值来覆盖该行为（尽管大多数浏览器似乎会忽略这些设置）。
 icon: string // 一个包含要在通知中显示的图标的 URL 的字符串。
 slient: boolean; // 一个布尔值，用于指定通知是否静音（不发出声音或振动），无论设备设置如何。默认值为 null，表示遵循设备默认值。如果为 true，则 vibrate 参数不得指定。
 ....
}

type NotificationOptions详细查看🖐️

Hooks

 const [{ permission, requestPermission, open, close }] = notification.useNotification();

静态属性

// 权限状态
notification.permission;

静态方法

notification.requestPermission();
notification.open(arg: TypeOpen);
notification.close(key?:string|number)

Example Usage

Basic

// model.tsx
  function taskRun (){
    //await ...task run
    notification.open({
      title: '任务已完成',
      body: '已于13:12完成路线规划任务',
      key: 'key_123',
      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
      onClick: (event, close) => {
        console.log('onClick', event, close);
        close?.();
      },
      onClose: (event) => {
        console.log('onClose', event);
      },
      onError: (event) => {
        console.log('onError', event);
      },
      onShow: (event) => {
        console.log('onShow', event);
      },
    })
  }

// index.tsx
useEffect(()=>{
if(notification.permission === 'default'){
   notification.requestPermission();
}
   
},[])
 <Button
        onClick={() => {
         notification.close();
        }}
      >
        Close All
     </Button>

hook

import { notification } from '@ant-design/x';
import { Button, Flex } from 'antd';
import React from 'react';

const App = () => {
  const [{ permission, open, requestPermission }] = notification.useNotification();
  const info = () => {
    requestPermission();
  };

  const openClick = () => {
    open({
      title: '任务已完成',
      body: '已于13:12完成路线规划任务',
      key: '123',
      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
      onClick: (event, close) => {
        // todo somthing...
        close?.();
      },
      onClose: (event) => {
        console.log('onClose', event);
      },
      onError: (event) => {
        console.log('onError', event);
      },
      onShow: (event) => {
         // todo somthing..
        console.log('onShow', event);
      },
    });
  };
  return (
    <Flex gap="middle">
      <Button type="primary" onClick={info}>
        Request Permission ({permission})  // 获取权限 
      </Button>
      <Button type="primary" onClick={openClick}>
        Open a notification // 打开一个通知
      </Button>
      <Button
        onClick={() => {
          notification.close(); // 关闭通知
        }}
      >
        Close All
      </Button>
    </Flex>
  );
};

export default App;

[kimteayon]

onError 权限错误回调