diff --git a/client/api/DataCaches.ts b/client/api/DataCaches.ts
index f422a1a..325e883 100644
--- a/client/api/DataCaches.ts
+++ b/client/api/DataCaches.ts
@@ -1,5 +1,6 @@
 import data from "../Data.ts"
 import Client from "./Client.ts"
+import Chat from "./client_data/Chat.ts"
 import User from "./client_data/User.ts"
 
 export default class DataCaches {
@@ -16,4 +17,20 @@ export default class DataCaches {
         }
         return this.userProfiles[userId] = (re.data as unknown as User)
     }
+    static chatInfos: { [key: string]: Chat} = {}
+    static async getChatInfo(chatId: string): Promise<Chat> {
+        if (this.chatInfos[chatId]) return this.chatInfos[chatId]
+        const re = await Client.invoke('Chat.getInfo', {
+            token: data.access_token,
+            target: chatId,
+        })
+        if (re.code != 200) return {
+            id: '',
+            title: '',
+            type: '' as any,
+            is_admin: false,
+            is_member: false,
+        }
+        return this.chatInfos[chatId] = (re.data as unknown as Chat)
+    }
 }
\ No newline at end of file
diff --git a/client/ui/App.tsx b/client/ui/App.tsx
index c8e2694..9bc86b7 100644
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -25,6 +25,8 @@ import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
+import Message from "../api/client_data/Message.ts"
+import EventBus from "../EventBus.ts"
 
 declare global {
     namespace React {
@@ -112,11 +114,36 @@ export default function App() {
             setUserInfo(user)
         } else {
             setUserInfo(await DataCaches.getUserProfile(user))
-            
+
         }
         userProfileDialogRef.current!.open = true
     }
 
+    Notification.requestPermission()
+    React.useEffect(() => {
+        interface OnMessageData {
+            chat: string
+            msg: Message
+        }
+        async function onMessage(_event: unknown) {
+            EventBus.emit('RecentsList.updateRecents')
+
+            const event = _event as OnMessageData
+            if (currentChatId != event.chat) {
+                const chat = await DataCaches.getChatInfo(event.chat)
+                const user = await DataCaches.getUserProfile(event.msg.user_id)
+                new Notification(`${user.nickname} (对话: ${chat.title})`, {
+                    icon: getUrlForFileByHash(chat.avatar_file_hash),
+                    body: event.msg.text,
+                })
+            }
+        }
+        Client.on('Client.onMessage', onMessage)
+        return () => {
+            Client.off('Client.onMessage', onMessage)
+        }
+    }, [currentChatId])
+
     return (
         <div style={{
             display: "flex",
@@ -155,7 +182,7 @@ export default function App() {
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
-                
+
             <CreateGroupDialog
                 createGroupDialogRef={createGroupDialogRef} />
 
diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 66fe399..7fb616a 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -132,8 +132,6 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
             msg: Message
         }
         function callback(data: unknown) {
-            EventBus.emit('RecentsList.updateRecents')
-
             const { chat, msg } = (data as OnMessageData)
             if (target == chat) {
                 setMessagesList(messagesList.concat([msg]))
diff --git a/client/ui/custom-elements/chat-mention.ts b/client/ui/custom-elements/chat-mention.ts
new file mode 100644
index 0000000..e69de29