From d370c5fbf256a60ae469c764260225ebc6863937 Mon Sep 17 00:00:00 2001
From: chenxuting <chenxuting@corp.netease.com>
Date: Sun, 29 Jan 2023 14:02:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20im=20ui=20kit=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/package-lock.json                       | 305 +++++-----
 react/package.json                            |   2 +-
 react/src/YXUIKit/chat-kit-ui/package.json    |  10 +-
 .../src/YXUIKit/chat-kit-ui/src/Container.tsx |  32 +-
 .../src/components/ChatCreateTeam/index.tsx   |   3 +-
 .../src/components/ChatMessageInput/index.tsx |  97 ++-
 .../ChatMessageInput/style/index.less         |  28 +-
 .../src/components/ChatMessageItem/index.tsx  | 347 ++++++-----
 .../ChatMessageItem/style/index.less          |   3 +-
 .../components/ChatP2pMessageList/index.tsx   |  18 +-
 .../ChatP2pMessageList/style/index.less       |   3 +-
 .../components/ChatTeamMessageList/index.tsx  |  21 +-
 .../ChatTeamMessageList/style/index.less      |   3 +-
 .../components/ChatTeamSetting/GroupItem.tsx  | 132 ++--
 .../components/ChatTeamSetting/GroupList.tsx  |  39 +-
 .../components/ChatTeamSetting/GroupPower.tsx |   2 +-
 .../src/components/ChatTeamSetting/index.tsx  |  44 +-
 .../ChatTeamSetting/style/index.less          |   9 +
 .../src/containers/p2pChatContainer.tsx       |  82 ++-
 .../src/containers/teamChatContainer.tsx      | 121 +++-
 react/src/YXUIKit/common-ui/package.json      |  10 +-
 .../src/components/CommonIcon/index.tsx       |   5 +-
 .../components/CommonParseSession/index.tsx   | 543 ++++++++++++-----
 .../CommonParseSession/style/index.less       |  77 ++-
 .../components/GroupAvatarSelect/index.tsx    |  12 +-
 .../GroupAvatarSelect/style/index.less        |   5 +
 .../src/components/MyUserCard/index.tsx       | 129 ++--
 .../components/MyUserCard/style/index.less    |   8 +-
 .../src/components/ReadPercent/index.tsx      |  85 +++
 .../components/ReadPercent/style/index.less   |  26 +
 .../src/components/ReadPercent/style/index.ts |   2 +
 .../components/ReadPercent/style/theme.less   |   3 +
 .../src/components/UserCard/index.tsx         |   4 +-
 .../common-ui/src/contextManager/Provider.tsx |  24 +-
 .../src/contextManager/store/connect.ts       |   6 +-
 .../src/contextManager/store/friends.ts       |  16 +-
 .../src/contextManager/store/index.ts         |   4 +-
 .../src/contextManager/store/msgs.ts          | 280 +++++++--
 .../contextManager/store/superTeamMembers.ts  |   3 +-
 .../src/contextManager/store/superTeams.ts    |   5 +-
 .../src/contextManager/store/sysMsgs.ts       |  80 ++-
 .../src/contextManager/store/teamMembers.ts   |  46 +-
 .../src/contextManager/store/teams.ts         |  33 +-
 .../common-ui/src/contextManager/store/ui.ts  | 221 ++++---
 .../src/contextManager/store/users.ts         |   3 +
 .../common-ui/src/contextManager/types.ts     |   2 -
 react/src/YXUIKit/common-ui/src/index.ts      |   6 +-
 react/src/YXUIKit/common-ui/src/locales/zh.ts |  86 +++
 react/src/YXUIKit/common-ui/src/utils.ts      | 109 ++++
 react/src/YXUIKit/contact-kit-ui/package.json |   8 +-
 .../src/contact-list/Container.tsx            |   2 +-
 .../contact-list/components/ContactItem.tsx   |   2 +-
 .../src/contact-list/style/contactItem.less   |   2 +-
 .../src/msg-list/components/MsgItem.tsx       | 562 +++++++++---------
 .../YXUIKit/conversation-kit-ui/package.json  |   8 +-
 .../src/components/ConversationItem.tsx       |  36 +-
 react/src/YXUIKit/im-kit-ui/package.json      |  18 +-
 react/src/YXUIKit/im-kit-ui/src/index.ts      |   2 +
 .../src/YXUIKit/im-kit-ui/src/style/index.ts  |   2 +
 react/src/YXUIKit/search-kit-ui/package.json  |  10 +-
 .../src/add/components/CreateModal/index.tsx  |   4 +-
 .../add/components/JoinTeamModal/index.tsx    |   7 +-
 .../search-kit-ui/src/add/style/addItem.less  |   2 -
 .../search-kit-ui/src/add/style/addList.less  |   1 -
 .../search-kit-ui/src/add/style/addModal.less |   2 +-
 .../src/add/style/createModal.less            |   8 +-
 .../IMApp/components/MenuOptions.tsx          |  99 +++
 .../src/components/IMApp/components/Menus.tsx |  53 ++
 .../components/IMApp/components/Setting.tsx   | 105 ++++
 react/src/components/IMApp/iconfont.css       |  11 +-
 react/src/components/IMApp/index.less         | 111 +++-
 react/src/components/IMApp/index.tsx          | 227 +++++--
 .../components/IMApp/locales/demo_locale.ts   |  31 +
 react/src/components/IMApp/locales/en.ts      | 278 +++++++++
 react/src/components/IMApp/locales/zh.ts      | 272 +++++++++
 react/src/pages/index.tsx                     |   5 +-
 vue/package-lock.json                         | 284 +++++----
 vue/package.json                              |   2 +-
 78 files changed, 3834 insertions(+), 1454 deletions(-)
 create mode 100644 react/src/YXUIKit/common-ui/src/components/ReadPercent/index.tsx
 create mode 100644 react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.less
 create mode 100644 react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.ts
 create mode 100644 react/src/YXUIKit/common-ui/src/components/ReadPercent/style/theme.less
 create mode 100644 react/src/components/IMApp/components/MenuOptions.tsx
 create mode 100644 react/src/components/IMApp/components/Menus.tsx
 create mode 100644 react/src/components/IMApp/components/Setting.tsx
 create mode 100644 react/src/components/IMApp/locales/demo_locale.ts
 create mode 100644 react/src/components/IMApp/locales/en.ts
 create mode 100644 react/src/components/IMApp/locales/zh.ts

diff --git a/react/package-lock.json b/react/package-lock.json
index be3e58d..7cf3bf5 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -6,7 +6,7 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
-        "@xkit-yx/im-kit-ui": "^0.2.3",
+        "@xkit-yx/im-kit-ui": "^0.3.1",
         "umi": "^4.0.40"
       },
       "devDependencies": {
@@ -2917,13 +2917,13 @@
       }
     },
     "node_modules/@xkit-yx/chat-kit-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.5.1.tgz",
-      "integrity": "sha512-Ma2ALiltf/WuLo468NZJFcTtilXBC2tZhiljX3TORVXH6UH9qoL3rkxkthbyCM807vnVkeCOqT9ZdhFEu9GKAQ==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.6.1.tgz",
+      "integrity": "sha512-DMrHqvE87uUL8YfSlIV6UvZS0nnRItLUIaR2YbU/OP3P2V6zOY3GwxVg8pspUBtiCOiUuzhtwa8h9sM5ZF/fKg==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -2942,12 +2942,12 @@
       }
     },
     "node_modules/@xkit-yx/common-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.5.1.tgz",
-      "integrity": "sha512-7U01KDM3gNE1SyhCUmtFTNcj2UeFlsuWjUU1jvuHZbK182ROmjkaY7qDWbu/zHNY3iyMYUy4O6TLhnzKiz5CTg==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.6.1.tgz",
+      "integrity": "sha512-EfmRzNRyNARtHH6IkP9JlB3WIpWSKbTdEnOnv4kvArJfK9tZBsWN3MDRbTvZ/CiDxxbdvg/5qq5ha2DHUpTJBg==",
       "dependencies": {
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -2965,12 +2965,12 @@
       }
     },
     "node_modules/@xkit-yx/contact-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-Y88CGslikOZ//BdB7kTwG/yHXmzFN7F1dInCMD/3JgAkKwjyugaKvr6JjKD7gMI6CEnrciX3OA8G6WTaYY1pcA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.4.1.tgz",
+      "integrity": "sha512-Lk+qTsWp9lCVzx0lic2B/DrqSJg5xMDE+PENKs0w1XgEOe5cSr48UD1RkftcbpIbmRV+GNx7Xk6fh/4eIdvjZw==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -2986,12 +2986,12 @@
       }
     },
     "node_modules/@xkit-yx/conversation-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-01OXeBhOdIqAZd0r5+IsncDkoWa8xubEeybjNlAMzsijld/c/FiqNyqIHEIAOz4Z8tszr/r9bE0OyTEQoSZiJA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.3.tgz",
+      "integrity": "sha512-rV/d5X/rpFw5Y+EBm95VnOA+S50GeorMR2HBGR1XYbzAFngFKd1AQrlS9f3ORfZAVene2BiFJqkO168IDeN8VQ==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -3007,12 +3007,12 @@
       }
     },
     "node_modules/@xkit-yx/core-kit": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.7.0.tgz",
-      "integrity": "sha512-6PlJUKcuZUnAe9glWM1dcZ3hXxC+htNa1yM76DQqGIlwPDFaP38QDCgQziH0OLvf/bSTaWkijdUR7HAoaV5xpg==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.8.0.tgz",
+      "integrity": "sha512-fQOM0LtXB4jDWRB6/ZmzPvDSrBUE++UvvLe79l6AvvUaPOpE688m1EqD8yfWNZgRtHH471VHQPQo20FLk9Mvtg==",
       "dependencies": {
         "@scaret/nertc-web-sdk": "4.6.252",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/utils": "^0.5.0",
         "@yxim/nim-web-sdk": "9.6.3",
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7",
@@ -3030,17 +3030,17 @@
       }
     },
     "node_modules/@xkit-yx/im-kit-ui": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.2.3.tgz",
-      "integrity": "sha512-hkjgS+3Jkbe83wSCLZzoS5le/lxOcUPiU7P6Q59tCeTdp8knjbMKjH3uVFxAe6J0s2dJWIYoIv6lag3WUhhC4w==",
-      "dependencies": {
-        "@xkit-yx/chat-kit-ui": "^0.5.1",
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/contact-kit-ui": "^0.3.1",
-        "@xkit-yx/conversation-kit-ui": "^0.3.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/search-kit-ui": "^0.4.1",
-        "@xkit-yx/utils": "^0.4.5",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.3.1.tgz",
+      "integrity": "sha512-4VUgYkmgf+9Jcj9S6ncQDzBTsXgrU6+kj5GO5Z7FSmLLaaRHxzEmIbE5QQ20zuBWzzphOvDpyjyumOZRAr/Xhw==",
+      "dependencies": {
+        "@xkit-yx/chat-kit-ui": "^0.6.1",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/contact-kit-ui": "^0.4.1",
+        "@xkit-yx/conversation-kit-ui": "^0.3.3",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/search-kit-ui": "^0.5.1",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -3061,13 +3061,13 @@
       }
     },
     "node_modules/@xkit-yx/search-kit-ui": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.4.1.tgz",
-      "integrity": "sha512-k5wSLyhYTchTEvFq1K5Py0vXPRewiRWGZv/GpGwcD5UXO6Bvc/A/2Si6t2bCWyClBUS3Wgvwn0+xUUiIfCwnHA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.5.1.tgz",
+      "integrity": "sha512-16i+g3ab/Im+M5CgKBelUjBEJ30IHq8TVC64p8gN/DQ8140Nl0BTOlESnjLt2qXDe3FV3tG3kaMbEGy97Q6TIg==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -3084,9 +3084,9 @@
       }
     },
     "node_modules/@xkit-yx/utils": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.4.5.tgz",
-      "integrity": "sha512-kdG4ywGUQicsTRRwg2E8xqHROf6VC0qlkwEOTDiVxMi4tteqS4I1qR27i5V7cnpu0n/dOFrsnC7QPL2lzdVmmg==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dzDVY0qrQXh1zbzhDN/gAfNbZ5shW33YRqeoXkE064Nwu6HT6ORFETzai1rn9bVf7uDfcOr2FdULXlvsKAj6LA==",
       "dependencies": {
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7"
@@ -3274,9 +3274,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "4.24.6",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.6.tgz",
-      "integrity": "sha512-x4tTXI3aOJukcG/MWQ7PdWHIqGEFInkKPhSHJpSiDvZI5BAvgLicW57WWhnBpJ6m9H9e9FRohC5FRJf0NIwsWQ==",
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.7.tgz",
+      "integrity": "sha512-Qr3AYkeqpd3i/c6M7pjca7Y6XlaIv/p6gD3aqe7/0o8Ueg50G7Aeh+TOaiUfXLGDhnVoNEdaVdDiv8aIaoWB5A==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -3312,7 +3312,7 @@
         "rc-steps": "~5.0.0-alpha.2",
         "rc-switch": "~3.2.0",
         "rc-table": "~7.26.0",
-        "rc-tabs": "~12.4.1",
+        "rc-tabs": "~12.5.0",
         "rc-textarea": "~0.4.5",
         "rc-tooltip": "~5.2.0",
         "rc-tree": "~5.7.0",
@@ -9978,17 +9978,16 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.1.tgz",
-      "integrity": "sha512-179weouypfjWJSRvvoo/vPy+StojsMzK2XC5jRNhL1ryt/N/8wAFESte8K6jZJkNp9DHDLFTe+dCGmikKpiFuA==",
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.2.tgz",
+      "integrity": "sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.2.8",
         "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
+        "rc-util": "^5.27.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -9996,9 +9995,9 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz",
-      "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.3.tgz",
+      "integrity": "sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -10109,13 +10108,13 @@
       }
     },
     "node_modules/rc-resize-observer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz",
-      "integrity": "sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.1.tgz",
+      "integrity": "sha512-g53PnWLeVOmt4XWkt2x+QlIdf/PhJSd7JqHhtMrUY370e7wJ+kxbgXicYqvENUcgFiiOiMCd07YsC2GNsoSbnA==",
       "dependencies": {
-        "@babel/runtime": "^7.10.1",
+        "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.15.0",
+        "rc-util": "^5.27.0",
         "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
@@ -10123,6 +10122,17 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-resize-observer/node_modules/@babel/runtime": {
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/rc-segmented": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.1.0.tgz",
@@ -10228,9 +10238,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.4.2.tgz",
-      "integrity": "sha512-FFlGwuTjQUznWzJtyhmHc6KAp5lRQFxKUv9Aj1UtsOYe2e7WGmuzcrd+/LQchuPe0VjhaZPdGkmFGcqGqNO6ow==",
+      "version": "12.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.5.6.tgz",
+      "integrity": "sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -10347,9 +10357,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.0.tgz",
-      "integrity": "sha512-lk9HnxVWdpGzkqs6OpZ+xxAHBefqy6+wT5LjSeBoaxzE0j5Tpq0Mf4TMc29B+Z0QP81yDvfgvp1O8oBxj70kEg==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.1.tgz",
+      "integrity": "sha512-PsjHA+f+KBCz+YTZxrl3ukJU5RoNKoe3KSNMh0xGiISbR67NaM9E9BiMjCwxa3AcCUOg/rZ+V0ZKLSimAA+e3w==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^16.12.0"
@@ -10383,9 +10393,9 @@
       }
     },
     "node_modules/rc-virtual-list/node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -14641,13 +14651,13 @@
       }
     },
     "@xkit-yx/chat-kit-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.5.1.tgz",
-      "integrity": "sha512-Ma2ALiltf/WuLo468NZJFcTtilXBC2tZhiljX3TORVXH6UH9qoL3rkxkthbyCM807vnVkeCOqT9ZdhFEu9GKAQ==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.6.1.tgz",
+      "integrity": "sha512-DMrHqvE87uUL8YfSlIV6UvZS0nnRItLUIaR2YbU/OP3P2V6zOY3GwxVg8pspUBtiCOiUuzhtwa8h9sM5ZF/fKg==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -14655,12 +14665,12 @@
       }
     },
     "@xkit-yx/common-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.5.1.tgz",
-      "integrity": "sha512-7U01KDM3gNE1SyhCUmtFTNcj2UeFlsuWjUU1jvuHZbK182ROmjkaY7qDWbu/zHNY3iyMYUy4O6TLhnzKiz5CTg==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.6.1.tgz",
+      "integrity": "sha512-EfmRzNRyNARtHH6IkP9JlB3WIpWSKbTdEnOnv4kvArJfK9tZBsWN3MDRbTvZ/CiDxxbdvg/5qq5ha2DHUpTJBg==",
       "requires": {
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -14668,36 +14678,36 @@
       }
     },
     "@xkit-yx/contact-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-Y88CGslikOZ//BdB7kTwG/yHXmzFN7F1dInCMD/3JgAkKwjyugaKvr6JjKD7gMI6CEnrciX3OA8G6WTaYY1pcA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.4.1.tgz",
+      "integrity": "sha512-Lk+qTsWp9lCVzx0lic2B/DrqSJg5xMDE+PENKs0w1XgEOe5cSr48UD1RkftcbpIbmRV+GNx7Xk6fh/4eIdvjZw==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/conversation-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-01OXeBhOdIqAZd0r5+IsncDkoWa8xubEeybjNlAMzsijld/c/FiqNyqIHEIAOz4Z8tszr/r9bE0OyTEQoSZiJA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.3.tgz",
+      "integrity": "sha512-rV/d5X/rpFw5Y+EBm95VnOA+S50GeorMR2HBGR1XYbzAFngFKd1AQrlS9f3ORfZAVene2BiFJqkO168IDeN8VQ==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/core-kit": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.7.0.tgz",
-      "integrity": "sha512-6PlJUKcuZUnAe9glWM1dcZ3hXxC+htNa1yM76DQqGIlwPDFaP38QDCgQziH0OLvf/bSTaWkijdUR7HAoaV5xpg==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.8.0.tgz",
+      "integrity": "sha512-fQOM0LtXB4jDWRB6/ZmzPvDSrBUE++UvvLe79l6AvvUaPOpE688m1EqD8yfWNZgRtHH471VHQPQo20FLk9Mvtg==",
       "requires": {
         "@scaret/nertc-web-sdk": "4.6.252",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/utils": "^0.5.0",
         "@yxim/nim-web-sdk": "9.6.3",
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7",
@@ -14706,39 +14716,39 @@
       }
     },
     "@xkit-yx/im-kit-ui": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.2.3.tgz",
-      "integrity": "sha512-hkjgS+3Jkbe83wSCLZzoS5le/lxOcUPiU7P6Q59tCeTdp8knjbMKjH3uVFxAe6J0s2dJWIYoIv6lag3WUhhC4w==",
-      "requires": {
-        "@xkit-yx/chat-kit-ui": "^0.5.1",
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/contact-kit-ui": "^0.3.1",
-        "@xkit-yx/conversation-kit-ui": "^0.3.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/search-kit-ui": "^0.4.1",
-        "@xkit-yx/utils": "^0.4.5",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.3.1.tgz",
+      "integrity": "sha512-4VUgYkmgf+9Jcj9S6ncQDzBTsXgrU6+kj5GO5Z7FSmLLaaRHxzEmIbE5QQ20zuBWzzphOvDpyjyumOZRAr/Xhw==",
+      "requires": {
+        "@xkit-yx/chat-kit-ui": "^0.6.1",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/contact-kit-ui": "^0.4.1",
+        "@xkit-yx/conversation-kit-ui": "^0.3.3",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/search-kit-ui": "^0.5.1",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/search-kit-ui": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.4.1.tgz",
-      "integrity": "sha512-k5wSLyhYTchTEvFq1K5Py0vXPRewiRWGZv/GpGwcD5UXO6Bvc/A/2Si6t2bCWyClBUS3Wgvwn0+xUUiIfCwnHA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.5.1.tgz",
+      "integrity": "sha512-16i+g3ab/Im+M5CgKBelUjBEJ30IHq8TVC64p8gN/DQ8140Nl0BTOlESnjLt2qXDe3FV3tG3kaMbEGy97Q6TIg==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/utils": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.4.5.tgz",
-      "integrity": "sha512-kdG4ywGUQicsTRRwg2E8xqHROf6VC0qlkwEOTDiVxMi4tteqS4I1qR27i5V7cnpu0n/dOFrsnC7QPL2lzdVmmg==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dzDVY0qrQXh1zbzhDN/gAfNbZ5shW33YRqeoXkE064Nwu6HT6ORFETzai1rn9bVf7uDfcOr2FdULXlvsKAj6LA==",
       "requires": {
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7"
@@ -14872,9 +14882,9 @@
       }
     },
     "antd": {
-      "version": "4.24.6",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.6.tgz",
-      "integrity": "sha512-x4tTXI3aOJukcG/MWQ7PdWHIqGEFInkKPhSHJpSiDvZI5BAvgLicW57WWhnBpJ6m9H9e9FRohC5FRJf0NIwsWQ==",
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.7.tgz",
+      "integrity": "sha512-Qr3AYkeqpd3i/c6M7pjca7Y6XlaIv/p6gD3aqe7/0o8Ueg50G7Aeh+TOaiUfXLGDhnVoNEdaVdDiv8aIaoWB5A==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -14910,7 +14920,7 @@
         "rc-steps": "~5.0.0-alpha.2",
         "rc-switch": "~3.2.0",
         "rc-table": "~7.26.0",
-        "rc-tabs": "~12.4.1",
+        "rc-tabs": "~12.5.0",
         "rc-textarea": "~0.4.5",
         "rc-tooltip": "~5.2.0",
         "rc-tree": "~5.7.0",
@@ -19626,23 +19636,22 @@
       }
     },
     "rc-menu": {
-      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.1.tgz",
-      "integrity": "sha512-179weouypfjWJSRvvoo/vPy+StojsMzK2XC5jRNhL1ryt/N/8wAFESte8K6jZJkNp9DHDLFTe+dCGmikKpiFuA==",
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.2.tgz",
+      "integrity": "sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.2.8",
         "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
+        "rc-util": "^5.27.0"
       }
     },
     "rc-motion": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz",
-      "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.3.tgz",
+      "integrity": "sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==",
       "requires": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -19716,14 +19725,24 @@
       }
     },
     "rc-resize-observer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz",
-      "integrity": "sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.1.tgz",
+      "integrity": "sha512-g53PnWLeVOmt4XWkt2x+QlIdf/PhJSd7JqHhtMrUY370e7wJ+kxbgXicYqvENUcgFiiOiMCd07YsC2GNsoSbnA==",
       "requires": {
-        "@babel/runtime": "^7.10.1",
+        "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.15.0",
+        "rc-util": "^5.27.0",
         "resize-observer-polyfill": "^1.5.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.20.13",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+          "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.11"
+          }
+        }
       }
     },
     "rc-segmented": {
@@ -19795,9 +19814,9 @@
       }
     },
     "rc-tabs": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.4.2.tgz",
-      "integrity": "sha512-FFlGwuTjQUznWzJtyhmHc6KAp5lRQFxKUv9Aj1UtsOYe2e7WGmuzcrd+/LQchuPe0VjhaZPdGkmFGcqGqNO6ow==",
+      "version": "12.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.5.6.tgz",
+      "integrity": "sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -19877,9 +19896,9 @@
       }
     },
     "rc-util": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.0.tgz",
-      "integrity": "sha512-lk9HnxVWdpGzkqs6OpZ+xxAHBefqy6+wT5LjSeBoaxzE0j5Tpq0Mf4TMc29B+Z0QP81yDvfgvp1O8oBxj70kEg==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.1.tgz",
+      "integrity": "sha512-PsjHA+f+KBCz+YTZxrl3ukJU5RoNKoe3KSNMh0xGiISbR67NaM9E9BiMjCwxa3AcCUOg/rZ+V0ZKLSimAA+e3w==",
       "requires": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^16.12.0"
@@ -19904,9 +19923,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.20.7",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-          "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+          "version": "7.20.13",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+          "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
           "requires": {
             "regenerator-runtime": "^0.13.11"
           }
diff --git a/react/package.json b/react/package.json
index 03295d6..0ba42a8 100644
--- a/react/package.json
+++ b/react/package.json
@@ -9,7 +9,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "@xkit-yx/im-kit-ui": "^0.2.3",
+    "@xkit-yx/im-kit-ui": "^0.3.1",
     "umi": "^4.0.40"
   },
   "devDependencies": {
diff --git a/react/src/YXUIKit/chat-kit-ui/package.json b/react/src/YXUIKit/chat-kit-ui/package.json
index b2e28a4..1c251c1 100644
--- a/react/src/YXUIKit/chat-kit-ui/package.json
+++ b/react/src/YXUIKit/chat-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/chat-kit-ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "聊天组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -55,13 +55,13 @@
     "react-string-replace": "^1.1.0"
   },
   "dependencies": {
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/core-kit": "^0.7.0",
-    "@xkit-yx/utils": "^0.4.5",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/core-kit": "^0.8.0",
+    "@xkit-yx/utils": "^0.5.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
     "react-string-replace": "^1.1.0"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/chat-kit-ui/src/Container.tsx b/react/src/YXUIKit/chat-kit-ui/src/Container.tsx
index c830201..46c1b39 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/Container.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/Container.tsx
@@ -1,7 +1,12 @@
 import React, { ReactNode } from 'react'
 import P2pChatContainer from './containers/p2pChatContainer'
 import TeamChatContainer from './containers/teamChatContainer'
-import { useStateContext, useEventTracking, Welcome } from '../../common-ui/src'
+import {
+  useStateContext,
+  useEventTracking,
+  Welcome,
+  Utils,
+} from '../../common-ui/src'
 import { TMsgScene } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
 import { RenderP2pCustomMessageOptions } from './components/ChatP2pMessageList'
 import { RenderTeamCustomMessageOptions } from './components/ChatTeamMessageList'
@@ -12,6 +17,7 @@ import { observer } from 'mobx-react'
 import packageJson from '../package.json'
 import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
+import { GroupItemProps } from './components/ChatTeamSetting/GroupItem'
 
 export interface ActionRenderProps extends ChatMessageInputProps {
   scene: TMsgScene
@@ -42,6 +48,14 @@ export interface ChatContainerProps {
     消息发送按钮组配置，不传使用默认的配置
     */
   actions?: Action[]
+  /**
+    是否需要显示 p2p 消息已读未读，默认 false
+    */
+  p2pMsgReceiptVisible?: boolean
+  /**
+    是否需要显示群组消息已读未读，默认 false
+    */
+  teamMsgReceiptVisible?: boolean
   /**
     发送文字消息的回调，一般用于默认的文字发送缺少想要的字段时
     */
@@ -84,9 +98,9 @@ export interface ChatContainerProps {
   /**
    自定义渲染群组成员 item
    */
-  renderTeamMemberItem?: (params: {
-    member: TeamMember & Partial<FriendProfile>
-  }) => JSX.Element | null | undefined
+  renderTeamMemberItem?: (
+    params: GroupItemProps
+  ) => JSX.Element | null | undefined
   /**
    样式前缀
    */
@@ -101,6 +115,8 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
   ({
     selectedSession,
     actions,
+    p2pMsgReceiptVisible = false,
+    teamMsgReceiptVisible = false,
     onSendText,
     renderEmpty,
     renderP2pCustomMessage,
@@ -108,6 +124,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
     renderHeader,
     renderP2pInputPlaceHolder,
     renderTeamInputPlaceHolder,
+    renderTeamMemberItem,
 
     prefix = 'chat',
     commonPrefix = 'common',
@@ -117,9 +134,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
     const finalSelectedSession =
       selectedSession || store.uiStore.selectedSession || ''
 
-    const scene = finalSelectedSession.split('-')[0] as TMsgScene
-
-    const to = finalSelectedSession.split('-')[1]
+    const { scene, to } = Utils.parseSessionId(finalSelectedSession)
 
     useEventTracking({
       appkey: initOptions.appkey,
@@ -135,6 +150,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
           commonPrefix={commonPrefix}
           scene={scene}
           to={to}
+          p2pMsgReceiptVisible={p2pMsgReceiptVisible}
           onSendText={onSendText}
           actions={actions}
           renderP2pCustomMessage={renderP2pCustomMessage}
@@ -147,11 +163,13 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
           commonPrefix={commonPrefix}
           scene={scene}
           to={to}
+          teamMsgReceiptVisible={teamMsgReceiptVisible}
           onSendText={onSendText}
           actions={actions}
           renderTeamCustomMessage={renderTeamCustomMessage}
           renderHeader={renderHeader}
           renderTeamInputPlaceHolder={renderTeamInputPlaceHolder}
+          renderTeamMemberItem={renderTeamMemberItem}
         />
       ) : null
     ) : renderEmpty ? (
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx
index 1aad9ef..0b6e3c2 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx
@@ -57,6 +57,7 @@ const GroupCreate: React.FC<GroupCreateProps> = ({
           ...values,
           selectedAccounts,
           avatar,
+          name: values.name.trim(),
         })
         resetState()
       })
@@ -89,7 +90,7 @@ const GroupCreate: React.FC<GroupCreateProps> = ({
       cancelText={t('cancelText')}
       okText={t('createButtonText')}
     >
-      <Form form={form}>
+      <Form form={form} labelCol={{ span: 5 }}>
         <Form.Item
           label={t('teamTitle')}
           name="name"
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx
index bd8b85e..fda4d80 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx
@@ -1,15 +1,25 @@
 import React, { useState, useRef, Fragment } from 'react'
 import { Input, Upload, Popover, message, Button, Spin } from 'antd'
-import { CommonIcon, Constant, useTranslation } from '../../../../common-ui/src'
+import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
+import {
+  CommonIcon,
+  Constant,
+  getMsgContentTipByType,
+  Utils,
+  useTranslation,
+  useStateContext,
+} from '../../../../common-ui/src'
 import { Action } from '../../Container'
 import { MAX_UPLOAD_FILE_SIZE } from '../../constant'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CloseOutlined } from '@ant-design/icons'
 import { TMsgScene } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
+import { observer } from 'mobx-react'
 
 const { TextArea } = Input
 export interface ChatMessageInputProps {
   prefix?: string
   placeholder?: string
+  replyMsg?: IMMessage
   scene: TMsgScene
   to: string
   actions?: Action[]
@@ -21,6 +31,7 @@ export interface ChatMessageInputProps {
   onSendText: (value: string) => void
   onSendFile: (file: File) => void
   onSendImg: (file: File) => void
+  onRemoveReplyMsg?: () => void
 }
 
 const mergeActions = (
@@ -40,27 +51,32 @@ const mergeActions = (
   })
 }
 
-const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
+const ChatMessageInput: React.FC<ChatMessageInputProps> = observer((props) => {
   const {
     prefix = 'chat',
     placeholder = '',
     actions,
+    scene,
+    to,
     mute = false,
     inputValue = '',
     uploadImageLoading = false,
     uploadFileLoading = false,
+    replyMsg,
     setInputValue,
     onSendText,
     onSendFile,
     onSendImg,
+    onRemoveReplyMsg,
   } = props
 
   const { t } = useTranslation()
+  const { store } = useStateContext()
   const _prefix = `${prefix}-message-input`
   const inputRef = useRef<any>(null)
   const [visible, setVisible] = useState<boolean>(false)
   const antIcon = <LoadingOutlined className={`${_prefix}-loading-spin`} spin />
-
+  const { EMOJI_ICON_MAP_CONFIG } = Utils.handleEmojiTranslate(t)
   const defaultActions: Action[] = [
     {
       action: 'emoji',
@@ -205,7 +221,7 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
 
   const emojiContent = (
     <>
-      {Object.keys(Constant.EMOJI_ICON_MAP_CONFIG).map((tag: string, index) => (
+      {Object.keys(EMOJI_ICON_MAP_CONFIG).map((tag: string, index) => (
         <span
           onClick={() => {
             onEmojiClickHandler(tag)
@@ -216,13 +232,22 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
         >
           <CommonIcon
             className={`${_prefix}-emoji-item-icon`}
-            type={Constant.EMOJI_ICON_MAP_CONFIG[tag]}
+            type={EMOJI_ICON_MAP_CONFIG[tag]}
           />
         </span>
       ))}
     </>
   )
 
+  const replyMsgContent = () => {
+    let content = `${t('replyText')} ${store.uiStore.getAppellation({
+      account: replyMsg?.from || '',
+      teamId: scene === 'team' ? to : '',
+    })}：`
+    content += replyMsg ? getMsgContentTipByType(replyMsg, t) : ''
+    return <div className={`${_prefix}-reply-content`}>{content}</div>
+  }
+
   // const isMute = useMemo(() => {
   //   return (teamInfo as ITeamInfo).mute && !isGroupOwner && !isGroupManager
   // }, [teamInfo, isGroupOwner, isGroupManager])
@@ -230,30 +255,39 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
   return (
     <div className={`${prefix}-message-input`}>
       <div className={`${_prefix}-wrap`}>
-        <TextArea
-          ref={inputRef}
-          bordered={false}
-          className={`${_prefix}-textarea`}
-          placeholder={placeholder}
-          value={inputValue}
-          disabled={mute}
-          onChange={onInputChangeHandler}
-          onPressEnter={onPressEnterHandler}
-          autoSize={{ maxRows: 2 }}
-        />
-        <div className={`${_prefix}-icon-box`}>
-          {finalActions.map((item) =>
-            item.render && item.visible ? (
-              <Fragment key={item.action}>
-                {item.render({
-                  ...props,
-                  prefix: _prefix,
-                })}
-              </Fragment>
-            ) : null
-          )}
-        </div>
-        {/* <div
+        {!!replyMsg && (
+          <div className={`${_prefix}-reply-wrap`}>
+            <div className={`${_prefix}-reply-container`}>
+              <CloseOutlined onClick={() => onRemoveReplyMsg?.()} />
+              {replyMsgContent()}
+            </div>
+          </div>
+        )}
+        <div className={`${_prefix}-content`}>
+          <TextArea
+            ref={inputRef}
+            bordered={false}
+            className={`${_prefix}-textarea`}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={mute}
+            onChange={onInputChangeHandler}
+            onPressEnter={onPressEnterHandler}
+            autoSize={{ maxRows: 2 }}
+          />
+          <div className={`${_prefix}-icon-box`}>
+            {finalActions.map((item) =>
+              item.render && item.visible ? (
+                <Fragment key={item.action}>
+                  {item.render({
+                    ...props,
+                    prefix: _prefix,
+                  })}
+                </Fragment>
+              ) : null
+            )}
+          </div>
+          {/* <div
         contentEditable="true"
         ref={divRef}
         className={`${_prefix}-textarea`}
@@ -262,9 +296,10 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
         }}
         onKeyUp={onPressEnterHandler}
       ></div> */}
+        </div>
       </div>
     </div>
   )
-}
+})
 
 export default ChatMessageInput
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less
index fe447a6..7d47562 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less
@@ -11,8 +11,32 @@
   background: @yx-primary-color;
   border: 1px solid @yx-border-color-4;
   border-radius: @yx-primary-border-radius;
-  display: flex;
-  position: relative;
+  .@{prefix-cls}-reply-wrap {
+    padding: 12px 15px 0;
+    .@{prefix-cls}-reply-container {
+      height: 30px;
+      background: @yx-background-color-6;
+      border-radius: @yx-primary-border-radius;
+      color: @yx-text-color-2;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      font-size: 12px;
+      .@{prefix-cls}-reply-content {
+        border-left: 1px solid @yx-border-color-4;
+        margin-left: 8px;
+        padding-left: 5px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+        flex: 1;
+      }
+    }
+  }
+  .@{prefix-cls}-content {
+    display: flex;
+    position: relative;
+  }
 
   // .@{prefix-cls}-msg-tip {
   //   position: absolute;
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/index.tsx
index 726f8cd..3421ae1 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/index.tsx
@@ -12,6 +12,8 @@ import {
   ComplexAvatarContainer,
   MyAvatarContainer,
   useTranslation,
+  CommonIcon,
+  useStateContext,
 } from '../../../../common-ui/src'
 import {
   // CopyOutlined,
@@ -19,8 +21,9 @@ import {
   DeleteOutlined,
 } from '@ant-design/icons'
 import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
+import { observer } from 'mobx-react'
 
-export type MenuItemKey = 'recall' | 'delete'
+export type MenuItemKey = 'recall' | 'delete' | 'reply'
 
 export interface MenuItem {
   show: 1 | 0
@@ -31,178 +34,220 @@ export interface MenuItem {
 
 export interface MessageItemProps {
   myAccount: string
-  alias?: string
+  teamId?: string
   msg: IMMessage
+  normalStatusRenderer?: React.ReactNode
+  msgs: IMMessage[]
   onResend: (msg: IMMessage) => void
   onReeditClick: (body: string) => void
   onMessageAction: (key: MenuItemKey, msg: IMMessage) => void
-
   prefix?: string
   commonPrefix?: string
 }
 
-export const ChatMessageItem: React.FC<MessageItemProps> = ({
-  alias,
-  msg,
-  myAccount,
-  onResend,
-  onMessageAction,
-  onReeditClick,
+export const ChatMessageItem: React.FC<MessageItemProps> = observer(
+  ({
+    teamId,
+    msg,
+    msgs,
+    myAccount,
+    normalStatusRenderer,
+    onResend,
+    onMessageAction,
+    onReeditClick,
+    prefix = 'chat',
+    commonPrefix = 'common',
+  }) => {
+    const { t } = useTranslation()
+    const { store } = useStateContext()
+    const _prefix = `${prefix}-message-list-item`
 
-  prefix = 'chat',
-  commonPrefix = 'common',
-}) => {
-  const { t } = useTranslation()
-  const _prefix = `${prefix}-message-list-item`
+    const { from, fromNick, body, attach, idClient, status, time, type, ext } =
+      msg
 
-  const { from, fromNick, body, attach, idClient, status, time, type } = msg
+    let replyMsg:
+      | Pick<
+          IMMessage,
+          'type' | 'body' | 'attach' | 'idClient' | 'fromNick' | 'from'
+        >
+      | undefined
+    if (ext) {
+      try {
+        const { yxReplyMsg } = JSON.parse(ext)
+        if (yxReplyMsg) {
+          replyMsg = msgs.find((m) => m.idClient === yxReplyMsg.idClient) ?? {
+            fromNick: yxReplyMsg.fromNick,
+            from: yxReplyMsg.from,
+            type: yxReplyMsg.type,
+            body: yxReplyMsg.body,
+            idClient: yxReplyMsg.idClient,
+          }
+        }
+      } catch {}
+    }
 
-  const isSelf = from === myAccount
+    const isSelf = from === myAccount
 
-  // 内存中插入的 msg 属性，具体内容参考 msg store
-  const {
-    type: attachType = '',
-    canRecall = false,
-    canEdit = false,
-    oldBody = '',
-  } = attach || { type: '', canRecall: false, canEdit: false, oldBody: '' }
+    // 内存中插入的 msg 属性，具体内容参考 msg store
+    const {
+      type: attachType = '',
+      canRecall = false,
+      canEdit = false,
+      oldBody = '',
+    } = attach || { type: '', canRecall: false, canEdit: false, oldBody: '' }
 
-  const renderSendStatus = () => {
-    if (status === 'sending') {
-      return <LoadingOutlined className={`${_prefix}-status-icon`} />
+    const renderSendStatus = () => {
+      if (status === 'sending') {
+        return <LoadingOutlined className={`${_prefix}-status-icon`} />
+      }
+      if (status === 'read') {
+        return <CheckCircleOutlined className={`${_prefix}-status-icon`} />
+      }
+      if (status === 'sendFailed') {
+        return (
+          <Tooltip title={t('sendMsgFailedText')}>
+            <ExclamationCircleFilled
+              className={`${_prefix}-status-icon-fail`}
+              onClick={() => onResend(msg)}
+            />
+          </Tooltip>
+        )
+      }
+      if (status === 'refused') {
+        return (
+          <Tooltip title={t('sendBlackFailedText')}>
+            <ExclamationCircleFilled
+              className={`${_prefix}-status-icon-fail`}
+              onClick={() => onResend(msg)}
+            />
+          </Tooltip>
+        )
+      }
+      return normalStatusRenderer || null
     }
-    if (status === 'read') {
-      return <CheckCircleOutlined className={`${_prefix}-status-icon`} />
+
+    const renderMsgDate = () => {
+      const date = moment(time)
+      const isCurrentDay = date.isSame(moment(), 'day')
+      const isCurrentYear = date.isSame(moment(), 'year')
+      return isCurrentDay
+        ? date.format('HH:mm:ss')
+        : isCurrentYear
+        ? date.format('MM-DD HH:mm:ss')
+        : date.format('YYYY-MM-DD HH:mm:ss')
     }
-    if (status === 'sendFailed') {
-      return (
-        <Tooltip title={t('sendMsgFailedText')}>
-          <ExclamationCircleFilled
-            className={`${_prefix}-status-icon-fail`}
-            onClick={() => onResend(msg)}
-          />
-        </Tooltip>
-      )
+    const renderMenuItmes = () => {
+      const menuItems: MenuItem[] = [
+        // {
+        //   label: '复制',
+        //   key: 'copy',
+        //   icon: <CopyOutlined />,
+        // },
+        {
+          show: canRecall ? 1 : 0,
+          label: t('recallText'),
+          key: 'recall',
+          icon: <RollbackOutlined />,
+        },
+        {
+          show: ['sending', 'sendFailed', 'refused', 'delete'].includes(status)
+            ? 0
+            : 1,
+          label: t('replyText'),
+          key: 'reply',
+          icon: <CommonIcon type="icon-huifu" />,
+        },
+        {
+          show: 1,
+          label: t('deleteText'),
+          key: 'delete',
+          icon: <DeleteOutlined />,
+        },
+      ]
+      return menuItems.filter((item) => item.show)
     }
-    if (status === 'refused') {
+
+    const renderSpecialMsg = () => {
       return (
-        <Tooltip title={t('sendBlackFailedText')}>
-          <ExclamationCircleFilled
-            className={`${_prefix}-status-icon-fail`}
-            onClick={() => onResend(msg)}
-          />
-        </Tooltip>
+        <div key={idClient} className={`${_prefix}-recall`}>
+          {attachType === 'reCallMsg' ? (
+            <>
+              {body}
+              {canEdit ? (
+                <span
+                  className={`${_prefix}-reedit`}
+                  onClick={() => onReeditClick(oldBody)}
+                >
+                  {t('reeditText')}
+                </span>
+              ) : null}
+            </>
+          ) : (
+            `${
+              isSelf
+                ? t('you')
+                : store.uiStore.getAppellation({ account: from, teamId })
+            } ${t('recallMessageText')}`
+          )}
+        </div>
       )
     }
-    return null
-  }
-
-  const renderMsgDate = () => {
-    const date = moment(time)
-    const isCurrentDay = date.isSame(moment(), 'day')
-    const isCurrentYear = date.isSame(moment(), 'year')
-    return isCurrentDay
-      ? date.format('HH:mm:ss')
-      : isCurrentYear
-      ? date.format('MM-DD HH:mm:ss')
-      : date.format('YYYY-MM-DD HH:mm:ss')
-  }
 
-  const renderMenuItmes = () => {
-    const menuItems: MenuItem[] = [
-      // {
-      //   label: '复制',
-      //   key: 'copy',
-      //   icon: <CopyOutlined />,
-      // },
-      {
-        show: canRecall ? 1 : 0,
-        label: t('recallText'),
-        key: 'recall',
-        icon: <RollbackOutlined />,
-      },
-      {
-        show: 1,
-        label: t('deleteText'),
-        key: 'delete',
-        icon: <DeleteOutlined />,
-      },
-    ]
-    return menuItems.filter((item) => item.show)
-  }
-
-  const renderSpecialMsg = () => {
-    return (
-      <div key={idClient} className={`${_prefix}-recall`}>
-        {attachType === 'reCallMsg' ? (
-          <>
-            {body}
-            {canEdit ? (
-              <span
-                className={`${_prefix}-reedit`}
-                onClick={() => onReeditClick(oldBody)}
-              >
-                {t('reeditText')}
-              </span>
-            ) : null}
-          </>
-        ) : (
-          body
-        )}
-      </div>
-    )
-  }
-
-  return attachType === 'reCallMsg' || attachType === 'beReCallMsg' ? (
-    renderSpecialMsg()
-  ) : type === 'notification' ? (
-    <ParseSession msg={msg} prefix={commonPrefix} />
-  ) : (
-    <div
-      className={classNames(`${_prefix}-wrap`, {
-        [`${_prefix}-self`]: isSelf,
-      })}
-    >
-      <div className={`${_prefix}-avatar`}>
-        {isSelf ? (
-          <MyAvatarContainer prefix={commonPrefix} canClick={false} />
-        ) : (
-          <ComplexAvatarContainer prefix={commonPrefix} account={from} />
-        )}
-      </div>
-      <Dropdown
-        key={idClient}
-        trigger={['contextMenu']}
-        overlay={
-          <Menu
-            onClick={({ key }) => onMessageAction(key as MenuItemKey, msg)}
-            items={renderMenuItmes()}
-          />
-        }
+    return attachType === 'reCallMsg' || attachType === 'beReCallMsg' ? (
+      renderSpecialMsg()
+    ) : type === 'notification' ? (
+      <ParseSession replyMsg={replyMsg} msg={msg} prefix={commonPrefix} />
+    ) : (
+      <div
+        className={classNames(`${_prefix}-wrap`, {
+          [`${_prefix}-self`]: isSelf,
+        })}
       >
-        <div className={`${_prefix}-content-box`}>
-          <div className={`${_prefix}-nick`}>
-            {isSelf ? fromNick || from : alias || fromNick || from}
-          </div>
-          <div className={`${_prefix}-content`}>
-            {isSelf && (
-              <div className={`${_prefix}-status`}>{renderSendStatus()}</div>
-            )}
-            <div className={`${_prefix}-body`}>
-              <ParseSession msg={msg} prefix={commonPrefix} />
+        <div className={`${_prefix}-avatar`}>
+          {isSelf ? (
+            <MyAvatarContainer prefix={commonPrefix} canClick={false} />
+          ) : (
+            <ComplexAvatarContainer prefix={commonPrefix} account={from} />
+          )}
+        </div>
+        <Dropdown
+          key={idClient}
+          trigger={['contextMenu']}
+          overlay={
+            <Menu
+              onClick={({ key }) => onMessageAction(key as MenuItemKey, msg)}
+              items={renderMenuItmes()}
+            />
+          }
+        >
+          <div className={`${_prefix}-content-box`}>
+            <div className={`${_prefix}-nick`}>
+              {store.uiStore.getAppellation({ account: from, teamId })}
+            </div>
+            <div className={`${_prefix}-content`}>
+              {isSelf && (
+                <div className={`${_prefix}-status`}>{renderSendStatus()}</div>
+              )}
+              <div className={`${_prefix}-body`}>
+                <ParseSession
+                  replyMsg={replyMsg}
+                  msg={msg}
+                  prefix={commonPrefix}
+                />
+              </div>
+            </div>
+            <div
+              className={classNames(`${_prefix}-date`, {
+                [`${_prefix}-date-self`]: isSelf,
+              })}
+            >
+              {renderMsgDate()}
             </div>
           </div>
-          <div
-            className={classNames(`${_prefix}-date`, {
-              [`${_prefix}-date-self`]: isSelf,
-            })}
-          >
-            {renderMsgDate()}
-          </div>
-        </div>
-      </Dropdown>
-    </div>
-  )
-}
+        </Dropdown>
+      </div>
+    )
+  }
+)
 
 export default ChatMessageItem
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/style/index.less
index 05d6ed9..f406e24 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/style/index.less
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageItem/style/index.less
@@ -44,7 +44,8 @@
       word-wrap: break-word;
       white-space: break-spaces;
       line-height: 22px;
-      padding: 12px 16px;
+      // padding: 12px 16px;
+      overflow: hidden;
       max-width: 442px;
       min-width: 50px;
       border-radius: 0 @yx-border-radius-12 @yx-border-radius-12
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/index.tsx
index 2c516cd..7e0ce5e 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/index.tsx
@@ -3,7 +3,7 @@ import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterfa
 import MessageListItem, { MessageItemProps } from '../ChatMessageItem'
 import { Alert, Spin } from 'antd'
 import { ArrowDownOutlined } from '@ant-design/icons'
-import { useTranslation } from '../../../../common-ui/src'
+import { useTranslation, ReadPercent } from '../../../../common-ui/src'
 import { NimKitCoreTypes } from '@xkit-yx/core-kit'
 
 export interface RenderP2pCustomMessageOptions
@@ -15,6 +15,7 @@ export interface ChatP2pMessageListProps
   extends Omit<MessageItemProps, 'msg' | 'alias'> {
   msgs: IMMessage[]
   member: NimKitCoreTypes.IFriendInfo
+  p2pMsgReceiptVisible?: boolean
   renderP2pCustomMessage?: (
     options: RenderP2pCustomMessageOptions
   ) => JSX.Element | null | undefined
@@ -23,6 +24,7 @@ export interface ChatP2pMessageListProps
   receiveMsgBtnVisible?: boolean
   strangerNotiVisible?: boolean
   strangerNotiText?: string
+  msgReceiptTime?: number
   onReceiveMsgBtnClick?: () => void
   onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void
 }
@@ -34,9 +36,11 @@ const ChatP2pMessageList = forwardRef<HTMLDivElement, ChatP2pMessageListProps>(
       commonPrefix = 'common',
       msgs,
       member,
+      p2pMsgReceiptVisible,
       receiveMsgBtnVisible = false,
       strangerNotiVisible = false,
       strangerNotiText = '',
+      msgReceiptTime = 0,
       onReceiveMsgBtnClick,
       loadingMore,
       noMore,
@@ -62,6 +66,7 @@ const ChatP2pMessageList = forwardRef<HTMLDivElement, ChatP2pMessageListProps>(
           {msgs.map((msg) => {
             const msgItem = renderP2pCustomMessage?.({
               msg,
+              msgs,
               member,
               onResend,
               onReeditClick,
@@ -71,8 +76,17 @@ const ChatP2pMessageList = forwardRef<HTMLDivElement, ChatP2pMessageListProps>(
                 key={msg.idClient}
                 prefix={prefix}
                 commonPrefix={commonPrefix}
+                msgs={msgs}
                 msg={msg}
-                alias={member.alias}
+                normalStatusRenderer={
+                  p2pMsgReceiptVisible ? (
+                    <ReadPercent
+                      unread={msg.time <= msgReceiptTime ? 0 : 1}
+                      read={msg.time <= msgReceiptTime ? 1 : 0}
+                      prefix={commonPrefix}
+                    />
+                  ) : null
+                }
                 myAccount={myAccount}
                 onResend={onResend}
                 onMessageAction={onMessageAction}
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/style/index.less
index 252fb45..37a8bf5 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/style/index.less
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatP2pMessageList/style/index.less
@@ -21,11 +21,10 @@
 
   &-tobottom {
     position: absolute;
-    width: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 5px 0;
+    padding: 5px 10px;
     bottom: 100px;
     left: calc((100% - 150px) / 2);
     color: @yx-primary-text-color;
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/index.tsx
index 7cf1d25..da60cb9 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/index.tsx
@@ -4,7 +4,7 @@ import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInter
 import MessageListItem, { MessageItemProps } from '../ChatMessageItem'
 import { Alert, Spin } from 'antd'
 import { ArrowDownOutlined } from '@ant-design/icons'
-import { useTranslation } from '../../../../common-ui/src'
+import { ReadPercent, useTranslation } from '../../../../common-ui/src'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
 
 export interface RenderTeamCustomMessageOptions
@@ -15,7 +15,9 @@ export interface RenderTeamCustomMessageOptions
 export interface ChatTeamMessageListProps
   extends Omit<MessageItemProps, 'msg' | 'alias'> {
   msgs: IMMessage[]
+  teamId: string
   members: (TeamMember & Partial<FriendProfile>)[]
+  teamMsgReceiptVisible?: boolean
   renderTeamCustomMessage?: (
     options: RenderTeamCustomMessageOptions
   ) => JSX.Element | null | undefined
@@ -37,7 +39,9 @@ const ChatTeamMessageList = forwardRef<
       prefix = 'chat',
       commonPrefix = 'common',
       msgs,
+      teamId,
       members,
+      teamMsgReceiptVisible,
       receiveMsgBtnVisible = false,
       strangerNotiVisible = false,
       strangerNotiText = '',
@@ -66,7 +70,9 @@ const ChatTeamMessageList = forwardRef<
           {msgs.map((msg) => {
             const msgItem = renderTeamCustomMessage?.({
               msg,
+              msgs,
               members,
+              teamId,
               onResend,
               onReeditClick,
               onMessageAction,
@@ -76,7 +82,18 @@ const ChatTeamMessageList = forwardRef<
                 prefix={prefix}
                 commonPrefix={commonPrefix}
                 msg={msg}
-                alias={members.find((item) => item.account === msg.from)?.alias}
+                msgs={msgs}
+                teamId={teamId}
+                normalStatusRenderer={
+                  teamMsgReceiptVisible ? (
+                    <ReadPercent
+                      unread={msg.attach?.yxUnread || 0}
+                      read={msg.attach?.yxRead || 0}
+                      hoverable
+                      prefix={commonPrefix}
+                    />
+                  ) : null
+                }
                 myAccount={myAccount}
                 onResend={onResend}
                 onMessageAction={onMessageAction}
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/style/index.less
index aff8dc1..eecc00b 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/style/index.less
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamMessageList/style/index.less
@@ -20,11 +20,10 @@
 
   &-tobottom {
     position: absolute;
-    width: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 5px 0;
+    padding: 5px 10px;
     bottom: 100px;
     left: calc((100% - 150px) / 2);
     color: @yx-primary-text-color;
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupItem.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupItem.tsx
index 3069051..86c8401 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupItem.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupItem.tsx
@@ -1,9 +1,14 @@
 import React, { FC, useState } from 'react'
 import { Modal } from 'antd'
 import classnames from 'classnames'
-import { ComplexAvatarContainer, useTranslation } from '../../../../common-ui/src'
+import {
+  ComplexAvatarContainer,
+  useTranslation,
+  useStateContext,
+} from '../../../../common-ui/src'
 import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
+import { observer } from 'mobx-react'
 
 export interface GroupItemProps {
   member: TeamMember & Partial<FriendProfile>
@@ -18,67 +23,74 @@ export interface GroupItemProps {
 
 const { confirm } = Modal
 
-export const GroupItem: FC<GroupItemProps> = ({
-  member,
-  onRemoveTeamMemberClick,
-  afterSendMsgClick,
-  hasPower,
-  isSelf,
+export const GroupItem: FC<GroupItemProps> = observer(
+  ({
+    member,
+    onRemoveTeamMemberClick,
+    afterSendMsgClick,
+    hasPower,
+    isSelf,
 
-  prefix = 'chat',
-  commonPrefix = 'common',
-}) => {
-  const _prefix = `${prefix}-group-item`
+    prefix = 'chat',
+    commonPrefix = 'common',
+  }) => {
+    const _prefix = `${prefix}-group-item`
 
-  const { t } = useTranslation()
+    const { t } = useTranslation()
 
-  const [isActive, setIsActive] = useState(false)
+    const { store } = useStateContext()
 
-  return (
-    <div
-      className={classnames(
-        `${_prefix}-wrap`,
-        `${isActive ? `${_prefix}-active` : ''}`
-      )}
-      onMouseOver={() => {
-        setIsActive(true)
-      }}
-      onMouseLeave={() => setIsActive(false)}
-    >
-      <div className={`${_prefix}-avatar-box`}>
-        <ComplexAvatarContainer
-          prefix={commonPrefix}
-          afterSendMsgClick={afterSendMsgClick}
-          canClick={!isSelf}
-          account={member.account}
-        />
-        <span className={`${_prefix}-label`}>
-          {member.nickInTeam || member.alias || member.account}
-        </span>
+    const [isActive, setIsActive] = useState(false)
+
+    return (
+      <div
+        className={classnames(
+          `${_prefix}-wrap`,
+          `${isActive ? `${_prefix}-active` : ''}`
+        )}
+        onMouseOver={() => {
+          setIsActive(true)
+        }}
+        onMouseLeave={() => setIsActive(false)}
+      >
+        <div className={`${_prefix}-avatar-box`}>
+          <ComplexAvatarContainer
+            prefix={commonPrefix}
+            afterSendMsgClick={afterSendMsgClick}
+            canClick={!isSelf}
+            account={member.account}
+          />
+          <span className={`${_prefix}-label`}>
+            {store.uiStore.getAppellation({
+              account: member.account,
+              teamId: member.teamId,
+            })}
+          </span>
+        </div>
+        {isActive && hasPower && !isSelf ? (
+          <a
+            type="link"
+            className={`${_prefix}-remove-member`}
+            onClick={() => {
+              confirm({
+                content: t('removeTeamMemberConfirmText'),
+                okText: t('okText'),
+                cancelText: t('cancelText'),
+                okType: 'danger',
+                onOk() {
+                  onRemoveTeamMemberClick(member)
+                },
+              })
+            }}
+          >
+            {t('removeTeamMemberText')}
+          </a>
+        ) : member.type === 'owner' ? (
+          <span className={`${_prefix}-owner`}>{t('teamOwnerText')}</span>
+        ) : member.type === 'manager' ? (
+          <span className={`${_prefix}-owner`}>{t('teamManagerText')}</span>
+        ) : null}
       </div>
-      {isActive && hasPower && !isSelf ? (
-        <a
-          type="link"
-          className={`${_prefix}-remove-member`}
-          onClick={() => {
-            confirm({
-              content: t('removeTeamMemberConfirmText'),
-              okText: t('okText'),
-              cancelText: t('cancelText'),
-              okType: 'danger',
-              onOk() {
-                onRemoveTeamMemberClick(member)
-              },
-            })
-          }}
-        >
-          {t('removeTeamMemberText')}
-        </a>
-      ) : member.type === 'owner' ? (
-        <span className={`${_prefix}-owner`}>{t('teamOwnerText')}</span>
-      ) : member.type === 'manager' ? (
-        <span className={`${_prefix}-owner`}>{t('teamManagerText')}</span>
-      ) : null}
-    </div>
-  )
-}
+    )
+  }
+)
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupList.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupList.tsx
index 19a1c6a..6c7ae48 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupList.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupList.tsx
@@ -1,17 +1,17 @@
 import React, { FC } from 'react'
-import { GroupItem } from './GroupItem'
+import { GroupItem, GroupItemProps } from './GroupItem'
 import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
 
-interface GroupListProps {
+export interface GroupListProps {
   myAccount: string
   members: (TeamMember & Partial<FriendProfile>)[]
   hasPower: boolean
   onRemoveTeamMemberClick: (member: TeamMember) => void
   afterSendMsgClick?: () => void
-  renderTeamMemberItem?: (params: {
-    member: TeamMember & Partial<FriendProfile>
-  }) => JSX.Element | null | undefined
+  renderTeamMemberItem?: (
+    params: GroupItemProps
+  ) => JSX.Element | null | undefined
 
   prefix?: string
   commonPrefix?: string
@@ -32,21 +32,22 @@ const GroupList: FC<GroupListProps> = ({
 
   return (
     <div className={`${_prefix}-wrap`}>
-      {members.map(
-        (item) =>
-          renderTeamMemberItem?.({ member: item }) ?? (
-            <GroupItem
-              key={item.account}
-              member={item}
-              hasPower={hasPower}
-              isSelf={item.account === myAccount}
-              prefix={prefix}
-              commonPrefix={commonPrefix}
-              onRemoveTeamMemberClick={onRemoveTeamMemberClick}
-              afterSendMsgClick={afterSendMsgClick}
-            />
+      {members.map((item) => {
+        const itemProps = {
+          member: item,
+          onRemoveTeamMemberClick,
+          afterSendMsgClick,
+          hasPower,
+          isSelf: item.account === myAccount,
+          prefix,
+          commonPrefix,
+        }
+        return (
+          renderTeamMemberItem?.(itemProps) ?? (
+            <GroupItem key={item.account} {...itemProps} />
           )
-      )}
+        )
+      })}
     </div>
   )
 }
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupPower.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupPower.tsx
index 9cb693f..43c0808 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupPower.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/GroupPower.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { useTranslation } from '../../../../common-ui/src'
 import { Team } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 
-interface GroupPowerProps {
+export interface GroupPowerProps {
   onUpdateTeamInfo: (team: Partial<Team>) => void
   onTeamMuteChange: (mute: boolean) => void
   team: Team
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/index.tsx
index 354038a..6fd4ed2 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/index.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState, useEffect, useMemo } from 'react'
-import { Modal, Button } from 'antd'
+import { Modal, Button, Input } from 'antd'
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { RightOutlined, PlusOutlined } from '@ant-design/icons'
 import {
@@ -16,6 +16,8 @@ import {
   TeamMember,
 } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
+import { UpdateMyMemberInfoOptions } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
+import { GroupItemProps } from './GroupItem'
 
 export interface HistoryStack {
   path: GroupSettingType
@@ -35,12 +37,13 @@ export interface ChatTeamSettingProps {
   onAddMembersClick: () => void
   onRemoveTeamMemberClick: (member: TeamMember) => void
   onUpdateTeamInfo: (team: Partial<Team>) => void
+  onUpdateMyMemberInfo: (params: UpdateMyMemberInfoOptions) => void
   onTeamMuteChange: (mute: boolean) => void
   afterSendMsgClick?: () => void
   setNavHistoryStack: (stack: HistoryStack[]) => void
-  renderTeamMemberItem?: (params: {
-    member: TeamMember & Partial<FriendProfile>
-  }) => JSX.Element | null | undefined
+  renderTeamMemberItem?: (
+    params: GroupItemProps
+  ) => JSX.Element | null | undefined
 
   prefix?: string
   commonPrefix?: string
@@ -61,6 +64,7 @@ const ChatTeamSetting: FC<ChatTeamSettingProps> = ({
   onAddMembersClick,
   onRemoveTeamMemberClick,
   onUpdateTeamInfo,
+  onUpdateMyMemberInfo,
   onTeamMuteChange,
   afterSendMsgClick,
   setNavHistoryStack,
@@ -71,6 +75,7 @@ const ChatTeamSetting: FC<ChatTeamSettingProps> = ({
 }) => {
   const { t } = useTranslation()
   const _prefix = `${prefix}-group-setting`
+  const [nickInTeam, setNickInTeam] = useState('')
 
   const path = navHistoryStack[navHistoryStack.length - 1]?.path || 'home'
 
@@ -94,6 +99,17 @@ const ChatTeamSetting: FC<ChatTeamSettingProps> = ({
     )
   }
 
+  const handleChangeNickInTeam = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNickInTeam(e.target.value.trim())
+  }
+
+  const handleUpdateMyMemberInfo = (e: React.FocusEvent<HTMLInputElement>) => {
+    onUpdateMyMemberInfo({
+      teamId: team.teamId,
+      nickInTeam,
+    })
+  }
+
   const showDismissConfirm = () => {
     confirm({
       title: t('dismissTeamText'),
@@ -138,6 +154,14 @@ const ChatTeamSetting: FC<ChatTeamSettingProps> = ({
     return [...owner, ...manager, ...other]
   }, [members])
 
+  const myMemberInfo = useMemo(() => {
+    return members.find((item) => item.account === myAccount)
+  }, [myAccount, members])
+
+  useEffect(() => {
+    setNickInTeam(myMemberInfo?.nickInTeam || '')
+  }, [myMemberInfo?.nickInTeam])
+
   useEffect(() => {
     if (!navHistoryStack.length) {
       handleStackPush('home')
@@ -196,6 +220,18 @@ const ChatTeamSetting: FC<ChatTeamSettingProps> = ({
               })}
             </div>
           </div>
+          <div className={`${_prefix}-item`}>
+            <b>{t('nickInTeamText')}</b>
+            <Input
+              className={`${_prefix}-nickinteam`}
+              value={nickInTeam}
+              allowClear
+              maxLength={15}
+              onChange={handleChangeNickInTeam}
+              onBlur={handleUpdateMyMemberInfo}
+              placeholder={t('editNickInTeamText')}
+            />
+          </div>
           {team.type !== 'normal' ? (
             <div
               className={`${_prefix}-power ${_prefix}-item`}
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/style/index.less
index 4656cce..b4b7579 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/style/index.less
+++ b/react/src/YXUIKit/chat-kit-ui/src/components/ChatTeamSetting/style/index.less
@@ -83,4 +83,13 @@
     transform: translateX(-50%);
     border-radius: @yx-primary-border-radius;
   }
+
+  .@{prefix-cls}-nickinteam {
+    margin-top: 16px;
+    background-color: @yx-background-color-6;
+    border-color: @yx-background-color-6;
+    .@{ant-prefix}-input {
+      background-color: @yx-background-color-6;
+    }
+  }
 }
diff --git a/react/src/YXUIKit/chat-kit-ui/src/containers/p2pChatContainer.tsx b/react/src/YXUIKit/chat-kit-ui/src/containers/p2pChatContainer.tsx
index 74a8cb9..e5f4e18 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/containers/p2pChatContainer.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/containers/p2pChatContainer.tsx
@@ -22,7 +22,7 @@ import {
 import { Action } from '../Container'
 import ChatP2pSetting from '../components/ChatP2pSetting'
 import { Session } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/SessionServiceInterface'
-import { debounce } from '@xkit-yx/utils'
+import { debounce, VisibilityObserver } from '@xkit-yx/utils'
 import {
   IMMessage,
   TMsgScene,
@@ -36,6 +36,7 @@ export interface P2pChatContainerProps {
   scene: TMsgScene
   to: string
   actions?: Action[]
+  p2pMsgReceiptVisible?: boolean
   onSendText?: (data: {
     value: string
     scene: TMsgScene
@@ -56,6 +57,7 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
     scene,
     to,
     actions,
+    p2pMsgReceiptVisible,
     onSendText: onSendTextFromProps,
     renderP2pCustomMessage,
     renderHeader,
@@ -74,6 +76,8 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
 
     const msgs = store.msgStore.getMsg(sessionId)
 
+    const replyMsg = store.msgStore.replyMsgs.get(sessionId)
+
     const user = store.uiStore.getFriendWithUserNameCard(to)
 
     const myUser = store.userStore.myUserInfo
@@ -85,6 +89,12 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
     const messageListContainerDomRef = useRef<HTMLDivElement>(null)
     const settingDrawDomRef = useRef<HTMLDivElement>(null)
 
+    const visibilityObserver = useMemo(() => {
+      return new VisibilityObserver({
+        root: messageListContainerDomRef.current,
+      })
+    }, [to])
+
     // 以下是 UI 相关的 state，需要在切换会话时重置
     const [action, setAction] = useState<ChatAction | undefined>(undefined)
     const [inputValue, setInputValue] = useState('')
@@ -194,6 +204,10 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       }
     }
 
+    const onRemoveReplyMsg = () => {
+      replyMsg && store.msgStore.reomveReplyMsgActive(replyMsg.sessionId)
+    }
+
     const onMessageAction = async (key: MenuItemKey, msg: IMMessage) => {
       switch (key) {
         case 'delete':
@@ -202,6 +216,8 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
         case 'recall':
           await store.msgStore.reCallMsgActive(msg)
           break
+        case 'reply':
+          await store.msgStore.replyMsgActive(msg)
         default:
           break
       }
@@ -271,6 +287,64 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       }
     }
 
+    useEffect(() => {
+      const notMyMsgs = msgs
+        .filter((item) => item.from !== myUser.account)
+        .filter((item) => !!item.idServer)
+        .filter((item) =>
+          // 以下这些类型的消息不需要发送已读未读
+          ['notification', 'tip', 'robot', 'g2'].every((j) => j !== item.type)
+        )
+
+      const visibleChangeHandler = (params: {
+        visible: boolean
+        target: HTMLElement
+      }) => {
+        if (params.visible) {
+          // 发送已读
+          const msg = notMyMsgs.find(
+            (item) => item.idClient === params.target.id
+          )
+          if (msg) {
+            store.msgStore.sendMsgReceiptActive(msg).finally(() => {
+              visibilityObserver.unobserve(params.target)
+            })
+          }
+        }
+      }
+
+      const handler = (isObserve: boolean) => {
+        notMyMsgs.forEach((item) => {
+          const target = document.getElementById(item.idClient)
+          if (target) {
+            if (isObserve) {
+              visibilityObserver.observe(target)
+            } else {
+              visibilityObserver.unobserve(target)
+            }
+          }
+        })
+
+        if (isObserve) {
+          visibilityObserver.on('visibleChange', visibleChangeHandler)
+        } else {
+          visibilityObserver.off('visibleChange', visibleChangeHandler)
+        }
+      }
+
+      handler(true)
+
+      return () => {
+        handler(false)
+      }
+    }, [store.msgStore, msgs, visibilityObserver, myUser.account])
+
+    useEffect(() => {
+      return () => {
+        visibilityObserver.destroy()
+      }
+    }, [visibilityObserver])
+
     // 切换会话时需要重新初始化
     useEffect(() => {
       resetState()
@@ -327,6 +401,7 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
             ref={messageListContainerDomRef}
             msgs={msgs}
             member={user}
+            p2pMsgReceiptVisible={p2pMsgReceiptVisible}
             noMore={noMore}
             loadingMore={loadingMore}
             myAccount={myUser?.account || ''}
@@ -335,6 +410,7 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
               store.uiStore.selectedP2PSessionRelation === 'stranger'
             }
             strangerNotiText={`${userNickOrAccount} ${t('strangerNotiText')}`}
+            msgReceiptTime={session?.msgReceiptTime}
             onReceiveMsgBtnClick={scrollToBottom}
             onResend={onResend}
             onMessageAction={onMessageAction}
@@ -350,6 +426,7 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
                 ? renderP2pInputPlaceHolder(session!)
                 : `${t('sendToText')} ${userNickOrAccount}${t('sendUsageText')}`
             }
+            replyMsg={replyMsg}
             scene={scene}
             to={to}
             actions={actions}
@@ -360,13 +437,14 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
             onSendText={onSendText}
             onSendFile={onSendFile}
             onSendImg={onSendImg}
+            onRemoveReplyMsg={onRemoveReplyMsg}
           />
           <ChatSettingDrawer
             prefix={prefix}
             visible={settingDrawerVisible}
             drawerContainer={settingDrawDomRef}
             onClose={onSettingDrawerClose}
-            title="设置"
+            title={t('setText')}
           >
             <ChatP2pSetting
               alias={user.alias || ''}
diff --git a/react/src/YXUIKit/chat-kit-ui/src/containers/teamChatContainer.tsx b/react/src/YXUIKit/chat-kit-ui/src/containers/teamChatContainer.tsx
index 4842834..513c0b9 100644
--- a/react/src/YXUIKit/chat-kit-ui/src/containers/teamChatContainer.tsx
+++ b/react/src/YXUIKit/chat-kit-ui/src/containers/teamChatContainer.tsx
@@ -23,7 +23,7 @@ import { LeftOutlined } from '@ant-design/icons'
 import { Action } from '../Container'
 import ChatTeamSetting, { HistoryStack } from '../components/ChatTeamSetting'
 import { Session } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/SessionServiceInterface'
-import { debounce } from '@xkit-yx/utils'
+import { debounce, VisibilityObserver } from '@xkit-yx/utils'
 import {
   IMMessage,
   TMsgScene,
@@ -34,14 +34,16 @@ import { HISTORY_LIMIT } from '../constant'
 import {
   Team,
   TeamMember,
+  UpdateMyMemberInfoOptions,
 } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { observer } from 'mobx-react'
-import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
+import { GroupItemProps } from '../components/ChatTeamSetting/GroupItem'
 
 export interface TeamChatContainerProps {
   scene: TMsgScene
   to: string
   actions?: Action[]
+  teamMsgReceiptVisible?: boolean
   onSendText?: (data: {
     value: string
     scene: TMsgScene
@@ -55,9 +57,9 @@ export interface TeamChatContainerProps {
     session: Session
     mute: boolean
   }) => string
-  renderTeamMemberItem?: (params: {
-    member: TeamMember & Partial<FriendProfile>
-  }) => JSX.Element | null | undefined
+  renderTeamMemberItem?: (
+    params: GroupItemProps
+  ) => JSX.Element | null | undefined
 
   prefix?: string
   commonPrefix?: string
@@ -68,6 +70,7 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
     scene,
     to,
     actions,
+    teamMsgReceiptVisible,
     onSendText: onSendTextFromProps,
     renderTeamCustomMessage,
     renderHeader,
@@ -87,6 +90,8 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
 
     const msgs = store.msgStore.getMsg(sessionId)
 
+    const replyMsg = store.msgStore.replyMsgs.get(sessionId)
+
     const team: Team = store.teamStore.teams.get(to) || {
       teamId: to,
       type: 'normal',
@@ -141,6 +146,12 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
     const messageListContainerDomRef = useRef<HTMLDivElement>(null)
     const settingDrawDomRef = useRef<HTMLDivElement>(null)
 
+    const visibilityObserver = useMemo(() => {
+      return new VisibilityObserver({
+        root: messageListContainerDomRef.current,
+      })
+    }, [to])
+
     // 以下是 UI 相关的 state，需要在切换会话时重置
     const [inputValue, setInputValue] = useState('')
     const [navHistoryStack, setNavHistoryStack] = useState<HistoryStack[]>([])
@@ -280,6 +291,10 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
       }
     }
 
+    const onRemoveReplyMsg = () => {
+      replyMsg && store.msgStore.reomveReplyMsgActive(replyMsg.sessionId)
+    }
+
     const onMessageAction = async (key: MenuItemKey, msg: IMMessage) => {
       switch (key) {
         case 'delete':
@@ -288,6 +303,9 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
         case 'recall':
           await store.msgStore.reCallMsgActive(msg)
           break
+        case 'reply':
+          await store.msgStore.replyMsgActive(msg)
+          break
         default:
           break
       }
@@ -360,6 +378,28 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
       }
     }
 
+    const onUpdateMyMemberInfo = async (params: UpdateMyMemberInfoOptions) => {
+      const nickTipVisible = params.nickInTeam !== void 0
+      const bitConfigVisible =
+        params.bitConfigMask !== void 0 || params.muteTeam !== void 0
+      try {
+        await store.teamMemberStore.updateMyMemberInfo(params)
+        if (nickTipVisible) {
+          message.success(t('updateMyMemberNickSuccess'))
+        }
+        if (bitConfigVisible) {
+          message.success(t('updateBitConfigMaskSuccess'))
+        }
+      } catch (error) {
+        if (nickTipVisible) {
+          message.error(t('updateMyMemberNickFailed'))
+        }
+        if (bitConfigVisible) {
+          message.error(t('updateBitConfigMaskFailed'))
+        }
+      }
+    }
+
     const onTeamMuteChange = async (mute: boolean) => {
       try {
         await store.teamStore.muteTeamActive({
@@ -419,6 +459,72 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
       }
     }
 
+    useEffect(() => {
+      const notMyMsgs = msgs
+        .filter((item) => item.from !== myUser.account)
+        .filter((item) => !!item.idServer)
+        .filter((item) =>
+          // 以下这些类型的消息不需要发送已读未读
+          ['notification', 'tip', 'robot', 'g2'].every((j) => j !== item.type)
+        )
+
+      const visibleChangeHandler = (params: {
+        visible: boolean
+        target: HTMLElement
+      }) => {
+        if (params.visible) {
+          // 发送已读
+          const msg = notMyMsgs.find(
+            (item) => item.idClient === params.target.id
+          )
+          if (msg) {
+            store.msgStore
+              .sendTeamMsgReceiptActive([
+                {
+                  teamId: team.teamId,
+                  idClient: msg.idClient,
+                  idServer: msg.idServer!,
+                },
+              ])
+              .finally(() => {
+                visibilityObserver.unobserve(params.target)
+              })
+          }
+        }
+      }
+
+      const handler = (isObserve: boolean) => {
+        notMyMsgs.forEach((item) => {
+          const target = document.getElementById(item.idClient)
+          if (target) {
+            if (isObserve) {
+              visibilityObserver.observe(target)
+            } else {
+              visibilityObserver.unobserve(target)
+            }
+          }
+        })
+
+        if (isObserve) {
+          visibilityObserver.on('visibleChange', visibleChangeHandler)
+        } else {
+          visibilityObserver.off('visibleChange', visibleChangeHandler)
+        }
+      }
+
+      handler(true)
+
+      return () => {
+        handler(false)
+      }
+    }, [store.msgStore, msgs, visibilityObserver, team.teamId, myUser.account])
+
+    useEffect(() => {
+      return () => {
+        visibilityObserver.destroy()
+      }
+    }, [visibilityObserver])
+
     // 切换会话时需要重新初始化
     useEffect(() => {
       resetState()
@@ -477,7 +583,9 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
             commonPrefix={commonPrefix}
             ref={messageListContainerDomRef}
             msgs={msgs}
+            teamId={team.teamId}
             members={teamMembers}
+            teamMsgReceiptVisible={teamMsgReceiptVisible}
             noMore={noMore}
             loadingMore={loadingMore}
             myAccount={myUser?.account || ''}
@@ -502,6 +610,7 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
                 ? t('teamMutePlaceholder')
                 : `${t('sendToText')} ${teamNameOrTeamId}${t('sendUsageText')}`
             }
+            replyMsg={replyMsg}
             scene={scene}
             to={to}
             actions={actions}
@@ -510,6 +619,7 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
             uploadImageLoading={store.uiStore.uploadImageLoading}
             uploadFileLoading={store.uiStore.uploadFileLoading}
             setInputValue={setInputValue}
+            onRemoveReplyMsg={onRemoveReplyMsg}
             onSendText={onSendText}
             onSendFile={onSendFile}
             onSendImg={onSendImg}
@@ -535,6 +645,7 @@ const TeamChatContainer: React.FC<TeamChatContainerProps> = observer(
               onLeaveTeam={onLeaveTeam}
               onRemoveTeamMemberClick={onRemoveTeamMember}
               onUpdateTeamInfo={onUpdateTeamInfo}
+              onUpdateMyMemberInfo={onUpdateMyMemberInfo}
               onTeamMuteChange={onTeamMuteChange}
               renderTeamMemberItem={renderTeamMemberItem}
               prefix={prefix}
diff --git a/react/src/YXUIKit/common-ui/package.json b/react/src/YXUIKit/common-ui/package.json
index 017415b..31d1fa8 100644
--- a/react/src/YXUIKit/common-ui/package.json
+++ b/react/src/YXUIKit/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/common-ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "common-ui",
   "license": "MIT",
   "main": "lib/index.js",
@@ -41,7 +41,7 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "typedoc": "^0.23.22",
+    "typedoc": "^0.22.11",
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
@@ -55,12 +55,12 @@
     "yunxin-log-debug": "^1.1.6"
   },
   "dependencies": {
-    "@xkit-yx/core-kit": "^0.7.0",
-    "@xkit-yx/utils": "^0.4.5",
+    "@xkit-yx/core-kit": "^0.8.0",
+    "@xkit-yx/utils": "^0.5.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
     "yunxin-log-debug": "^1.1.6"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/common-ui/src/components/CommonIcon/index.tsx b/react/src/YXUIKit/common-ui/src/components/CommonIcon/index.tsx
index a33633d..5a70f64 100644
--- a/react/src/YXUIKit/common-ui/src/components/CommonIcon/index.tsx
+++ b/react/src/YXUIKit/common-ui/src/components/CommonIcon/index.tsx
@@ -1,7 +1,10 @@
 import { createFromIconfontCN } from '@ant-design/icons'
 
 const CommonIcon = createFromIconfontCN({
-  scriptUrl: '//yx-web-nosdn.netease.im/sdk-release/yunxun-imweb-iconfont.js', // 在 iconfont.cn 上生成
+  scriptUrl: [
+    '//yx-web-nosdn.netease.im/sdk-release/yunxun-imweb-iconfont.js',
+    '//at.alicdn.com/t/c/font_3429868_lw5j7ynvgf.js',
+  ], // 在 iconfont.cn 上生成
 })
 
 export default CommonIcon
diff --git a/react/src/YXUIKit/common-ui/src/components/CommonParseSession/index.tsx b/react/src/YXUIKit/common-ui/src/components/CommonParseSession/index.tsx
index 7b459f8..2a217fa 100644
--- a/react/src/YXUIKit/common-ui/src/components/CommonParseSession/index.tsx
+++ b/react/src/YXUIKit/common-ui/src/components/CommonParseSession/index.tsx
@@ -1,14 +1,16 @@
-import React, { useRef } from 'react'
-import { Image } from 'antd'
+import React, { useMemo, useRef, useState } from 'react'
+import { Image, Popover } from 'antd'
 import reactStringReplace from 'react-string-replace'
 import CommonIcon from '../CommonIcon'
 import { getFileType, parseFileSize, addUrlSearch } from '@xkit-yx/utils'
-import { EMOJI_ICON_MAP_CONFIG, INPUT_EMOJI_SYMBOL_REG } from '../../constant'
+// import { EMOJI_ICON_MAP_CONFIG, INPUT_EMOJI_SYMBOL_REG } from '../../constant'
+import { handleEmojiTranslate } from '../../utils'
 import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
-import { useTranslation } from '../../index'
+import { useTranslation, useStateContext } from '../../index'
 import { Team } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { UserNameCard } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/UserServiceInterface'
-
+import { observer } from 'mobx-react'
+import { parseSessionId } from '../../utils'
 // 对话框中要展示的文件icon标识
 const fileIconMap = {
   img: 'icon-tupian2',
@@ -24,191 +26,402 @@ const fileIconMap = {
 export interface IParseSessionProps {
   prefix?: string
   msg: IMMessage
+  replyMsg?: Pick<
+    IMMessage,
+    'type' | 'body' | 'attach' | 'idClient' | 'fromNick' | 'from'
+  >
 }
 
-export const ParseSession: React.FC<IParseSessionProps> = ({
-  prefix = 'common',
-  msg,
-}) => {
-  const _prefix = `${prefix}-parse-session`
-  const { t } = useTranslation()
-  const imagePreview = useRef<HTMLDivElement | null>(null)
-  const notSupportMessageText = t('notSupportMessageText')
-
-  const { type, body, idClient } = msg
-
-  const renderCustomText = () => {
-    const text = reactStringReplace(
-      body?.trim(),
-      /(https?:\/\/\S+)/gi,
-      (match, i) => (
-        <a key={idClient + match + i} href={match} target="_blank">
-          {match}
-        </a>
+export const ParseSession: React.FC<IParseSessionProps> = observer(
+  ({ prefix = 'common', msg, replyMsg }) => {
+    const _prefix = `${prefix}-parse-session`
+    const { store } = useStateContext()
+    const { t } = useTranslation()
+    // const imagePreview = useRef<HTMLDivElement | null>(null)
+    const locationDomRef = useRef<HTMLDivElement | null>(null)
+    const notSupportMessageText = t('notSupportMessageText')
+    const { type, body, idClient, sessionId } = msg
+    const [audioIconType, setAudioIconType] = useState('icon-yuyin3')
+    const { scene, to } = parseSessionId(sessionId)
+
+    const teamId = scene === 'team' ? to : ''
+    const { EMOJI_ICON_MAP_CONFIG, INPUT_EMOJI_SYMBOL_REG } =
+      handleEmojiTranslate(t)
+    const renderCustomText = () => {
+      const text = reactStringReplace(
+        body?.trim(),
+        /(https?:\/\/\S+)/gi,
+        (match, i) => (
+          <a key={idClient + match + i} href={match} target="_blank">
+            {match}
+          </a>
+        )
       )
-    )
 
-    return reactStringReplace(text, INPUT_EMOJI_SYMBOL_REG, (match, i) => {
       return (
-        <CommonIcon
-          key={idClient + match + i}
-          className={`${_prefix}-emoji-icon`}
-          type={EMOJI_ICON_MAP_CONFIG[match]}
-        />
+        <div className={`${_prefix}-text-wrapper`}>
+          {reactStringReplace(text, INPUT_EMOJI_SYMBOL_REG, (match, i) => {
+            return (
+              <CommonIcon
+                key={idClient + match + i}
+                className={`${_prefix}-emoji-icon`}
+                type={EMOJI_ICON_MAP_CONFIG[match]}
+              />
+            )
+          })}
+        </div>
       )
-    })
-  }
+    }
 
-  const renderImage = () => {
-    return (
-      <div
-        onContextMenu={(e) => {
-          e.stopPropagation()
-        }}
-        ref={imagePreview}
-      >
-        <Image rootClassName={`${_prefix}-image`} src={msg?.attach?.url} />
-      </div>
-    )
-  }
+    const renderImage = () => {
+      const { attach } = msg
+      const url = `${attach?.url}?download=${msg.idClient}.${attach?.ext}`
+      return (
+        <div
+          className={`${_prefix}-image-container`}
+          onContextMenu={(e) => {
+            e.stopPropagation()
+          }}
+        >
+          <Image rootClassName={`${_prefix}-image`} src={url} />
+        </div>
+      )
+    }
 
-  const renderFile = () => {
-    return (
-      <div className={`${_prefix}-file-box`}>
-        <CommonIcon
-          className={`${_prefix}-file-icon`}
-          type={
-            fileIconMap[getFileType(msg?.attach?.ext)] || 'icon-weizhiwenjian'
-          }
-        />
-        <div className={`${_prefix}-file-info`}>
-          <a
-            download={msg?.attach?.name}
-            href={addUrlSearch(
-              msg?.attach?.url,
-              `download=${msg?.attach?.name}`
-            )}
-            target="_blank"
-          >
-            {msg?.attach?.name}
-          </a>
-          <span>{parseFileSize(msg?.attach?.size)}</span>
+    const renderFile = () => {
+      return (
+        <div className={`${_prefix}-file-box`}>
+          <CommonIcon
+            className={`${_prefix}-file-icon`}
+            type={
+              fileIconMap[getFileType(msg?.attach?.ext)] || 'icon-weizhiwenjian'
+            }
+          />
+          <div className={`${_prefix}-file-info`}>
+            <a
+              download={msg?.attach?.name}
+              href={addUrlSearch(
+                msg?.attach?.url,
+                `download=${msg?.attach?.name}`
+              )}
+              target="_blank"
+            >
+              {msg?.attach?.name}
+            </a>
+            <span>{parseFileSize(msg?.attach?.size)}</span>
+          </div>
         </div>
-      </div>
-    )
-  }
+      )
+    }
 
-  const renderNotification = () => {
-    switch (msg.attach?.type) {
-      case 'updateTeam': {
-        const team: Team = msg.attach?.team || {}
-        const content: string[] = []
-        if (team.avatar) {
-          content.push(t('updateTeamAvatar'))
-        }
-        if (team.name) {
-          content.push(`${t('updateTeamName')}“${team.name}”`)
-        }
-        if (team.intro) {
-          content.push(t('updateTeamIntro'))
+    const renderNotification = () => {
+      switch (msg.attach?.type) {
+        case 'updateTeam': {
+          const team: Team = msg.attach?.team || {}
+          const content: string[] = []
+          if (team.avatar) {
+            content.push(t('updateTeamAvatar'))
+          }
+          if (team.name) {
+            content.push(`${t('updateTeamName')}“${team.name}”`)
+          }
+          if (team.intro) {
+            content.push(t('updateTeamIntro'))
+          }
+          if (team.inviteMode) {
+            content.push(
+              `${t('updateTeamInviteMode')}“${
+                team.inviteMode === 'all' ? t('teamAll') : t('onlyTeamOwner')
+              }”`
+            )
+          }
+          if (team.updateTeamMode) {
+            content.push(
+              `${t('updateTeamUpdateTeamMode')}“${
+                team.updateTeamMode === 'all'
+                  ? t('teamAll')
+                  : t('onlyTeamOwner')
+              }”`
+            )
+          }
+          if (team.muteType) {
+            content.push(
+              `${t('updateTeamMute')}${
+                team.muteType === 'none' ? t('closeText') : t('openText')
+              }`
+            )
+          }
+          return (
+            <div className={`${_prefix}-noti`}>
+              {store.uiStore.getAppellation({
+                account: msg.from,
+                teamId,
+              })}{' '}
+              {content.join('、')}
+            </div>
+          )
         }
-        if (team.inviteMode) {
-          content.push(
-            `${t('updateTeamInviteMode')}“${
-              team.inviteMode === 'all' ? t('teamAll') : t('onlyTeamOwner')
-            }”`
+        // 主动加入群聊
+        case 'passTeamApply':
+        // 邀请加入群聊
+        // case 'addTeamMembers' : // 忘了为什么写这个，但是实测是下面这个，先注释掉留着
+        case 'acceptTeamInvite': {
+          return (
+            <div className={`${_prefix}-noti`}>
+              {store.uiStore.getAppellation({ account: msg.from, teamId })}{' '}
+              {t('joinTeamText')}
+            </div>
           )
         }
-        if (team.updateTeamMode) {
-          content.push(
-            `${t('updateTeamUpdateTeamMode')}“${
-              team.updateTeamMode === 'all' ? t('teamAll') : t('onlyTeamOwner')
-            }”`
+        // 踢出群聊
+        case 'removeTeamMembers': {
+          const accounts: string[] = msg.attach?.accounts || []
+          const users: UserNameCard[] = accounts.map((item) => {
+            return (
+              (msg.attach?.users || []).find((j) => item === j.account) || {}
+            )
+          })
+          const nicks = users
+            .map((item) =>
+              store.uiStore.getAppellation({ account: item.account, teamId })
+            )
+            .filter((item) => !!item)
+            .join('、')
+          return (
+            <div className={`${_prefix}-noti`}>
+              {nicks} {t('beRemoveTeamText')}
+            </div>
           )
         }
-        if (team.muteType) {
-          content.push(
-            `${t('updateTeamMute')}${
-              team.muteType === 'none' ? t('closeText') : t('openText')
-            }`
+        // 主动退出群聊
+        case 'leaveTeam': {
+          const user: UserNameCard = (msg.attach?.users || [])[0] || {}
+          return (
+            <div className={`${_prefix}-noti`}>
+              {store.uiStore.getAppellation({ account: user.account, teamId })}{' '}
+              {t('leaveTeamText')}
+            </div>
           )
         }
-        return (
-          <div className={`${_prefix}-noti`}>
-            {msg.fromNick || msg.from} {content.join('、')}
-          </div>
-        )
+        default:
+          return null
       }
-      // 主动加入群聊
-      case 'passTeamApply':
-      // 邀请加入群聊
-      // case 'addTeamMembers' : // 忘了为什么写这个，但是实测是下面这个，先注释掉留着
-      case 'acceptTeamInvite': {
-        return (
-          <div className={`${_prefix}-noti`}>
-            {msg.fromNick || msg.from} {t('joinTeamText')}
-          </div>
-        )
+    }
+
+    const renderAudio = () => {
+      const { flow, attach } = msg
+      const duration = Math.floor(attach?.dur / 1000) || 0
+      let animationFlag = false
+      let audioIcons
+      const animationFn = () => {
+        setAudioIconType(audioIcons.shift())
+        audioIcons.length === 0 &&
+          animationFlag &&
+          (audioIcons = ['icon-yuyin1', 'icon-yuyin2', 'icon-yuyin3'])
+        if (audioIcons.length > 0) {
+          setTimeout(animationFn, 300)
+        }
       }
-      // 踢出群聊
-      case 'removeTeamMembers': {
-        const accounts: string[] = msg.attach?.accounts || []
-        const users: UserNameCard[] = accounts.map((item) => {
-          return (msg.attach?.users || []).find((j) => item === j.account) || {}
-        })
-        const nicks = users
-          .map((item) => item.nick || item.account || '')
-          .filter((item) => !!item)
-          .join('、')
-        return (
-          <div className={`${_prefix}-noti`}>
-            {nicks} {t('beRemoveTeamText')}
+
+      const containerWidth = 80 + 15 * (duration - 1)
+
+      return (
+        <div
+          className={`${_prefix}-audio-container`}
+          style={{ width: containerWidth }}
+        >
+          <div
+            className={
+              flow === 'in' ? `${_prefix}-audio-in` : `${_prefix}-audio-out`
+            }
+            onClick={() => {
+              const oldAudio = document.getElementById(
+                'yx-audio-message'
+              ) as HTMLAudioElement
+              oldAudio?.pause()
+              const audio = new Audio(attach?.url)
+              // 播放音频，并开始动画
+              audio.id = 'yx-audio-message'
+              audio.play()
+              document.body.appendChild(audio)
+              audio.addEventListener('ended', () => {
+                animationFlag = false
+                audio.parentNode?.removeChild(audio)
+              })
+              audio.addEventListener('pause', () => {
+                animationFlag = false
+                audio.parentNode?.removeChild(audio)
+              })
+              audioIcons = ['icon-yuyin1', 'icon-yuyin2', 'icon-yuyin3']
+              animationFlag = true
+              animationFn()
+            }}
+          >
+            {duration}s
+            <span className={`${_prefix}-audio-icon-wrapper`}>
+              {/* 这里是动画 */}
+              <CommonIcon type={audioIconType} />
+            </span>
           </div>
-        )
-      }
-      // 主动退出群聊
-      case 'leaveTeam': {
-        const user: UserNameCard = (msg.attach?.users || [])[0] || {}
+        </div>
+      )
+    }
+
+    const renderVideo = () => {
+      const { attach } = msg
+      const url = `${attach?.url}?download=${msg.idClient}.${attach?.ext}`
+      return (
+        <video
+          src={url}
+          controls
+          onError={() => {
+            // 处理异常 例如：视频格式不支持播放等
+          }}
+          height={300}
+        />
+      )
+    }
+
+    const renderLocation = () => {
+      const { attach, body } = msg
+      const amapUrl = `https://uri.amap.com/marker?position=${attach?.lng},${attach?.lat}&name=${body}`
+      const txmapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${attach?.lat},${attach?.lng};title:${body};addr:${attach?.title}&referer=myapp`
+      const bdmapUrl = `http://api.map.baidu.com/marker?location=${attach?.lat},${attach?.lng}&title=${body}&content=${attach?.title}&output=html&coord_type=gcj02&src=myapp`
+      const menu = (
+        <div className={`${_prefix}-map-menu`}>
+          <div>
+            <a target="_blank" rel="noopener noreferrer" href={amapUrl}>
+              {t('amap')}
+            </a>
+          </div>
+          <div>
+            <a target="_blank" rel="noopener noreferrer" href={txmapUrl}>
+              {t('txmap')}
+            </a>
+          </div>
+          <div>
+            <a target="_blank" rel="noopener noreferrer" href={bdmapUrl}>
+              {t('bdmap')}
+            </a>
+          </div>
+        </div>
+      )
+      return (
+        <Popover
+          content={menu}
+          trigger={['click']}
+          placement="right"
+          getPopupContainer={() => locationDomRef.current || document.body}
+        >
+          <div className={`${_prefix}-location-card`} ref={locationDomRef}>
+            <div className={`${_prefix}-location-title`}>{body}</div>
+            <div className={`${_prefix}-location-subTitle`}>
+              {attach?.title}
+            </div>
+            <img
+              src="https://yx-web-nosdn.netease.im/common/00685d88b3d4bead5e95479408b5b30f/map.png"
+              alt=""
+            />
+          </div>
+        </Popover>
+      )
+    }
+
+    const renderReplyMsg = () => {
+      if (replyMsg) {
+        let content = ''
+        if (
+          replyMsg.type === 'custom' &&
+          ['reCallMsg', 'beReCallMsg'].includes(replyMsg.attach?.type)
+        ) {
+          content = t('recallReplyMessageText')
+        } else {
+          content =
+            `${store.uiStore.getAppellation({
+              account: replyMsg.from,
+              teamId,
+            })}：` + getMsgContentTipByType(replyMsg, t)
+        }
+
         return (
-          <div className={`${_prefix}-noti`}>
-            {user.nick || user.account || ''} {t('leaveTeamText')}
+          <div
+            className={`${_prefix}-reply-wrapper`}
+            onClick={() => {
+              // 滚动到回复的消息
+              document.getElementById(replyMsg.idClient)?.scrollIntoView()
+            }}
+          >
+            {content}
           </div>
         )
       }
-      default:
-        return null
+      return null
     }
+
+    return (
+      <>
+        {renderReplyMsg()}
+        {(() => {
+          switch (type) {
+            case 'text':
+            case 'custom':
+              return renderCustomText()
+            case 'image':
+              return renderImage()
+            case 'file':
+              return renderFile()
+            case 'notification':
+              return renderNotification()
+            case 'audio':
+              return renderAudio()
+            case 'g2':
+              return `[${t('callMsgText')}，${notSupportMessageText}]`
+            case 'geo':
+              return renderLocation()
+            case 'robot':
+              return `[${t('robotMsgText')}，${notSupportMessageText}]`
+            case 'tip':
+              return `[${t('tipMsgText')}，${notSupportMessageText}]`
+            case 'video':
+              return renderVideo()
+            default:
+              return `[${t('unknowMsgText')}，${notSupportMessageText}]`
+          }
+        })()}
+      </>
+    )
   }
+)
 
-  return (
-    <>
-      {(() => {
-        switch (type) {
-          case 'text':
-          case 'custom':
-            return renderCustomText()
-          case 'image':
-            return renderImage()
-          case 'file':
-            return renderFile()
-          case 'notification':
-            return renderNotification()
-          case 'audio':
-            return `[${t('audioMsgText')}，${notSupportMessageText}]`
-          case 'g2':
-            return `[${t('callMsgText')}，${notSupportMessageText}]`
-          case 'geo':
-            return `[${t('geoMsgText')}，${notSupportMessageText}]`
-          case 'robot':
-            return `[${t('robotMsgText')}，${notSupportMessageText}]`
-          case 'tip':
-            return `[${t('tipMsgText')}，${notSupportMessageText}]`
-          case 'video':
-            return `[${t('videoMsgText')}，${notSupportMessageText}]`
-          default:
-            return `[${t('unknowMsgText')}，${notSupportMessageText}]`
-        }
-      })()}
-    </>
-  )
+export const getMsgContentTipByType = (
+  msg: Pick<IMMessage, 'type' | 'body'>,
+  t
+): string => {
+  const { type, body } = msg
+  switch (type) {
+    case 'text':
+      return body || `[${t('textMsgText')}]`
+    case 'custom':
+      return body || `[${t('customMsgText')}]`
+    case 'audio':
+      return `[${t('audioMsgText')}]`
+    case 'file':
+      return `[${t('fileMsgText')}]`
+    case 'g2':
+      return `[${t('callMsgText')}]`
+    case 'geo':
+      return `[${t('geoMsgText')}]`
+    case 'image':
+      return `[${t('imgMsgText')}]`
+    case 'notification':
+      return `[${t('notiMsgText')}]`
+    case 'robot':
+      return `[${t('robotMsgText')}]`
+    case 'tip':
+      return `[${t('tipMsgText')}]`
+    case 'video':
+      return `[${t('videoMsgText')}]`
+    default:
+      return `[${t('unknowMsgText')}]`
+  }
 }
diff --git a/react/src/YXUIKit/common-ui/src/components/CommonParseSession/style/index.less b/react/src/YXUIKit/common-ui/src/components/CommonParseSession/style/index.less
index d77c51a..5eced1e 100644
--- a/react/src/YXUIKit/common-ui/src/components/CommonParseSession/style/index.less
+++ b/react/src/YXUIKit/common-ui/src/components/CommonParseSession/style/index.less
@@ -2,27 +2,82 @@
 
 @prefix: ~'@{parse-session-cls}';
 
+.@{prefix}-text-wrapper {
+  padding: 12px 16px;
+}
+
 .@{prefix}-emoji-icon {
   font-size: @yx-font-size-18;
 }
 
+.@{prefix}-image-container {
+  margin: 12px 16px;
+}
+
 .@{prefix}-image {
   img {
-    max-width: 231px;
+    height: 200px;
   }
 }
 
 .@{prefix}-noti {
-  padding: 10px 0;
+  padding: 22px 16px;
   line-height: 16px;
   color: @yx-text-color-2;
   text-align: center;
 }
+.@{prefix}-audio-container {
+  padding: 12px 16px;
+}
+.@{prefix}-audio-in,
+.@{prefix}-audio-out {
+  width: 50px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  .@{prefix}-audio-icon-wrapper {
+    font-size: @yx-font-size-20;
+    &:hover {
+      animation: audio-play 5s;
+    }
+  }
+}
+.@{prefix}-audio-in {
+  flex-direction: row-reverse;
+  .@{prefix}-audio-icon-wrapper {
+    transform: rotate(180deg);
+  }
+}
+
+.@{prefix}-location-card {
+  // border: 1px solid @yx-border-color-1;
+  // border-radius: @yx-primary-border-radius;
+  position: relative;
+  background-color: #fff;
+  width: 288px;
+  .@{prefix}-location-title {
+    padding: 8px 10px 0 10px;
+  }
+  .@{prefix}-location-subTitle {
+    padding: 0 10px 8px 10px;
+    color: @yx-text-color-2;
+    font-size: @yx-font-size-12;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    // margin-bottom: 8px;
+  }
+  img {
+    width: 100%;
+  }
+}
 
 .@{prefix}-file-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 16px;
 
   .@{prefix}-file-icon {
     font-size: @yx-font-size-32;
@@ -34,3 +89,21 @@
     flex-direction: column;
   }
 }
+
+.@{prefix}-reply-wrapper {
+  font-size: @yx-font-size-12;
+  color: @yx-text-color-1;
+  padding: 12px 16px;
+  border-bottom: 1px solid #bbd2ed;
+  cursor: pointer;
+}
+
+.@{prefix}-map-menu {
+  width: 60px;
+  a {
+    color: @yx-text-color-1;
+    display: block;
+    text-align: center;
+    margin: 10px 0px;
+  }
+}
diff --git a/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/index.tsx b/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/index.tsx
index c3ac0f7..d21700a 100644
--- a/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/index.tsx
+++ b/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/index.tsx
@@ -7,11 +7,11 @@ export interface GroupAvatarSelectProps extends CrudeAvatarProps {
 }
 
 export const urls = [
-  'https://yx-web-nosdn.netease.im/common/1c12d39e5a00f6e9e37cd7c110d8b4f0/头像1.png',
-  'https://yx-web-nosdn.netease.im/common/0602f7ead8e878b2beb4e3c17aa32584/头像2.png',
-  'https://yx-web-nosdn.netease.im/common/0782789dabb67f098fa4a80aab4194f6/头像3.png',
-  'https://yx-web-nosdn.netease.im/common/4779f3843a6c67013b3f546a7343e1df/头像4.png',
-  'https://yx-web-nosdn.netease.im/common/415cabb01d1931282fe5ee28fc50251a/头像5.png',
+  'https://yx-web-nosdn.netease.im/common/2425b4cc058e5788867d63c322feb7ac/groupAvatar1.png',
+  'https://yx-web-nosdn.netease.im/common/62c45692c9771ab388d43fea1c9d2758/groupAvatar2.png',
+  'https://yx-web-nosdn.netease.im/common/d1ed3c21d3f87a41568d17197760e663/groupAvatar3.png',
+  'https://yx-web-nosdn.netease.im/common/e677d8551deb96723af2b40b821c766a/groupAvatar4.png',
+  'https://yx-web-nosdn.netease.im/common/fd6c75bb6abca9c810d1292e66d5d87e/groupAvatar5.png',
 ]
 
 export const GroupAvatarSelect: FC<GroupAvatarSelectProps> = ({
@@ -36,7 +36,7 @@ export const GroupAvatarSelect: FC<GroupAvatarSelectProps> = ({
             type="text"
             className={`${_prefix}-btn`}
           >
-            <img src={url} />
+            <img className={`${_prefix}-btn-img`} src={url} />
           </Button>
         ))}
       </div>
diff --git a/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/style/index.less b/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/style/index.less
index 0f5aa49..3153ee8 100644
--- a/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/style/index.less
+++ b/react/src/YXUIKit/common-ui/src/components/GroupAvatarSelect/style/index.less
@@ -26,4 +26,9 @@
     align-items: center;
     padding: 8px;
   }
+
+  &-btn-img {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/react/src/YXUIKit/common-ui/src/components/MyUserCard/index.tsx b/react/src/YXUIKit/common-ui/src/components/MyUserCard/index.tsx
index 4f579ad..96683c2 100644
--- a/react/src/YXUIKit/common-ui/src/components/MyUserCard/index.tsx
+++ b/react/src/YXUIKit/common-ui/src/components/MyUserCard/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState, useMemo } from 'react'
-import { Modal, Input, Select, Upload, message } from 'antd'
+import { Modal, Input, Select, Upload, message, Form } from 'antd'
 import { CrudeAvatar } from '../CrudeAvatar'
 import { UserNameCard } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/UserServiceInterface'
 import { useTranslation } from '../../hooks/useTranslation'
@@ -164,65 +164,73 @@ export const MyUserCard: FC<MyUserCardProps> = ({
           </span>
         </div>
         <div className={`${_prefix}-content`}>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('accountText')}</label>
-            <Input value={props.account} disabled />
-          </div>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('nickText')}</label>
-            <Input
-              value={nick}
-              maxLength={15}
-              placeholder={t('nickPlaceholder')}
-              onChange={(e) => {
-                setNick(e.target.value)
-              }}
-            />
-          </div>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('genderText')}</label>
-            <Select
-              style={{ width: '100%' }}
-              options={genderOptions}
-              value={gender}
-              placeholder={t('genderPlaceholder')}
-              onChange={setGender}
-            />
-          </div>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('phoneText')}</label>
-            <Input
-              value={tel}
-              maxLength={11}
-              placeholder={t('phonePlaceholder')}
-              onChange={(e) => {
-                setTel(e.target.value.replace(/\D/g, ''))
-              }}
-            />
-          </div>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('emailText')}</label>
-            <Input
-              value={email}
-              maxLength={30}
-              placeholder={t('emailPlaceholder')}
-              onChange={(e) => {
-                setEmail(e.target.value)
-              }}
-            />
-          </div>
-          <div className={`${_prefix}-content-form-item`}>
-            <label>{t('signText')}</label>
-            <Input.TextArea
-              value={signature}
-              maxLength={50}
-              style={{ resize: 'none' }}
-              placeholder={t('signPlaceholder')}
-              onChange={(e) => {
-                setSignature(e.target.value)
-              }}
-            />
-          </div>
+          <Form labelCol={{ span: 6 }}>
+            <Form.Item label={t('accountText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Input value={props.account} disabled />
+              </div>
+            </Form.Item>
+            <Form.Item label={t('nickText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Input
+                  value={nick}
+                  maxLength={15}
+                  placeholder={t('nickPlaceholder')}
+                  onChange={(e) => {
+                    setNick(e.target.value)
+                  }}
+                />
+              </div>
+            </Form.Item>
+            <Form.Item label={t('genderText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Select
+                  style={{ width: '100%' }}
+                  options={genderOptions}
+                  value={gender}
+                  placeholder={t('genderPlaceholder')}
+                  onChange={setGender}
+                />
+              </div>
+            </Form.Item>
+            <Form.Item label={t('phoneText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Input
+                  value={tel}
+                  maxLength={11}
+                  placeholder={t('phonePlaceholder')}
+                  onChange={(e) => {
+                    setTel(e.target.value.replace(/\D/g, ''))
+                  }}
+                />
+              </div>
+            </Form.Item>
+            <Form.Item label={t('emailText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Input
+                  value={email}
+                  maxLength={30}
+                  placeholder={t('emailPlaceholder')}
+                  onChange={(e) => {
+                    setEmail(e.target.value)
+                  }}
+                />
+              </div>
+            </Form.Item>
+            <Form.Item label={t('signText')}>
+              <div className={`${_prefix}-content-form-item`}>
+                <Input.TextArea
+                  value={signature}
+                  maxLength={50}
+                  style={{ resize: 'none' }}
+                  placeholder={t('signPlaceholder')}
+                  onChange={(e) => {
+                    setSignature(e.target.value)
+                  }}
+                />
+              </div>
+            </Form.Item>
+          </Form>
         </div>
       </>
     )
@@ -240,6 +248,7 @@ export const MyUserCard: FC<MyUserCardProps> = ({
       cancelText={t('cancelText')}
       onOk={handleSave}
       onCancel={handleCancel}
+      width={370}
     >
       {contentRenderer()}
     </Modal>
diff --git a/react/src/YXUIKit/common-ui/src/components/MyUserCard/style/index.less b/react/src/YXUIKit/common-ui/src/components/MyUserCard/style/index.less
index 04f3c27..a3e2bbe 100644
--- a/react/src/YXUIKit/common-ui/src/components/MyUserCard/style/index.less
+++ b/react/src/YXUIKit/common-ui/src/components/MyUserCard/style/index.less
@@ -7,8 +7,6 @@
 
 .@{mycard-modal-prefix-cls} {
   .@{ant-prefix}-modal {
-    width: 352px !important;
-
     &-body {
       padding: 0;
     }
@@ -24,8 +22,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  background: url('https://yx-web-nosdn.netease.im/common/7ff58b88ee91e4abe3fc6374296827fb/user-background.png')
-    no-repeat 0 -50px;
+  background: url('https://yx-web-nosdn.netease.im/common/7ff58b88ee91e4abe3fc6374296827fb/user-background.png') no-repeat;
+  background-size: 100% 100%;
   width: 100%;
   height: 100px;
   min-width: 0;
@@ -48,7 +46,7 @@
 .@{mycard-content-prefix-cls} {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 24px 24px 24px 0px;
 
   &-form-item {
     display: flex;
diff --git a/react/src/YXUIKit/common-ui/src/components/ReadPercent/index.tsx b/react/src/YXUIKit/common-ui/src/components/ReadPercent/index.tsx
new file mode 100644
index 0000000..b62c0c1
--- /dev/null
+++ b/react/src/YXUIKit/common-ui/src/components/ReadPercent/index.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { useTranslation } from '../../hooks/useTranslation'
+import { Popover } from 'antd'
+import CommonIcon from '../CommonIcon'
+
+export interface ReadPercentProps {
+  unread: number
+  read: number
+  hoverable?: boolean
+  radius?: number
+
+  prefix?: string
+}
+
+export const ReadPercent: React.FC<ReadPercentProps> = ({
+  unread,
+  read,
+  radius = 8,
+  hoverable = false,
+  prefix = 'common',
+}) => {
+  const _prefix = `${prefix}-percent`
+  const { t } = useTranslation()
+
+  const percent = (read / (unread + read)) * 100 || 0
+
+  const renderDetail = () => {
+    return (
+      <span>
+        {percent >= 100
+          ? t('allReadText')
+          : `${t('unreadText')} ${unread} ${t('personUnit')} | ${t(
+              'readText'
+            )} ${read} ${t('personUnit')}`}
+      </span>
+    )
+  }
+
+  const renderSvg = () => {
+    return percent >= 100 ? (
+      <CommonIcon
+        style={{ fontSize: radius * 2 }}
+        type="icon-yidu"
+        className={`${_prefix}-wrap-icon`}
+      />
+    ) : (
+      <svg
+        className={`${_prefix}-wrap-svg`}
+        height={radius * 2}
+        width={radius * 2}
+        viewBox={`0 0 ${radius * 2} ${radius * 2}`}
+      >
+        <circle
+          className={`${_prefix}-wrap-svg-bg`}
+          r={radius - 1}
+          cx={radius}
+          cy={radius}
+          strokeWidth="1.5"
+        />
+        <circle
+          className={`${_prefix}-wrap-svg-content`}
+          r={radius / 2}
+          cx={radius}
+          cy={radius}
+          fill="transparent"
+          strokeWidth={radius}
+          strokeDasharray={`calc(${percent} * ${radius} * 3.14 / 100) calc(${radius} * 3.14)`}
+          transform={`rotate(-90 ${radius} ${radius})`}
+        />
+      </svg>
+    )
+  }
+
+  return (
+    <div className={`${_prefix}-wrap`}>
+      {hoverable ? (
+        <Popover placement="top" content={renderDetail()}>
+          {renderSvg()}
+        </Popover>
+      ) : (
+        renderSvg()
+      )}
+    </div>
+  )
+}
diff --git a/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.less b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.less
new file mode 100644
index 0000000..6558d30
--- /dev/null
+++ b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.less
@@ -0,0 +1,26 @@
+@import '~antd/lib/style/themes/variable.less';
+@import './theme.less';
+
+@percent-prefix-cls: ~'@{percent-prefix}-wrap';
+
+.@{percent-prefix-cls} {
+  display: flex;
+  align-items: center;
+
+  &-icon {
+    color: @yx-avatar-color-3!important;
+  }
+
+  &-svg {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &-bg {
+      fill: @yx-primary-color;
+      stroke: @yx-avatar-color-3;
+    }
+
+    &-content {
+      stroke: @yx-avatar-color-3;
+    }
+  }
+}
diff --git a/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.ts b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.ts
new file mode 100644
index 0000000..de1a21c
--- /dev/null
+++ b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/index.ts
@@ -0,0 +1,2 @@
+import 'antd/lib/popover/style'
+import './index.less'
diff --git a/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/theme.less b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/theme.less
new file mode 100644
index 0000000..ba82a83
--- /dev/null
+++ b/react/src/YXUIKit/common-ui/src/components/ReadPercent/style/theme.less
@@ -0,0 +1,3 @@
+@import '../../../style/theme.less';
+
+@percent-prefix: ~'@{common-prefix}-percent';
diff --git a/react/src/YXUIKit/common-ui/src/components/UserCard/index.tsx b/react/src/YXUIKit/common-ui/src/components/UserCard/index.tsx
index 9dae247..e672dd5 100644
--- a/react/src/YXUIKit/common-ui/src/components/UserCard/index.tsx
+++ b/react/src/YXUIKit/common-ui/src/components/UserCard/index.tsx
@@ -107,11 +107,11 @@ export const UserCard: FC<UserCardProps> = ({
   }, [props.alias])
 
   const handleChangeAlias = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAlias(e.target.value)
+    setAlias(e.target.value.trim())
   }
 
   const handleBlurAlias = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChangeAlias?.(e.target.value || '')
+    onChangeAlias?.(e.target.value.trim())
   }
 
   const contentRenderer = () => {
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/Provider.tsx b/react/src/YXUIKit/common-ui/src/contextManager/Provider.tsx
index 114b290..280fd75 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/Provider.tsx
+++ b/react/src/YXUIKit/common-ui/src/contextManager/Provider.tsx
@@ -26,27 +26,27 @@ import {
 
 export interface LocalOptions {
   /**
-   添加好友模式
+   添加好友模式，默认需要验证
    */
   addFriendNeedVerify?: boolean
   /**
-   群组邀请模式
+   群组邀请模式，默认管理员可邀请
    */
   teamInviteMode?: TeamInviteMode
   /**
-   群组加入模式
+   群组加入模式，默认无需验证
    */
   teamJoinMode?: TeamJoinMode
   /**
-   群组被邀请模式
+   群组被邀请模式，默认需要验证
    */
   teamBeInviteMode?: TeamBeInviteMode
   /**
-   群组更新模式
+   群组更新模式，默认管理员可修改
    */
   teamUpdateTeamMode?: TeamUpdateTeamMode
   /**
-   群组更新自定义字段模式
+   群组更新自定义字段模式，默认管理员可修改
    */
   teamUpdateExtMode?: TeamUpdateExtMode
 }
@@ -96,7 +96,7 @@ export const Provider: FC<ProviderProps> = memo(
     nimKitCore,
     sdkVersion = 1,
     locale = 'zh',
-    localeConfig,
+    localeConfig = zh,
     renderImIdle,
     renderImDisConnected,
     renderImConnecting,
@@ -168,11 +168,17 @@ export const Provider: FC<ProviderProps> = memo(
       return () => {
         if (!singleton) {
           rootStore.destroy()
-          nim.destroy()
         }
       }
-    }, [nim, rootStore, singleton])
+    }, [rootStore, singleton])
 
+    useEffect(() => {
+      return () => {
+        if (!singleton) {
+          nim.destroy()
+        }
+      }
+    }, [nim, singleton])
     return (
       <Context.Provider
         value={{
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/connect.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/connect.ts
index e60a88c..2401f75 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/connect.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/connect.ts
@@ -1,11 +1,11 @@
 import { NimKitCoreTypes } from '@xkit-yx/core-kit'
 import { makeAutoObservable, runInAction } from 'mobx'
-import { ConnectState } from '../types'
 import RootStore from '.'
 import { logger } from '../../utils'
 /**Mobx 可观察对象，负责连接的子 store */
 export class ConnectStore {
-  connectState: ConnectState = 'idle'
+  /** 连接状态 */
+  connectState: NimKitCoreTypes.ConnectState = 'idle'
 
   constructor(
     private rootStore: RootStore,
@@ -32,6 +32,8 @@ export class ConnectStore {
     nim.on('multiPortLogin', this._onMultiPortLogin)
     // 同步完成
     nim.on('syncdone', this._onSyncDone)
+
+    this.connectState = this.nim.connectState
   }
   /** 销毁当前 IM 实例，同时会退出登录状态，并断开websocket连接 */
   destroy(): void {
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/friends.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/friends.ts
index 49a27ff..34f63b5 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/friends.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/friends.ts
@@ -37,10 +37,10 @@ export class FriendStore {
     // 多端同步好友操作
     nim.on('syncFriend', this._onSyncFriend)
   }
+
   /**
    * 销毁FriendStore，会取消好友事件监听
    */
-
   destroy(): void {
     this.nim.off('friends', this._onFriends)
     this.nim.off('syncFriend', this._onSyncFriend)
@@ -59,7 +59,13 @@ export class FriendStore {
         state: 'pass',
         from: account,
         type: 'friendRequest',
+        to: this.rootStore.userStore.myUserInfo.account,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'friendRequest',
+        account,
+        this.rootStore.userStore.myUserInfo.account
+      )
       logger.log('passFriendApplyActive success', account)
     } catch (error) {
       logger.error('passFriendApplyActive failed: ', account, error)
@@ -81,7 +87,13 @@ export class FriendStore {
         state: 'decline',
         from: account,
         type: 'friendRequest',
+        to: this.rootStore.userStore.myUserInfo.account,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'friendRequest',
+        account,
+        this.rootStore.userStore.myUserInfo.account
+      )
       logger.log('rejectFriendApplyActive success', account)
     } catch (error) {
       logger.error('rejectFriendApplyActive failed: ', account, error)
@@ -220,6 +232,7 @@ export class FriendStore {
           from: data.account || '',
           state: 'pass',
           type: 'friendRequest',
+          to: this.rootStore.userStore.myUserInfo.account,
         })
         break
       case 'rejectFriendApply':
@@ -227,6 +240,7 @@ export class FriendStore {
           from: data.account || '',
           state: 'decline',
           type: 'friendRequest',
+          to: this.rootStore.userStore.myUserInfo.account,
         })
         break
       case 'applyFriend':
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/index.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/index.ts
index 1f5ed7c..168b7b4 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/index.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/index.ts
@@ -39,13 +39,13 @@ import {
   Relations,
   UpdateRelationsOptions,
 } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/UserServiceInterface'
-import { ConnectState } from '../types'
 import { ContactType, Relation } from '../types'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
 import { Session } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/SessionServiceInterface'
 import { SystemMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/SystemMessageServiceInterface'
 import { IUploadFileOptions } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/types'
 import { IMEventSyncFriendResult } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/NIMInterface'
+import { logger } from '../../utils'
 
 class RootStore {
   static ins: RootStore
@@ -89,6 +89,7 @@ class RootStore {
    * 销毁根store实例
    */
   destroy(): void {
+    logger.log('store destroyed')
     this.connectStore.destroy()
     this.friendStore.destroy()
     this.msgStore.destroy()
@@ -136,7 +137,6 @@ export {
   RejectTeamApplyOptions,
   RejectTeamInviteOptions,
   UpdateTeamInfoOptions,
-  ConnectState,
   Relations,
   UpdateRelationsOptions,
 }
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/msgs.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/msgs.ts
index 0aede7d..2693b76 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/msgs.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/msgs.ts
@@ -3,17 +3,22 @@ import { makeAutoObservable, runInAction } from 'mobx'
 import { GetHistoryMsgsOptions } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgLogServiceInterface'
 import {
   DeleteSelfMsgsResult,
+  GetTeamMsgReadResult,
   IMMessage,
+  TeamMsgReceipt,
+  teamMsgReceipt,
   TMsgScene,
 } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
 import RootStore from '.'
 import zh from '../../locales/zh'
-import { logger } from '../../utils'
+import { parseSessionId, logger } from '../../utils'
 
 const RECALL_TIME = 2 * 60 * 1000
 /**Mobx 可观察对象，负责管理会话消息的子 store */
 export class MsgStore {
-  msgs: Map<string, Map<string, IMMessage>> = new Map()
+  msgs: Map<string, IMMessage[]> = new Map()
+  /** 回复消息 */
+  replyMsgs: Map<string, IMMessage> = new Map()
 
   constructor(
     private rootStore: RootStore,
@@ -26,6 +31,7 @@ export class MsgStore {
     this._onMsg = this._onMsg.bind(this)
     // this._onSyncOfflineMsgs = this._onSyncOfflineMsgs.bind(this)
     // this._onSyncRoamingMsgs = this._onSyncRoamingMsgs.bind(this)
+    this._onTeamMsgReceipts = this._onTeamMsgReceipts.bind(this)
     this._onDeleteSelfMsgs = this._onDeleteSelfMsgs.bind(this)
 
     // 收到消息
@@ -35,7 +41,7 @@ export class MsgStore {
     // 同步时漫游消息
     // nim.on('syncRoamingMsgs', this._onSyncRoamingMsgs)
     // 群已读
-    // nim.on('teamMsgReceipts', (data) => {})
+    nim.on('teamMsgReceipts', this._onTeamMsgReceipts)
     // 多端同步单向删除某消息的通知
     nim.on('deleteSelfMsgs', this._onDeleteSelfMsgs)
   }
@@ -46,12 +52,27 @@ export class MsgStore {
     this.nim.off('msg', this._onMsg)
     // this.nim.off('syncOfflineMsgs', this._onSyncOfflineMsgs)
     // this.nim.off('syncRoamingMsgs', this._onSyncRoamingMsgs)
+    this.nim.off('teamMsgReceipts', this._onTeamMsgReceipts)
     this.nim.off('deleteSelfMsgs', this._onDeleteSelfMsgs)
 
     this.getMsg().forEach((msg) => {
       this._handleClearMsgTimer(msg)
     })
   }
+  /**
+   * 回复消息
+   * @param msg 消息对象
+   */
+  replyMsgActive(msg: IMMessage): void {
+    this.replyMsgs.set(msg.sessionId, msg)
+  }
+  /**
+   * 回复消息
+   * @param msg 消息对象
+   */
+  reomveReplyMsgActive(sessionId: string): void {
+    this.replyMsgs.delete(sessionId)
+  }
   /**
    * 撤回消息
    * @param msg 消息对象
@@ -79,7 +100,7 @@ export class MsgStore {
 
       const recallMsg: IMMessage = {
         ...msg,
-        idClient: `recall-${(Math.random() + '').slice(-6)}`,
+        idClient: msg.idClient,
         status: 'sent',
         time: Date.now(),
         userUpdateTime: Date.now(),
@@ -99,7 +120,6 @@ export class MsgStore {
    * 插入一条对方撤回的自定义消息
    * @param __namedParameters.scene - 场景
    * @param __namedParameters.from - 消息发送方帐号
-   * @param __namedParameters.fromNick - 消息发送方的昵称
    * @param __namedParameters.to - 接收方, 对方帐号或者群id
    * @param __namedParameters.idClient - 端测生成的消息id, 可作为消息唯一主键使用
    * @param __namedParameters.time - 消息发送成功的时间戳(单位毫秒)
@@ -107,14 +127,12 @@ export class MsgStore {
   beReCallMsgActive({
     scene,
     from,
-    fromNick,
     to,
     idClient,
     time,
   }: {
     scene: TMsgScene
     from: string
-    fromNick: string
     to: string
     idClient: string
     time: number
@@ -122,18 +140,17 @@ export class MsgStore {
     logger.log('beReCallMsgActive', {
       scene,
       from,
-      fromNick,
       to,
       idClient,
       time,
     })
     const sessionId = this.rootStore.sessionStore.getSessionId(scene, from, to)
     this.removeMsg(sessionId, [idClient])
-    // 可能是多端同步过来的消息
-    const isSelf = this.rootStore.userStore.myUserInfo?.account === from
+    // // 可能是多端同步过来的消息
+    // const isSelf = this.rootStore.userStore.myUserInfo?.account === from
     // 插入一条对方撤回的自定义消息。目前是直接插入内存，如果需要记录到服务端，各端统一好格式，发送一条真实的自定义消息。
     const beRecallMsg: IMMessage = {
-      idClient: `berecall-${(Math.random() + '').slice(-6)}`,
+      idClient: idClient,
       target: to,
       flow: 'in',
       sessionId,
@@ -144,9 +161,11 @@ export class MsgStore {
       time,
       userUpdateTime: Date.now(),
       type: 'custom',
-      body: `${isSelf ? this.t('you') : fromNick || from} ${this.t(
-        'recallMessageText'
-      )}`,
+      // 因为还要考虑群昵称、备注、昵称这些复杂情况，这边不再提供 body，渲染者自行渲染
+      body: '',
+      // body: `${isSelf ? this.t('you') : fromNick || from} ${this.t(
+      //   'recallMessageText'
+      // )}`,
       feature: 'default',
       attach: {
         type: 'beReCallMsg',
@@ -215,8 +234,13 @@ export class MsgStore {
       const res = await this.nim.sendCustomMsg({
         scene,
         to,
+        ext: this._getExtByReplyMsgs(`${scene}-${to}`),
         body,
         attach,
+        // @ts-ignore
+        teamSpecializationInfo: {
+          needACK: true,
+        },
         onSendBefore: (msg) => {
           this.addMsg(msg.sessionId, [msg])
         },
@@ -227,6 +251,8 @@ export class MsgStore {
       this._handleSendMsgFail(error.msg)
       logger.error('sendCustomMsgActive failed: ', { scene, to, body }, error)
       throw error
+    } finally {
+      this.reomveReplyMsgActive(`${scene}-${to}`)
     }
   }
   /**
@@ -249,7 +275,12 @@ export class MsgStore {
       const res = await this.nim.sendFileMsg({
         scene,
         to,
+        ext: this._getExtByReplyMsgs(`${scene}-${to}`),
         file,
+        // @ts-ignore
+        teamSpecializationInfo: {
+          needACK: true,
+        },
         onUploadStart: () => {
           this.rootStore.uiStore.setUploadFileLoading(true)
         },
@@ -266,6 +297,8 @@ export class MsgStore {
       this._handleSendMsgFail(error.msg)
       logger.error('sendFileMsgActive failed: ', { scene, to, file }, error)
       throw error
+    } finally {
+      this.reomveReplyMsgActive(`${scene}-${to}`)
     }
   }
   /**
@@ -288,7 +321,12 @@ export class MsgStore {
       const res = await this.nim.sendImageMsg({
         scene,
         to,
+        ext: this._getExtByReplyMsgs(`${scene}-${to}`),
         file,
+        // @ts-ignore
+        teamSpecializationInfo: {
+          needACK: true,
+        },
         onUploadStart: () => {
           this.rootStore.uiStore.setUploadImageLoading(true)
         },
@@ -305,6 +343,8 @@ export class MsgStore {
       this._handleSendMsgFail(error.msg)
       logger.error('sendImageMsgActive failed: ', { scene, to, file }, error)
       throw error
+    } finally {
+      this.reomveReplyMsgActive(`${scene}-${to}`)
     }
   }
   /**
@@ -327,7 +367,12 @@ export class MsgStore {
       const res = await this.nim.sendTextMsg({
         scene,
         to,
+        ext: this._getExtByReplyMsgs(`${scene}-${to}`),
         body,
+        // @ts-ignore
+        teamSpecializationInfo: {
+          needACK: true,
+        },
         onSendBefore: (msg) => {
           this.addMsg(msg.sessionId, [msg])
         },
@@ -338,6 +383,8 @@ export class MsgStore {
       this._handleSendMsgFail(error.msg)
       logger.error('sendTextMsgActive failed: ', { scene, to, body }, error)
       throw error
+    } finally {
+      this.reomveReplyMsgActive(`${scene}-${to}`)
     }
   }
   /**
@@ -356,6 +403,62 @@ export class MsgStore {
       throw error
     }
   }
+  /**
+   * 发送 p2p 消息已读回执
+   * @param msg 消息对象
+   */
+  async sendMsgReceiptActive(msg: IMMessage): Promise<void> {
+    try {
+      logger.log('sendMsgReceiptActive', msg)
+      await this.nim.sendMsgReceipt({
+        msg,
+      })
+      logger.log('sendMsgReceiptActive success', msg)
+    } catch (error) {
+      logger.error('sendMsgReceiptActive failed: ', msg, error)
+      throw error
+    }
+  }
+  /**
+   * 发送群组消息已读回执
+   * @param options 参考 https://doc.yunxin.163.com/messaging-enhanced/api-refer/web/typedoc/Latest/zh/NIM/modules/MsgServiceInterface.html#teamMsgReceipt-2
+   */
+  async sendTeamMsgReceiptActive(options: teamMsgReceipt[]): Promise<void> {
+    try {
+      logger.log('sendTeamMsgReceiptActive', options)
+      if (options.length) {
+        await this.nim.sendTeamMsgReceipt({
+          teamMsgReceipts: options,
+        })
+      }
+      logger.log('sendTeamMsgReceiptActive success', options)
+    } catch (error) {
+      logger.error('sendTeamMsgReceiptActive failed: ', options, error)
+      throw error
+    }
+  }
+  /**
+   * 获取群组消息已读未读数
+   * @param options 参考 https://doc.yunxin.163.com/messaging-enhanced/api-refer/web/typedoc/Latest/zh/NIM/modules/MsgServiceInterface.html#teamMsgReceipt-2
+   */
+  async getTeamMsgReadsActive(
+    options: teamMsgReceipt[]
+  ): Promise<GetTeamMsgReadResult[]> {
+    try {
+      logger.log('getTeamMsgReadsActive', options)
+      if (!options.length) {
+        return []
+      }
+      const res = await this.nim.getTeamMsgReads({
+        teamMsgReceipts: options,
+      })
+      logger.log('getTeamMsgReadsActive success', res)
+      return res
+    } catch (error) {
+      logger.error('getTeamMsgReadsActive failed: ', options, error)
+      throw error
+    }
+  }
   /**
    * 获取历史消息
    * @param options.sessionId - 消息所属的会话的ID
@@ -372,7 +475,7 @@ export class MsgStore {
     try {
       logger.log('getHistoryMsgActive', options)
       const { sessionId, endTime, lastMsgId, limit = 100 } = options
-      const [scene, to] = sessionId.split('-')
+      const { scene, to } = parseSessionId(sessionId)
 
       const finalParams: GetHistoryMsgsOptions = {
         scene: scene as any,
@@ -386,7 +489,34 @@ export class MsgStore {
       }
 
       const msgs = await this.nim.getHistoryMsgs(finalParams)
-      this.addMsg(sessionId, msgs)
+      // 如果是群组消息，需要获取下自己发出的消息已读未读数，拼接到 attach 中用来渲染
+      if (scene === 'team') {
+        const myMsgs = msgs.filter(
+          (item) => item.from === this.rootStore.userStore.myUserInfo.account
+        )
+        const teamMsgReceipts: teamMsgReceipt[] = myMsgs.map((item) => ({
+          teamId: to,
+          idClient: item.idClient,
+          idServer: item.idServer!,
+        }))
+        let res: GetTeamMsgReadResult[] = []
+        try {
+          res = await this.getTeamMsgReadsActive(teamMsgReceipts)
+        } catch (error) {
+          // 兼容老用户，忽略这个报错
+        }
+        const newMsgs = msgs.map((item) => {
+          const teamMsgReceipt = res.find((j) => j.idClient === item.idClient)
+          if (teamMsgReceipt) {
+            return this._updateReceiptMsg(item, teamMsgReceipt)
+          }
+          return item
+        })
+        this.addMsg(sessionId, newMsgs)
+      } else {
+        this.addMsg(sessionId, msgs)
+      }
+
       logger.log('getHistoryMsgActive success', options, finalParams, msgs)
       return msgs
     } catch (error: any) {
@@ -400,24 +530,24 @@ export class MsgStore {
    * @param msgs- 消息对象数组
    */
   addMsg(sessionId: string, msgs: IMMessage[]): void {
-    let _msgs = this.msgs.get(sessionId)
-    if (!_msgs) {
-      _msgs = new Map<string, IMMessage>()
+    const sortFunc = (a: IMMessage, b: IMMessage) => {
+      return a.time - b.time
     }
+    const _msgs = this.msgs.get(sessionId) || []
     msgs
       .filter((item) => !!item.idClient)
       .forEach((item) => {
-        const _msg = _msgs!.get(item.idClient)
+        const _msg = _msgs.find((msg) => msg.idClient === item.idClient)
         // SDK 可能会返回多条 idClient 相同的数据，此时取 time 最新的
         if (_msg) {
           if (_msg.time <= item.time || _msg.status === 'sending') {
-            _msgs!.set(item.idClient, item)
+            _msgs.splice(_msgs.indexOf(_msg), 1, item)
           }
         } else {
-          _msgs!.set(item.idClient, item)
+          _msgs.push(item)
         }
       })
-    this.msgs.set(sessionId, _msgs)
+    this.msgs.set(sessionId, [..._msgs].sort(sortFunc))
   }
   /**
    * MsgStore删除消息处理函数（MsgStore内部使用，外层不太推荐直接使用）
@@ -436,12 +566,16 @@ export class MsgStore {
       this.msgs.delete(sessionId)
       return
     }
-    idClients.forEach((item) => {
-      const msg = msgs.get(item)
-      this._handleClearMsgTimer(msg)
-      msgs.delete(item)
-    })
-    this.msgs.set(sessionId, msgs)
+    this.msgs.set(
+      sessionId,
+      msgs.filter((msg) => {
+        const isDelete = idClients.includes(msg.idClient)
+        if (isDelete) {
+          this._handleClearMsgTimer(msg)
+        }
+        return !isDelete
+      })
+    )
   }
   /**
    * MsgStore获取消息函数（MsgStore内部使用，外层不太推荐直接使用）
@@ -449,27 +583,16 @@ export class MsgStore {
    * @param idClients - 端测生成的消息id数组
    */
   getMsg(sessionId?: string, idClients?: string[]): IMMessage[] {
-    const sortFunc = (a: IMMessage, b: IMMessage) => {
-      return a.time - b.time
-    }
     if (!sessionId) {
-      return [...this.msgs.values()]
-        .map((item) => [...item.values()])
-        .flat()
-        .sort(sortFunc)
-    }
-    const msgs = this.msgs.get(sessionId)
-    if (!msgs) {
-      return []
+      return [...this.msgs.values()].flat()
     }
+    const msgs = this.msgs.get(sessionId) || []
+
     if (!idClients || !idClients.length) {
-      return [...msgs.values()].sort(sortFunc)
+      return msgs
     }
-
-    return idClients
-      .map((item) => msgs.get(item)!)
-      .filter((item) => !!item)
-      .sort(sortFunc)
+    // 如果有 idClients，只返回 idClients 中的消息，新数组
+    return msgs.filter((item) => idClients.includes(item.idClient))
   }
 
   private _handleSendMsgSuccess(msg: IMMessage) {
@@ -481,7 +604,17 @@ export class MsgStore {
           ...msg.attach,
           canRecall: true,
           reCallTimer: setTimeout(() => {
-            this.addMsg(msg.sessionId, [msg])
+            // 从内存中取最新的，因为中间可能有其他更新
+            const _msg = this.getMsg(msg.sessionId, [msg.idClient])[0]
+            if (_msg) {
+              const _attach = _msg.attach
+              if (_attach) {
+                delete _attach.canRecall
+                delete _attach.reCallTimer
+              }
+              _msg.attach = _attach
+              this.addMsg(msg.sessionId, [_msg])
+            }
           }, RECALL_TIME),
         },
       }
@@ -516,6 +649,18 @@ export class MsgStore {
 
   // private _onSyncRoamingMsgs(data: SyncRoamingMsgsResult) {}
 
+  private _onTeamMsgReceipts(data: TeamMsgReceipt[]): void {
+    logger.log('_onTeamMsgReceipts: ', data)
+    data.forEach((item) => {
+      const sessionId = `team-${item.teamId}`
+      const msg = this.getMsg(sessionId, [item.idClient])[0]
+      if (msg) {
+        const newMsg = this._updateReceiptMsg(msg, item)
+        this.addMsg(sessionId, [newMsg])
+      }
+    })
+  }
+
   private _onDeleteSelfMsgs(data: DeleteSelfMsgsResult[]) {
     logger.log('_onDeleteSelfMsgs: ', data)
     const res: { [key: string]: DeleteSelfMsgsResult[] } = {}
@@ -538,4 +683,45 @@ export class MsgStore {
       )
     })
   }
+
+  private _getExtByReplyMsgs(sessionId: string): string | undefined {
+    let ext
+    const replyMsg = this.replyMsgs.get(sessionId)
+    if (replyMsg) {
+      // 记录部分信息，过多ext会导致发送不成功
+      // 'type' | 'body' | 'attach' | 'idClient' | 'fromNick' | 'from'
+      const yxReplyMsg = {
+        sessionId: replyMsg.sessionId,
+        fromNick: replyMsg.fromNick,
+        flow: replyMsg.flow,
+        from: replyMsg.from,
+        type: replyMsg.type,
+        body: replyMsg.body,
+        idClient: replyMsg.idClient,
+        idServer: replyMsg.idServer,
+      }
+      ext = JSON.stringify({
+        yxReplyMsg: yxReplyMsg,
+      })
+    }
+    return ext
+  }
+
+  private _updateReceiptMsg(
+    originMsg: IMMessage,
+    data: {
+      unread: number
+      read: number
+    }
+  ): IMMessage {
+    return {
+      ...originMsg,
+      // 在 attach 中存一下，这样不用改 ts 定义
+      attach: {
+        ...originMsg.attach,
+        yxUnread: Number(data.unread),
+        yxRead: Number(data.read),
+      },
+    }
+  }
 }
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/superTeamMembers.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/superTeamMembers.ts
index 9b6097b..e13c6a3 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/superTeamMembers.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/superTeamMembers.ts
@@ -10,6 +10,7 @@ import {
 import zh from '../../locales/zh'
 import RootStore from '.'
 import { message } from 'antd'
+import { parseSessionId } from '../../utils'
 
 export class SuperTeamMemberStore {
   teamMembers: Map<string, Map<string, SuperTeamMember>> = new Map()
@@ -167,7 +168,7 @@ export class SuperTeamMemberStore {
     const members = data.members.map((item) => ({
       ...item,
       // 这里 SDK 返回的内容中没有 account，先自行处理一下
-      account: item.id.split('-')[1],
+      account: parseSessionId(item.id).to,
     }))
     // @ts-ignore SDK 问题，先忽略
     this.updateSuperTeamMember(data.team.teamId, members)
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/superTeams.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/superTeams.ts
index f2b4ab0..b2473ef 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/superTeams.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/superTeams.ts
@@ -8,6 +8,7 @@ import {
 import zh from '../../locales/zh'
 import RootStore from '.'
 import { message } from 'antd'
+import { parseSessionId } from '../../utils'
 
 export class SuperTeamStore {
   superTeams: Map<string, SuperTeam> = new Map()
@@ -120,8 +121,8 @@ export class SuperTeamStore {
   }) {
     this.addSuperTeam([data.team])
     const members = [
-      { ...data.from, account: data.from.id.split('-')[1] },
-      { ...data.to, account: data.to.id.split('-')[1] },
+      { ...data.from, account: parseSessionId(data.from.id).to },
+      { ...data.to, account: parseSessionId(data.to.id).to },
     ]
     this.rootStore.superTeamMemberStore.updateSuperTeamMember(
       data.team.teamId,
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/sysMsgs.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/sysMsgs.ts
index 3eeb528..5d1aaf2 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/sysMsgs.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/sysMsgs.ts
@@ -14,7 +14,7 @@ import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendService
 export class SysMsgStore {
   // 申请消息
   applyMsgs: Map<string, SystemMessage> = new Map()
-
+  unReadSysMsgs: Map<string, SystemMessage> = new Map()
   constructor(
     private rootStore: RootStore,
     private nim: NimKitCoreTypes.INimKitCore,
@@ -39,29 +39,29 @@ export class SysMsgStore {
    * @param msg 系统消息对象
    */
   addApplyMsg(msg: SystemMessage): void {
-    if (msg.from && msg.type) {
+    if (msg.from && msg.type && msg.to) {
       // TODO SDK 有部分系统通知没有 idServer，因此先用 from 和 type 做 key，等后续 sdk 升级
-      const id = `${msg.from}-${msg.type}`
+      const id = `${msg.from}-${msg.type}-${msg.to}`
+      this.unReadSysMsgs.set(id, msg)
       this.applyMsgs.set(id, msg)
     } else {
       logger.warn('addApplyMsg drop', msg)
       return
     }
-    this.rootStore.uiStore.addSystemMsgUnread(1)
   }
   /**
    * SysMsgStore删除申请消息处理函数（SysMsgStore内部使用，外层不太推荐直接使用）
    * @param idServer 服务器用于区分消息用的ID
    */
   deleteApplyMsg(msg: SystemMessage): void {
-    if (msg.from && msg.type) {
-      const id = `${msg.from}-${msg.type}`
+    if (msg.from && msg.type && msg.to) {
+      const id = `${msg.from}-${msg.type}-${msg.to}`
       this.applyMsgs.delete(id)
+      this.unReadSysMsgs.delete(id)
     } else {
       logger.warn('deleteApplyMsg drop', msg)
       return
     }
-    this.rootStore.uiStore.decreaseSystemMsgUnread(1)
   }
 
   // TODO 这里 sdk 没有返回 idServer，因此只能根据 from 和 type 来更新，等待 sdk 优化
@@ -75,15 +75,17 @@ export class SysMsgStore {
     from,
     state,
     type,
+    to,
   }: {
     idServer?: string
     from: string
     state: TSystemMessageStatus
     type: TSystemMessageType
+    to: string
   }): void {
     let id = ''
-    if (from && type) {
-      id = `${from}-${type}`
+    if (from && type && to) {
+      id = `${from}-${type}-${to}`
     } else {
       logger.warn('updateApplyMsg drop', {
         idServer,
@@ -97,23 +99,46 @@ export class SysMsgStore {
     if (oldSysMsg) {
       this.applyMsgs.set(id, { ...oldSysMsg, ...{ from, type, state } })
     }
-
     // 这里还要继续响应一些操作
     switch (type) {
       case 'friendRequest':
-        this.rootStore.friendStore.addFriend([
-          {
-            account: from,
-            updateTime: Date.now(),
-            createTime: Date.now(),
-            valid: true,
-          },
-        ])
+        if (state === 'pass') {
+          this.rootStore.friendStore.addFriend([
+            {
+              account: from,
+              updateTime: Date.now(),
+              createTime: Date.now(),
+              valid: true,
+            },
+          ])
+        }
         break
       default:
         break
     }
   }
+  /**
+   * 获取去重后的未读系统消息
+   */
+  getUnReadsysMsgsCount() {
+    return [...this.unReadSysMsgs.keys()].length
+  }
+
+  /**
+   * 删除未读系统消息
+   */
+  deleteUnReadSysMsgs(type: TSystemMessageType, from: string, to: string) {
+    const id = `${from}-${type}-${to}`
+    this.unReadSysMsgs.delete(id)
+  }
+
+  /**
+   * 重置系统消息未读
+   */
+  resetSystemMsgUnread(): void {
+    this.unReadSysMsgs.clear()
+  }
+
   /**
    * 销毁SysMsgStore，会取消系统消息事件监听
    */
@@ -128,13 +153,12 @@ export class SysMsgStore {
       return
     }
     const { from, to, time } = msg
-    const { idClient, fromNick = '', opeAccount } = msg.recallMessageInfo
+    const { idClient, opeAccount } = msg.recallMessageInfo
     const fromAccount = opeAccount || from
 
     this.rootStore.msgStore.beReCallMsgActive({
       scene,
       from: fromAccount,
-      fromNick,
       to,
       idClient,
       time,
@@ -245,6 +269,17 @@ export class SysMsgStore {
     }
   }
 
+  // private _handleUnreadSysMsgKey(type: string, from: string, to?: string) {
+  //   let id = ''
+  //   //因为群相关系统消息无法通过from和type来确定系统消息唯一性，所以根据type区分，群消息key中增加to
+  //   if (type === 'friendRequest') {
+  //     id = `${from}-${type}`
+  //   } else {
+  //     id = `${from}-${type}-${to}`
+  //   }
+  //   return id
+  // }
+
   private _onSysMsg(data: SystemMessage) {
     logger.log('_onSysMsg: ', data)
     this._handleSysMsg(data)
@@ -260,7 +295,10 @@ export class SysMsgStore {
   ) {
     logger.log('_onUpdateSystemMessages: ', data)
     data.forEach((item) => {
-      this.updateApplyMsg(item)
+      this.updateApplyMsg({
+        ...item,
+        to: this.rootStore.userStore.myUserInfo.account,
+      })
     })
   }
 
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/teamMembers.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/teamMembers.ts
index 82c4a8b..edf99e6 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/teamMembers.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/teamMembers.ts
@@ -13,7 +13,8 @@ import {
 import zh from '../../locales/zh'
 import RootStore from '.'
 import { message } from 'antd'
-import { logger } from '../../utils'
+import { parseSessionId, logger } from '../../utils'
+import { UpdateMyMemberInfoOptions } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 /**Mobx 可观察对象，负责管理群组成员的子 store*/
 export class TeamMemberStore {
   teamMembers: Map<string, Map<string, TeamMember>> = new Map()
@@ -108,24 +109,21 @@ export class TeamMemberStore {
     }
   }
   /**
-   * 群消息免打扰
-   * @param teamId - 群id
-   * @param bitConfigMask -  * 提醒策略  0 开启提醒  1 关闭消息提醒   2 只接受管理员的消息的提醒
+   * 更新我在群中的信息
+   * @param options
+   * options.teamId - 群id <br>
+   * options.nickInTeam - 群昵称 <br>
+   * options.muteTeam - 是否关闭此群的消息提醒, true表示关闭提醒, 但是SDK仍然会收到这个群的消息, SDK只是记录这个设置, 具体根据这个设置要执行的操作由第三方APP决定 <br>
+   * options.bitConfigMask - 提醒策略: 0 开启提醒；1 关闭消息提醒；2 只接受管理员的消息的提醒 <br>
+   * options.ext - 扩展字段 <br>
    */
-  // 群消息免打扰
-  async muteTeamNotiActive(
-    teamId: string,
-    bitConfigMask: number
-  ): Promise<void> {
+  async updateMyMemberInfo(options: UpdateMyMemberInfoOptions): Promise<void> {
     try {
-      logger.log('muteTeamNotiActive', teamId, bitConfigMask)
-      await this.nim.updateMyMemberInfo({
-        teamId,
-        bitConfigMask,
-      })
-      logger.log('muteTeamNotiActive success: ', teamId, bitConfigMask)
+      logger.log('updateMyMemberInfo', options)
+      await this.nim.updateMyMemberInfo(options)
+      logger.log('updateMyMemberInfo success: ', options)
     } catch (error) {
-      logger.error('muteTeamNotiActive failed: ', teamId, error)
+      logger.error('updateMyMemberInfo failed: ', options, error)
       throw error
     }
   }
@@ -186,17 +184,25 @@ export class TeamMemberStore {
     this.teamMembers.set(teamId, teamMembers)
   }
 
-  private _onAddTeamMembers(data: {
+  private async _onAddTeamMembers(data: {
     team: Team
+    // 以下两个参数是增量
     accounts: string[]
     members: TeamMember[]
   }) {
     logger.log('_onAddTeamMembers: ', data)
     this.rootStore.teamStore.addTeam([data.team])
     this.addTeamMember(data.team.teamId, data.members)
-    // 如果是选中的会话，就给个提示
     const sessionId = `team-${data.team.teamId}`
-    if (this.rootStore.uiStore.selectedSession === sessionId) {
+    // 如果是自己进群，就插入一条临时会话
+    if (data.accounts.includes(this.rootStore.userStore.myUserInfo.account)) {
+      await this.rootStore.sessionStore.insertSessionActive(
+        'team',
+        data.team.teamId
+      )
+    }
+    // 如果是选中的会话，就给个提示
+    else if (this.rootStore.uiStore.selectedSession === sessionId) {
       const nicks = data.members.map((item) => item.nickInTeam || item.account)
       message.info(`${nicks.join('，')}${this.t('enterTeamText')}`)
     }
@@ -246,7 +252,7 @@ export class TeamMemberStore {
     const members = data.members.map((item) => ({
       ...item,
       // 这里 SDK 返回的内容中没有 account，先自行处理一下
-      account: item.id.split('-')[1],
+      account: parseSessionId(item.id).to,
     }))
     // @ts-ignore SDK 问题，先忽略
     this.updateTeamMember(data.team.teamId, members)
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/teams.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/teams.ts
index 660f7ae..2d10b15 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/teams.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/teams.ts
@@ -13,7 +13,7 @@ import {
 import zh from '../../locales/zh'
 import RootStore from '.'
 import { message } from 'antd'
-import { logger } from '../../utils'
+import { parseSessionId, logger } from '../../utils'
 import { LocalOptions } from '../Provider'
 /**Mobx 可观察对象，负责管理群组的子 store */
 export class TeamStore {
@@ -144,7 +144,8 @@ export class TeamStore {
     try {
       logger.log('applyTeamActive', teamId)
       const team = await this.nim.applyTeam({ teamId })
-      await this._handleAddTeam(team)
+      // 这边不再直接维护群信息，因为要兼容申请入群的情况，放到 onAddTeamMembers 中处理
+      // await this._handleAddTeam(team)
       logger.log('applyTeamActive success', teamId)
     } catch (error) {
       logger.error('applyTeamActive failed: ', teamId, error)
@@ -277,7 +278,13 @@ export class TeamStore {
         from: options.from,
         type: 'teamInvite',
         state: 'pass',
+        to: options.teamId,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'teamInvite',
+        options.from,
+        options.teamId
+      )
       logger.log('acceptTeamInviteActive success', options)
     } catch (error) {
       logger.error('acceptTeamInviteActive failed: ', options, error)
@@ -302,7 +309,13 @@ export class TeamStore {
         from: options.from,
         type: 'teamInvite',
         state: 'decline',
+        to: options.teamId,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'teamInvite',
+        options.from,
+        options.teamId
+      )
       logger.log('rejectTeamInviteActive success', options)
     } catch (error) {
       logger.error('rejectTeamInviteActive failed: ', options, error)
@@ -324,7 +337,13 @@ export class TeamStore {
         from: options.from,
         type: 'applyTeam',
         state: 'pass',
+        to: options.teamId,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'applyTeam',
+        options.from,
+        options.teamId
+      )
       logger.log('passTeamApplyActive success', options)
     } catch (error) {
       logger.error('passTeamApplyActive failed: ', options, error)
@@ -347,7 +366,13 @@ export class TeamStore {
         from: options.from,
         type: 'applyTeam',
         state: 'decline',
+        to: options.teamId,
       })
+      this.rootStore.sysMsgStore.deleteUnReadSysMsgs(
+        'applyTeam',
+        options.from,
+        options.teamId
+      )
       logger.log('rejectTeamApplyActive success', options)
     } catch (error) {
       logger.error('rejectTeamApplyActive failed: ', options, error)
@@ -397,8 +422,8 @@ export class TeamStore {
     logger.log('_onTransferTeam: ', data)
     this.addTeam([data.team])
     const members = [
-      { ...data.from, account: data.from.id.split('-')[1] },
-      { ...data.to, account: data.to.id.split('-')[1] },
+      { ...data.from, account: parseSessionId(data.from.id).to },
+      { ...data.to, account: parseSessionId(data.to.id).to },
     ]
     // @ts-ignore SDK 问题，先忽略
     this.rootStore.teamMemberStore.updateTeamMember(data.team.teamId, members)
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/ui.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/ui.ts
index 7207ced..a57cc1c 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/ui.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/ui.ts
@@ -8,7 +8,7 @@ import { ContactType, Relation } from '../types'
 import RootStore from '.'
 import { NimKitCoreTypes } from '@xkit-yx/core-kit'
 import { UserNameCard } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/UserServiceInterface'
-import { logger } from '../../utils'
+import { parseSessionId, logger } from '../../utils'
 import { debounce } from '@xkit-yx/utils'
 import {
   Team,
@@ -23,18 +23,15 @@ export class UiStore {
   selectedContactType: ContactType | '' = ''
   selectedSession = ''
   selectedP2PSessionRelation: Relation = 'stranger'
-  friendsWithoutBlacklist: NimKitCoreTypes.IFriendInfo[] = []
-  blacklistWithUserCard: NimKitCoreTypes.IFriendInfo[] = []
   p2pSessionList: NimKitCoreTypes.P2PSession[] = []
   teamSessionList: NimKitCoreTypes.TeamSession[] = []
   applyMsgList: SystemMessage[] = []
   // sessionList: NimKitCoreTypes.ISession[] = []
-  systemMsgUnread = 0
 
   uploadFileLoading = false
   uploadImageLoading = false
 
-  private friendsAndBlacklistHandler: IReactionDisposer
+  // private friendsAndBlacklistHandler: IReactionDisposer
   // private sessionListHandler: IReactionDisposer
   private p2pSessionListHandler: IReactionDisposer
   private teamSessionListHandler: IReactionDisposer
@@ -43,14 +40,13 @@ export class UiStore {
 
   constructor(private rootStore: RootStore) {
     makeAutoObservable(this)
-
-    this.friendsAndBlacklistHandler = reaction(
-      () => ({
-        friends: this.friends,
-        blacklist: this.rootStore.relationStore.blacklist,
-      }),
-      this.watchFriendsAndBlacklist.bind(this)
-    )
+    // this.friendsAndBlacklistHandler = reaction(
+    //   () => ({
+    //     friends: this.friends,
+    //     blacklist: this.rootStore.relationStore.blacklist,
+    //   }),
+    //   this.watchFriendsAndBlacklist.bind(this)
+    // )
 
     this.p2pSessionListHandler = reaction(
       () => ({
@@ -104,7 +100,7 @@ export class UiStore {
    * 销毁UiStore，使UI重置
    */
   destroy(): void {
-    this.friendsAndBlacklistHandler()
+    // this.friendsAndBlacklistHandler()
     // this.sessionListHandler()
     this.p2pSessionListHandler()
     this.teamSessionListHandler()
@@ -164,24 +160,7 @@ export class UiStore {
   setUploadImageLoading(loading: boolean): void {
     this.uploadImageLoading = loading
   }
-  /**
-   * 重置系统消息未读
-   */
-  resetSystemMsgUnread(): void {
-    this.systemMsgUnread = 0
-  }
-  /**
-   * 添加未读系统消息
-   */
-  addSystemMsgUnread(count: number): void {
-    this.systemMsgUnread += count
-  }
-  /**
-   * 减少未读系统消息
-   */
-  decreaseSystemMsgUnread(count: number): void {
-    this.systemMsgUnread -= count
-  }
+
   /**
    * 获取群信息以及群关系
    * @param loading - 是否loading
@@ -259,6 +238,52 @@ export class UiStore {
     })
   }
 
+  /**
+   * 获取好友名片
+   * * @param account - 账号
+   */
+  getFriendWithUserNameCard(account: string): NimKitCoreTypes.IFriendInfo {
+    const friend: FriendProfile = this.rootStore.friendStore.friends.get(
+      account
+    ) || {
+      account: '',
+      updateTime: Date.now(),
+      createTime: Date.now(),
+      valid: false,
+    }
+    const userCard: UserNameCard = this.rootStore.userStore.users.get(
+      account
+    ) || {
+      account: '',
+      updateTime: Date.now(),
+      createTime: Date.now(),
+    }
+    return { ...friend, ...userCard }
+  }
+
+  // TODO 该方法对于消息上的称谓，会不再取 msg.fromNick，这会与目前的表现不一致，原因是 SDK 还没有提供昵称变更的回调。
+  /**
+   * 查询用户称谓
+   * 优先级按照 备注 > 群昵称 > 好友昵称 > 好友账号 返回
+   * * @param account - 账号
+   * * @param teamId - 群号
+   */
+  getAppellation({
+    account,
+    teamId = '',
+  }: {
+    account: string
+    teamId?: string
+  }): string {
+    const friend = this.rootStore.friendStore.friends.get(account)
+    const user = this.rootStore.userStore.users.get(account)
+    const teamMember = this.rootStore.teamMemberStore.teamMembers
+      .get(teamId)
+      ?.get(account)
+
+    return friend?.alias || teamMember?.nickInTeam || user?.nick || account
+  }
+
   get friends(): FriendProfile[] {
     return [...this.rootStore.friendStore.friends.values()]
   }
@@ -279,6 +304,9 @@ export class UiStore {
     return [...this.rootStore.sysMsgStore.applyMsgs.values()]
   }
 
+  get systemMsgUnread(): number {
+    return this.rootStore.sysMsgStore.getUnReadsysMsgsCount()
+  }
   get myTeamMemberInfos(): TeamMember[] {
     const myAccount = this.rootStore.userStore.myUserInfo.account
     const teamMembers: TeamMember[] = []
@@ -303,76 +331,75 @@ export class UiStore {
     const other = sessions.filter((item) => !item.stickTopInfo?.isStickOnTop)
     return [...filterIsTop, ...other]
   }
+
   /**
-   * 获取用户名片
-   * * @param account - 账号
+   * 获取好友名片列表
    */
-  getFriendWithUserNameCard(account: string): NimKitCoreTypes.IFriendInfo {
-    const friend: FriendProfile = this.rootStore.friendStore.friends.get(
-      account
-    ) || {
-      account: '',
-      updateTime: Date.now(),
-      createTime: Date.now(),
-      valid: false,
-    }
-    const userCard: UserNameCard = this.rootStore.userStore.users.get(
-      account
-    ) || {
-      account: '',
-      updateTime: Date.now(),
-      createTime: Date.now(),
-    }
-    return { ...friend, ...userCard }
+  get friendsWithoutBlacklist(): NimKitCoreTypes.IFriendInfo[] {
+    return this.friends
+      .map((item) => this.getFriendWithUserNameCard(item.account))
+      .filter((item) => {
+        return !this.rootStore.relationStore.blacklist.includes(item.account)
+      })
   }
 
-  private async watchFriendsAndBlacklist({
-    friends,
-    blacklist,
-  }: {
-    friends: FriendProfile[]
-    blacklist: string[]
-  }): Promise<void> {
-    try {
-      logger.log('watchFriendsAndBlacklist', friends, blacklist)
-      const userCards = await Promise.all(
-        friends.map((item) => {
-          return this.rootStore.userStore.getUserActive(item.account)
-        })
-      )
-      const friendsWithUserCard = friends.map((item) => {
-        const userCard = userCards.find((j) => item.account === j.account)!
-        return {
-          ...item,
-          ...userCard,
-        }
-      })
-      const friendsWithoutBlacklist = friendsWithUserCard.filter((i) =>
-        blacklist.every((j) => i.account !== j)
-      )
-      const blacklistWithUserCard = friendsWithUserCard.filter((i) =>
-        blacklist.includes(i.account)
-      )
-      runInAction(() => {
-        this.friendsWithoutBlacklist = friendsWithoutBlacklist
-        this.blacklistWithUserCard = blacklistWithUserCard
-      })
-      logger.log(
-        'watchFriendsAndBlacklist success: ',
-        friendsWithoutBlacklist,
-        blacklistWithUserCard
-      )
-    } catch (error) {
-      logger.error(
-        'watchFriendsAndBlacklist failed: ',
-        friends,
-        blacklist,
-        error
-      )
-      throw error
-    }
+  /**
+   * 获取黑名单名片列表
+   */
+  get blacklistWithUserCard(): NimKitCoreTypes.IFriendInfo[] {
+    return this.rootStore.relationStore.blacklist.map((item) =>
+      this.getFriendWithUserNameCard(item)
+    )
   }
 
+  // TODO reaction 确实一般是用不到的，普通的 mobx get 方法就可以实时变更。之前没有实时变更可能是一些奇怪的 bug 导致的
+  // private async watchFriendsAndBlacklist({
+  //   friends,
+  //   blacklist,
+  // }: {
+  //   friends: FriendProfile[]
+  //   blacklist: string[]
+  // }): Promise<void> {
+  //   try {
+  //     logger.log('watchFriendsAndBlacklist', friends, blacklist)
+  //     const userCards = await Promise.all(
+  //       friends.map((item) => {
+  //         return this.rootStore.userStore.getUserActive(item.account)
+  //       })
+  //     )
+  //     const friendsWithUserCard = friends.map((item) => {
+  //       const userCard = userCards.find((j) => item.account === j.account)!
+  //       return {
+  //         ...item,
+  //         ...userCard,
+  //       }
+  //     })
+  //     const friendsWithoutBlacklist = friendsWithUserCard.filter((i) =>
+  //       blacklist.every((j) => i.account !== j)
+  //     )
+  //     const blacklistWithUserCard = friendsWithUserCard.filter((i) =>
+  //       blacklist.includes(i.account)
+  //     )
+  //     runInAction(() => {
+  //       this.friendsWithoutBlacklist = friendsWithoutBlacklist
+  //       this.blacklistWithUserCard = blacklistWithUserCard
+  //     })
+  //     logger.log(
+  //       'watchFriendsAndBlacklist success: ',
+  //       friendsWithoutBlacklist,
+  //       blacklistWithUserCard
+  //     )
+  //   } catch (error) {
+  //     logger.error(
+  //       'watchFriendsAndBlacklist failed: ',
+  //       friends,
+  //       blacklist,
+  //       error
+  //     )
+  //     throw error
+  //   }
+  // }
+
   private async getP2pSessionList(params: {
     sessions: Session[]
     users: UserNameCard[]
@@ -586,7 +613,7 @@ export class UiStore {
     needUpdate?: boolean
   }): Relation | undefined {
     logger.log('getRelation', { sessionId, myAccount, blacklist, friends })
-    const [scene, to] = sessionId.split('-')
+    const { scene, to } = parseSessionId(sessionId)
     if (scene !== 'p2p') {
       return
     }
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/store/users.ts b/react/src/YXUIKit/common-ui/src/contextManager/store/users.ts
index 698774c..1d57f47 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/store/users.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/store/users.ts
@@ -82,6 +82,7 @@ export class UserStore {
       logger.log('saveMyUserInfoActive', params)
       const res = await this.nim.saveMyUserInfo(params)
       this.myUserInfo = res
+      this.addUsers([res])
       logger.log('saveMyUserInfoActive success', params, res)
       return res
     } catch (error) {
@@ -137,10 +138,12 @@ export class UserStore {
   private _onSyncMyNameCard(data: UserNameCard) {
     logger.log('_onSyncMyNameCard: ', data)
     this.myUserInfo = data
+    this.addUsers([data])
   }
 
   private _onUpdateMyNameCard(data: UserNameCard) {
     logger.log('_onUpdateMyNameCard: ', data)
     this.myUserInfo = data
+    this.addUsers([data])
   }
 }
diff --git a/react/src/YXUIKit/common-ui/src/contextManager/types.ts b/react/src/YXUIKit/common-ui/src/contextManager/types.ts
index 913bee4..ab36453 100644
--- a/react/src/YXUIKit/common-ui/src/contextManager/types.ts
+++ b/react/src/YXUIKit/common-ui/src/contextManager/types.ts
@@ -1,5 +1,3 @@
 export type ContactType = 'blackList' | 'groupList' | 'friendList' | 'msgList'
 
-export type ConnectState = 'connecting' | 'connected' | 'disconnected' | 'idle'
-
 export type Relation = 'friend' | 'stranger' | 'blacklist' | 'myself'
diff --git a/react/src/YXUIKit/common-ui/src/index.ts b/react/src/YXUIKit/common-ui/src/index.ts
index f686462..a74ef25 100644
--- a/react/src/YXUIKit/common-ui/src/index.ts
+++ b/react/src/YXUIKit/common-ui/src/index.ts
@@ -17,7 +17,11 @@ export { MyUserCard } from './components/MyUserCard'
 export { GroupAvatarSelect, urls } from './components/GroupAvatarSelect'
 export { FriendSelectContainer } from './components/FriendSelect/Container'
 export { Welcome } from './components/Welcome'
-export { ParseSession } from './components/CommonParseSession'
+export { ReadPercent } from './components/ReadPercent'
+export {
+  ParseSession,
+  getMsgContentTipByType,
+} from './components/CommonParseSession'
 export { useStateContext } from './hooks/useStateContext'
 export { useTranslation } from './hooks/useTranslation'
 export { useEventTracking } from './hooks/useEventTracking'
diff --git a/react/src/YXUIKit/common-ui/src/locales/zh.ts b/react/src/YXUIKit/common-ui/src/locales/zh.ts
index 401e1bc..b456a84 100644
--- a/react/src/YXUIKit/common-ui/src/locales/zh.ts
+++ b/react/src/YXUIKit/common-ui/src/locales/zh.ts
@@ -12,6 +12,7 @@ const LocaleConfig = {
   cancelText: '取消',
   deleteText: '删除',
   recallText: '撤回',
+  replyText: '回复',
   you: '你',
   deleteFriendText: '删除好友',
   confirmDeleteText: '确定删除？',
@@ -52,6 +53,7 @@ const LocaleConfig = {
   welcomeText: '欢迎使用云信',
   notSupportMessageText: '暂不支持该消息',
   applyTeamText: '申请入群',
+  applyTeamSuccessText: '申请入群成功',
   rejectText: '拒绝',
   acceptText: '同意',
   inviteTeamText: '邀请您加入群组',
@@ -77,11 +79,18 @@ const LocaleConfig = {
   updateAliasFailedText: '修改备注失败',
   sendText: '发送消息',
   noPermission: '您暂无权限操作',
+  unreadText: '未读',
+  readText: '已读',
+  allReadText: '全部已读',
+  amap: '高德地图',
+  txmap: '腾讯地图',
+  bdmap: '百度地图',
 
   // conversation-kit
   onDismissTeamText: '群已被解散',
   onRemoveTeamText: '您已被移出群组',
   textMsgText: '文本消息',
+  customMsgText: '自定义消息',
   audioMsgText: '音频消息',
   videoMsgText: '视频消息',
   fileMsgText: '文件消息',
@@ -118,6 +127,7 @@ const LocaleConfig = {
   addFriendText: '添加好友',
   createTeamText: '创建群组',
   joinTeamText: '加入群组',
+  joinTeamSuccessText: '加入群组成功',
   beRemoveTeamText: '被移出群组',
   addButtonText: '添加',
   addSuccessText: '添加成功',
@@ -187,6 +197,7 @@ const LocaleConfig = {
   getHistoryMsgFailedText: '获取历史消息失败',
   sendBlackFailedText: '您已被对方拉入黑名单',
   recallMessageText: '撤回了一条消息',
+  recallReplyMessageText: '该消息已撤回',
   reeditText: '重新编辑',
   addChatMemberText: '添加聊天成员',
   chatHistoryText: '聊天记录',
@@ -194,6 +205,81 @@ const LocaleConfig = {
   receiveText: '您收到了新消息',
   strangerNotiText: '当前不是您的好友，请注意保护个人隐私安全。',
   teamInviteModeText: '仅管理员可邀请他人',
+  nickInTeamText: '我在群里的昵称',
+  editNickInTeamText: '编辑我在群里的昵称',
+  updateMyMemberNickSuccess: '更新我的群昵称成功',
+  updateMyMemberNickFailed: '更新我的群昵称失败',
+  updateBitConfigMaskSuccess: '更新群消息免打扰成功',
+  updateBitConfigMaskFailed: '更新群消息免打扰失败',
+
+  // emoji 不能随便填，要用固定 key，，参考 demo
+  Laugh: '[大笑]',
+  Happy: '[开心]',
+  Sexy: '[色]',
+  Cool: '[酷]',
+  Mischievous: '[奸笑]',
+  Kiss: '[亲]',
+  Spit: '[伸舌头]',
+  Squint: '[眯眼]',
+  Cute: '[可爱]',
+  Grimace: '[鬼脸]',
+  Snicker: '[偷笑]',
+  Joy: '[喜悦]',
+  Ecstasy: '[狂喜]',
+  Surprise: '[惊讶]',
+  Tears: '[流泪]',
+  Sweat: '[流汗]',
+  Angle: '[天使]',
+  Funny: '[笑哭]',
+  Awkward: '[尴尬]',
+  Thrill: '[惊恐]',
+  Cry: '[大哭]',
+  Fretting: '[烦躁]',
+  Terrorist: '[恐怖]',
+  Halo: '[两眼冒星]',
+  Shame: '[害羞]',
+  Sleep: '[睡着]',
+  Tired: '[冒星]',
+  Mask: '[口罩]',
+  ok: '[OK]',
+  AllRight: '[好吧]',
+  Despise: '[鄙视]',
+  Uncomfortable: '[难受]',
+  Disdain: '[不屑]',
+  ill: '[不舒服]',
+  Mad: '[愤怒]',
+  Ghost: '[鬼怪]',
+  Angry: '[发怒]',
+  Unhappy: '[不高兴]',
+  Frown: '[皱眉]',
+  Broken: '[心碎]',
+  Beckoning: '[心动]',
+  Ok: '[好的]',
+  Low: '[低级]',
+  Nice: '[赞]',
+  Applause: '[鼓掌]',
+  GoodJob: '[给力]',
+  Hit: '[打你]',
+  Please: '[阿弥陀佛]',
+  Bye: '[拜拜]',
+  First: '[第一]',
+  Fist: '[拳头]',
+  GiveMeFive: '[手掌]',
+  Knife: '[剪刀]',
+  Hi: '[招手]',
+  No: '[不要]',
+  Hold: '[举着]',
+  Think: '[思考]',
+  Pig: '[猪头]',
+  NoListen: '[不听]',
+  NoLook: '[不看]',
+  NoWords: '[不说]',
+  Monkey: '[猴子]',
+  Bomb: '[炸弹]',
+  Cloud: '[筋斗云]',
+  Rocket: '[火箭]',
+  Ambulance: '[救护车]',
+  Poop: '[便便]',
 }
 
 export default LocaleConfig
diff --git a/react/src/YXUIKit/common-ui/src/utils.ts b/react/src/YXUIKit/common-ui/src/utils.ts
index e6c9a9c..932055f 100644
--- a/react/src/YXUIKit/common-ui/src/utils.ts
+++ b/react/src/YXUIKit/common-ui/src/utils.ts
@@ -170,3 +170,112 @@ export const frequencyControl = <
     })
   }
 }
+
+/**
+ * 解析 sessionId，形如 scene-accid
+ */
+export const parseSessionId = (
+  sessionId: string
+): { scene: string; to: string } => {
+  const [scene, ...to] = sessionId.split('-')
+  return {
+    scene,
+    // 这样处理是为了防止有些用户 accid 中自带 -
+    to: to.join('-'),
+  }
+}
+interface IKeyMap {
+  [key: string]: string
+}
+
+export const handleEmojiTranslate = (t) => {
+  const EMOJI_ICON_MAP_CONFIG: IKeyMap = {
+    [t('Laugh')]: 'icon-a-1',
+    [t('Happy')]: 'icon-a-2',
+    [t('Sexy')]: 'icon-a-3',
+    [t('Cool')]: 'icon-a-4',
+    [t('Mischievous')]: 'icon-a-5',
+    [t('Kiss')]: 'icon-a-6',
+    [t('Spit')]: 'icon-a-7',
+    [t('Squint')]: 'icon-a-8',
+    [t('Cute')]: 'icon-a-9',
+    [t('Grimace')]: 'icon-a-10',
+    [t('Snicker')]: 'icon-a-11',
+    [t('Joy')]: 'icon-a-12',
+    [t('Ecstasy')]: 'icon-a-13',
+    [t('Surprise')]: 'icon-a-14',
+    [t('Tears')]: 'icon-a-15',
+    [t('Sweat')]: 'icon-a-16',
+    [t('Angle')]: 'icon-a-17',
+    [t('Funny')]: 'icon-a-18',
+    [t('Awkward')]: 'icon-a-19',
+    [t('Thrill')]: 'icon-a-20',
+    [t('Cry')]: 'icon-a-21',
+    [t('Fretting')]: 'icon-a-22',
+    [t('Terrorist')]: 'icon-a-23',
+    [t('Halo')]: 'icon-a-24',
+    [t('Shame')]: 'icon-a-25',
+    [t('Sleep')]: 'icon-a-26',
+    [t('Tired')]: 'icon-a-27',
+    [t('Mask')]: 'icon-a-28',
+    [t('ok')]: 'icon-a-29',
+    [t('AllRight')]: 'icon-a-30',
+    [t('Despise')]: 'icon-a-31',
+    [t('Uncomfortable')]: 'icon-a-32',
+    [t('Disdain')]: 'icon-a-33',
+    [t('ill')]: 'icon-a-34',
+    [t('Mad')]: 'icon-a-35',
+    [t('Ghost')]: 'icon-a-36',
+    [t('Angry')]: 'icon-a-37',
+    [t('Angry')]: 'icon-a-38',
+    [t('Unhappy')]: 'icon-a-39',
+    [t('Frown')]: 'icon-a-40',
+    [t('Broken')]: 'icon-a-41',
+    [t('Beckoning')]: 'icon-a-42',
+    [t('Ok')]: 'icon-a-43',
+    [t('Low')]: 'icon-a-44',
+    [t('Nice')]: 'icon-a-45',
+    [t('Applause')]: 'icon-a-46',
+    [t('GoodJob')]: 'icon-a-47',
+    [t('Hit')]: 'icon-a-48',
+    [t('Please')]: 'icon-a-49',
+    [t('Bye')]: 'icon-a-50',
+    [t('First')]: 'icon-a-51',
+    [t('Fist')]: 'icon-a-52',
+    [t('GiveMeFive')]: 'icon-a-53',
+    [t('Knife')]: 'icon-a-54',
+    [t('Hi')]: 'icon-a-55',
+    [t('No')]: 'icon-a-56',
+    [t('Hold')]: 'icon-a-57',
+    [t('Think')]: 'icon-a-58',
+    [t('Pig')]: 'icon-a-59',
+    [t('NoListen')]: 'icon-a-60',
+    [t('NoLook')]: 'icon-a-61',
+    [t('NoWords')]: 'icon-a-62',
+    [t('Monkey')]: 'icon-a-63',
+    [t('Bomb')]: 'icon-a-64',
+    [t('Sleep')]: 'icon-a-65',
+    [t('Cloud')]: 'icon-a-66',
+    [t('Rocket')]: 'icon-a-67',
+    [t('Ambulance')]: 'icon-a-68',
+    [t('Poop')]: 'icon-a-70',
+  }
+  // TODO react-string-replace 的行为不是那么的好理解，比如像下面这个正则就一定要加 '()'，后面最好干掉自己实现
+  const INPUT_EMOJI_SYMBOL_REG = new RegExp(
+    '(' +
+      Object.keys(EMOJI_ICON_MAP_CONFIG)
+        .map((item) => {
+          const left = `\\${item.slice(0, 1)}`
+          const right = `\\${item.slice(-1)}`
+          const mid = item.slice(1, -1)
+          return `${left}${mid}${right}`
+        })
+        .join('|') +
+      ')',
+    'g'
+  )
+  return {
+    EMOJI_ICON_MAP_CONFIG,
+    INPUT_EMOJI_SYMBOL_REG,
+  }
+}
diff --git a/react/src/YXUIKit/contact-kit-ui/package.json b/react/src/YXUIKit/contact-kit-ui/package.json
index 565c336..af785dd 100644
--- a/react/src/YXUIKit/contact-kit-ui/package.json
+++ b/react/src/YXUIKit/contact-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/contact-kit-ui",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "通讯录组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -52,11 +52,11 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/core-kit": "^0.7.0",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/core-kit": "^0.8.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/contact-kit-ui/src/contact-list/Container.tsx b/react/src/YXUIKit/contact-kit-ui/src/contact-list/Container.tsx
index eb0849a..b110af8 100644
--- a/react/src/YXUIKit/contact-kit-ui/src/contact-list/Container.tsx
+++ b/react/src/YXUIKit/contact-kit-ui/src/contact-list/Container.tsx
@@ -41,7 +41,7 @@ export const ContactListContainer: FC<ContactListContainerProps> = observer(
       logger.log('选中通讯录导航：', contactType)
       store.uiStore.selectContactType(contactType)
       if (contactType === 'msgList') {
-        store.uiStore.resetSystemMsgUnread()
+        store.sysMsgStore.resetSystemMsgUnread()
       }
       onItemClick?.(contactType)
     }
diff --git a/react/src/YXUIKit/contact-kit-ui/src/contact-list/components/ContactItem.tsx b/react/src/YXUIKit/contact-kit-ui/src/contact-list/components/ContactItem.tsx
index 6fce92f..248b59c 100644
--- a/react/src/YXUIKit/contact-kit-ui/src/contact-list/components/ContactItem.tsx
+++ b/react/src/YXUIKit/contact-kit-ui/src/contact-list/components/ContactItem.tsx
@@ -33,7 +33,7 @@ export const ContactItem: FC<ContactItemProps> = ({
         onItemClick(contactType)
       }}
     >
-      <Badge count={unread} dot={unread > 0}>
+      <Badge count={unread}>
         <Avatar
           size={36}
           icon={icon}
diff --git a/react/src/YXUIKit/contact-kit-ui/src/contact-list/style/contactItem.less b/react/src/YXUIKit/contact-kit-ui/src/contact-list/style/contactItem.less
index 02196ec..9511e6a 100644
--- a/react/src/YXUIKit/contact-kit-ui/src/contact-list/style/contactItem.less
+++ b/react/src/YXUIKit/contact-kit-ui/src/contact-list/style/contactItem.less
@@ -4,7 +4,7 @@
 
 .@{contact-item-prefix-cls} {
   cursor: pointer;
-  padding: 8px 16px;
+  padding: 11px 16px;
   display: flex;
   align-items: center;
   background-color: @yx-primary-color;
diff --git a/react/src/YXUIKit/contact-kit-ui/src/msg-list/components/MsgItem.tsx b/react/src/YXUIKit/contact-kit-ui/src/msg-list/components/MsgItem.tsx
index d5f741d..8cd2476 100644
--- a/react/src/YXUIKit/contact-kit-ui/src/msg-list/components/MsgItem.tsx
+++ b/react/src/YXUIKit/contact-kit-ui/src/msg-list/components/MsgItem.tsx
@@ -3,10 +3,12 @@ import {
   ComplexAvatarContainer,
   CrudeAvatar,
   useTranslation,
+  useStateContext,
 } from '../../../../common-ui/src'
 import { Button } from 'antd'
 import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'
 import { SystemMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/SystemMessageServiceInterface'
+import { observer } from 'mobx-react'
 
 export interface MsgItemProps {
   msg: SystemMessage
@@ -24,313 +26,317 @@ export interface MsgItemProps {
   commonPrefix?: string
 }
 
-export const MsgItem: FC<MsgItemProps> = ({
-  msg,
-  applyTeamLoaidng = false,
-  teamInviteLoading = false,
-  applyFriendLoading = false,
-  onAcceptApplyTeamClick,
-  onRejectApplyTeamClick,
-  onAcceptTeamInviteClick,
-  onRejectTeamInviteClick,
-  onAcceptApplyFriendClick,
-  onRejectApplyFriendClick,
-  afterSendMsgClick,
+export const MsgItem: FC<MsgItemProps> = observer(
+  ({
+    msg,
+    applyTeamLoaidng = false,
+    teamInviteLoading = false,
+    applyFriendLoading = false,
+    onAcceptApplyTeamClick,
+    onRejectApplyTeamClick,
+    onAcceptTeamInviteClick,
+    onRejectTeamInviteClick,
+    onAcceptApplyFriendClick,
+    onRejectApplyFriendClick,
+    afterSendMsgClick,
 
-  prefix = 'contact',
-  commonPrefix = 'common',
-}) => {
-  const _prefix = `${prefix}-msg-item`
+    prefix = 'contact',
+    commonPrefix = 'common',
+  }) => {
+    const _prefix = `${prefix}-msg-item`
 
-  const { t } = useTranslation()
+    const { t } = useTranslation()
 
-  const handleRejectApplyTeamClick = () => {
-    onRejectApplyTeamClick?.({
-      teamId: msg.attach?.toTeam?.teamId,
-      from: msg.attach?.fromUser?.account,
-    })
-  }
+    const { store } = useStateContext()
 
-  const handleAcceptApplyTeamClick = () => {
-    onAcceptApplyTeamClick?.({
-      teamId: msg.attach?.toTeam?.teamId,
-      from: msg.attach?.fromUser?.account,
-    })
-  }
+    const handleRejectApplyTeamClick = () => {
+      onRejectApplyTeamClick?.({
+        teamId: msg.attach?.toTeam?.teamId,
+        from: msg.attach?.fromUser?.account,
+      })
+    }
 
-  const handleRejectTeamInviteClick = () => {
-    onRejectTeamInviteClick?.({
-      teamId: msg.attach?.toTeam?.teamId,
-      from: msg.attach?.fromUser?.account,
-    })
-  }
+    const handleAcceptApplyTeamClick = () => {
+      onAcceptApplyTeamClick?.({
+        teamId: msg.attach?.toTeam?.teamId,
+        from: msg.attach?.fromUser?.account,
+      })
+    }
 
-  const handleAcceptTeamInviteClick = () => {
-    onAcceptTeamInviteClick?.({
-      teamId: msg.attach?.toTeam?.teamId,
-      from: msg.attach?.fromUser?.account,
-    })
-  }
+    const handleRejectTeamInviteClick = () => {
+      onRejectTeamInviteClick?.({
+        teamId: msg.attach?.toTeam?.teamId,
+        from: msg.attach?.fromUser?.account,
+      })
+    }
 
-  const handleRejectApplyFriendClick = () => {
-    onRejectApplyFriendClick?.(msg.attach?.fromUser?.account)
-  }
+    const handleAcceptTeamInviteClick = () => {
+      onAcceptTeamInviteClick?.({
+        teamId: msg.attach?.toTeam?.teamId,
+        from: msg.attach?.fromUser?.account,
+      })
+    }
 
-  const handleAcceptApplyFriendClick = () => {
-    onAcceptApplyFriendClick?.(msg.attach?.fromUser?.account)
-  }
+    const handleRejectApplyFriendClick = () => {
+      onRejectApplyFriendClick?.(msg.attach?.fromUser?.account)
+    }
 
-  const renderMsg = () => {
-    switch (msg.type) {
-      case 'applyTeam':
-        // 某人申请加入群聊
-        return (
-          <>
-            <div className={`${_prefix}-flex`}>
-              <CrudeAvatar
-                account={msg.attach?.toTeam?.teamId}
-                nick={msg.attach?.toTeam?.name}
-                avatar={msg.attach?.toTeam?.avatar}
-              />
-              <span className={`${_prefix}-label`}>
-                {msg.attach?.fromUser?.alias ||
-                  msg.attach?.fromUser?.nick ||
-                  msg.attach?.fromUser?.account}{' '}
-                {t('applyTeamText')} “
-                {msg.attach?.toTeam?.name || msg.attach?.toTeam?.teamId}”
-              </span>
-            </div>
-            {msg.state === 'pass' ? (
-              <div className={`${_prefix}-state`}>
-                <CheckCircleFilled className={`${_prefix}-state-icon`} />
-                <span>{t('acceptResultText')}</span>
-              </div>
-            ) : msg.state === 'decline' ? (
-              <div className={`${_prefix}-state`}>
-                <CloseCircleFilled className={`${_prefix}-state-icon`} />
-                <span>{t('rejectResultText')}</span>
+    const handleAcceptApplyFriendClick = () => {
+      onAcceptApplyFriendClick?.(msg.attach?.fromUser?.account)
+    }
+
+    const renderMsg = () => {
+      switch (msg.type) {
+        case 'applyTeam':
+          // 某人申请加入群聊
+          return (
+            <>
+              <div className={`${_prefix}-flex`}>
+                <CrudeAvatar
+                  account={msg.attach?.toTeam?.teamId}
+                  nick={msg.attach?.toTeam?.name}
+                  avatar={msg.attach?.toTeam?.avatar}
+                />
+                <span className={`${_prefix}-label`}>
+                  {store.uiStore.getAppellation({
+                    account: msg.attach?.fromUser?.account,
+                  })}{' '}
+                  {t('applyTeamText')} “
+                  {msg.attach?.toTeam?.name || msg.attach?.toTeam?.teamId}”
+                </span>
               </div>
-            ) : (
+              {msg.state === 'pass' ? (
+                <div className={`${_prefix}-state`}>
+                  <CheckCircleFilled className={`${_prefix}-state-icon`} />
+                  <span>{t('acceptResultText')}</span>
+                </div>
+              ) : msg.state === 'decline' ? (
+                <div className={`${_prefix}-state`}>
+                  <CloseCircleFilled className={`${_prefix}-state-icon`} />
+                  <span>{t('rejectResultText')}</span>
+                </div>
+              ) : (
+                <div className={`${_prefix}-flex`}>
+                  <Button
+                    className={`${_prefix}-reject-btn`}
+                    onClick={handleRejectApplyTeamClick}
+                    loading={applyTeamLoaidng}
+                  >
+                    {t('rejectText')}
+                  </Button>
+                  <Button
+                    onClick={handleAcceptApplyTeamClick}
+                    loading={applyTeamLoaidng}
+                    type="primary"
+                  >
+                    {t('acceptText')}
+                  </Button>
+                </div>
+              )}
+            </>
+          )
+        case 'teamInvite':
+          // 某人邀请你进群
+          return (
+            <>
               <div className={`${_prefix}-flex`}>
-                <Button
-                  className={`${_prefix}-reject-btn`}
-                  onClick={handleRejectApplyTeamClick}
-                  loading={applyTeamLoaidng}
-                >
-                  {t('rejectText')}
-                </Button>
-                <Button
-                  onClick={handleAcceptApplyTeamClick}
-                  loading={applyTeamLoaidng}
-                  type="primary"
-                >
-                  {t('acceptText')}
-                </Button>
+                <CrudeAvatar
+                  account={msg.attach?.toTeam?.teamId}
+                  nick={msg.attach?.toTeam?.name}
+                  avatar={msg.attach?.toTeam?.avatar}
+                />
+                <span className={`${_prefix}-label`}>
+                  {store.uiStore.getAppellation({
+                    account: msg.attach?.fromUser?.account,
+                  })}{' '}
+                  {t('inviteTeamText')} “
+                  {msg.attach?.toTeam?.name || msg.attach?.toTeam?.teamId}”
+                </span>
               </div>
-            )}
-          </>
-        )
-      case 'teamInvite':
-        // 某人邀请你进群
-        return (
-          <>
-            <div className={`${_prefix}-flex`}>
-              <CrudeAvatar
-                account={msg.attach?.toTeam?.teamId}
-                nick={msg.attach?.toTeam?.name}
-                avatar={msg.attach?.toTeam?.avatar}
-              />
-              <span className={`${_prefix}-label`}>
-                {msg.attach?.fromUser?.alias ||
-                  msg.attach?.fromUser?.nick ||
-                  msg.attach?.fromUser?.account}{' '}
-                {t('inviteTeamText')} “
-                {msg.attach?.toTeam?.name || msg.attach?.toTeam?.teamId}”
-              </span>
-            </div>
-            {msg.state === 'pass' ? (
-              <div className={`${_prefix}-state`}>
-                <CheckCircleFilled className={`${_prefix}-state-icon`} />
-                <span>{t('acceptResultText')}</span>
+              {msg.state === 'pass' ? (
+                <div className={`${_prefix}-state`}>
+                  <CheckCircleFilled className={`${_prefix}-state-icon`} />
+                  <span>{t('acceptResultText')}</span>
+                </div>
+              ) : msg.state === 'decline' ? (
+                <div className={`${_prefix}-state`}>
+                  <CloseCircleFilled className={`${_prefix}-state-icon`} />
+                  <span>{t('rejectResultText')}</span>
+                </div>
+              ) : (
+                <div className={`${_prefix}-flex`}>
+                  <Button
+                    className={`${_prefix}-reject-btn`}
+                    onClick={handleRejectTeamInviteClick}
+                    loading={teamInviteLoading}
+                  >
+                    {t('rejectText')}
+                  </Button>
+                  <Button
+                    onClick={handleAcceptTeamInviteClick}
+                    loading={teamInviteLoading}
+                    type="primary"
+                  >
+                    {t('acceptText')}
+                  </Button>
+                </div>
+              )}
+            </>
+          )
+        case 'rejectTeamApply':
+          // 管理员拒绝你的入群申请
+          return (
+            <>
+              <div className={`${_prefix}-flex`}>
+                <CrudeAvatar
+                  account={msg.attach?.fromTeam?.teamId}
+                  nick={msg.attach?.fromTeam?.name}
+                  avatar={msg.attach?.fromTeam?.avatar}
+                />
+                <span className={`${_prefix}-name`}>
+                  {msg.attach?.fromTeam?.name || msg.attach?.fromTeam?.teamId}
+                </span>
               </div>
-            ) : msg.state === 'decline' ? (
               <div className={`${_prefix}-state`}>
                 <CloseCircleFilled className={`${_prefix}-state-icon`} />
                 <span>{t('rejectResultText')}</span>
               </div>
-            ) : (
+            </>
+          )
+        case 'rejectTeamInvite':
+          // 对方拒绝你的群邀请
+          return (
+            <>
               <div className={`${_prefix}-flex`}>
-                <Button
-                  className={`${_prefix}-reject-btn`}
-                  onClick={handleRejectTeamInviteClick}
-                  loading={teamInviteLoading}
-                >
-                  {t('rejectText')}
-                </Button>
-                <Button
-                  onClick={handleAcceptTeamInviteClick}
-                  loading={teamInviteLoading}
-                  type="primary"
-                >
-                  {t('acceptText')}
-                </Button>
+                <ComplexAvatarContainer
+                  account={msg.attach?.fromUser?.account}
+                  prefix={commonPrefix}
+                  afterSendMsgClick={afterSendMsgClick}
+                />
+                <span className={`${_prefix}-name`}>
+                  {store.uiStore.getAppellation({
+                    account: msg.attach?.fromUser?.account,
+                  })}{' '}
+                  {t('rejectTeamInviteText')}
+                </span>
               </div>
-            )}
-          </>
-        )
-      case 'rejectTeamApply':
-        // 管理员拒绝你的入群申请
-        return (
-          <>
-            <div className={`${_prefix}-flex`}>
-              <CrudeAvatar
-                account={msg.attach?.fromTeam?.teamId}
-                nick={msg.attach?.fromTeam?.name}
-                avatar={msg.attach?.fromTeam?.avatar}
-              />
-              <span className={`${_prefix}-name`}>
-                {msg.attach?.fromTeam?.name || msg.attach?.fromTeam?.teamId}
-              </span>
-            </div>
-            <div className={`${_prefix}-state`}>
-              <CloseCircleFilled className={`${_prefix}-state-icon`} />
-              <span>{t('rejectResultText')}</span>
-            </div>
-          </>
-        )
-      case 'rejectTeamInvite':
-        // 对方拒绝你的群邀请
-        return (
-          <>
-            <div className={`${_prefix}-flex`}>
-              <ComplexAvatarContainer
-                account={msg.attach?.fromUser?.account}
-                prefix={commonPrefix}
-                afterSendMsgClick={afterSendMsgClick}
-              />
-              <span className={`${_prefix}-name`}>
-                {msg.attach?.fromUser?.alias ||
-                  msg.attach?.fromUser?.nick ||
-                  msg.attach?.fromUser?.account}{' '}
-                {t('rejectTeamInviteText')}
-              </span>
-            </div>
-            {/* <div className={`${_prefix}-state`}>
+              {/* <div className={`${_prefix}-state`}>
               <CloseCircleFilled className={`${_prefix}-state-icon`} />
               <span>{t('rejectResultText')}</span>
             </div> */}
-          </>
-        )
-      case 'friendRequest': {
-        switch (msg.attach?.type) {
-          case 'applyFriend':
-            // 某人请求添加你为好友
-            return (
-              <>
-                <div className={`${_prefix}-flex`}>
-                  <ComplexAvatarContainer
-                    account={msg.attach?.fromUser?.account}
-                    prefix={commonPrefix}
-                    afterSendMsgClick={afterSendMsgClick}
-                  />
-                  <span className={`${_prefix}-name`}>
-                    {msg.attach?.fromUser?.alias ||
-                      msg.attach?.fromUser?.nick ||
-                      msg.attach?.fromUser?.account}
-                  </span>
-                  <span className={`${_prefix}-label`}>
-                    {t('applyFriendText')}
-                  </span>
-                </div>
-                {msg.state === 'pass' ? (
-                  <div className={`${_prefix}-state`}>
-                    <CheckCircleFilled className={`${_prefix}-state-icon`} />
-                    <span>{t('acceptResultText')}</span>
-                  </div>
-                ) : msg.state === 'decline' ? (
-                  <div className={`${_prefix}-state`}>
-                    <CloseCircleFilled className={`${_prefix}-state-icon`} />
-                    <span>{t('rejectResultText')}</span>
+            </>
+          )
+        case 'friendRequest': {
+          switch (msg.attach?.type) {
+            case 'applyFriend':
+              // 某人请求添加你为好友
+              return (
+                <>
+                  <div className={`${_prefix}-flex`}>
+                    <ComplexAvatarContainer
+                      account={msg.attach?.fromUser?.account}
+                      prefix={commonPrefix}
+                      afterSendMsgClick={afterSendMsgClick}
+                    />
+                    <span className={`${_prefix}-name`}>
+                      {store.uiStore.getAppellation({
+                        account: msg.attach?.fromUser?.account,
+                      })}
+                    </span>
+                    <span className={`${_prefix}-label`}>
+                      {t('applyFriendText')}
+                    </span>
                   </div>
-                ) : (
+                  {msg.state === 'pass' ? (
+                    <div className={`${_prefix}-state`}>
+                      <CheckCircleFilled className={`${_prefix}-state-icon`} />
+                      <span>{t('acceptResultText')}</span>
+                    </div>
+                  ) : msg.state === 'decline' ? (
+                    <div className={`${_prefix}-state`}>
+                      <CloseCircleFilled className={`${_prefix}-state-icon`} />
+                      <span>{t('rejectResultText')}</span>
+                    </div>
+                  ) : (
+                    <div className={`${_prefix}-flex`}>
+                      <Button
+                        className={`${_prefix}-reject-btn`}
+                        onClick={handleRejectApplyFriendClick}
+                        loading={applyFriendLoading}
+                      >
+                        {t('rejectText')}
+                      </Button>
+                      <Button
+                        onClick={handleAcceptApplyFriendClick}
+                        loading={applyFriendLoading}
+                        type="primary"
+                      >
+                        {t('acceptText')}
+                      </Button>
+                    </div>
+                  )}
+                </>
+              )
+            case 'rejectFriendApply':
+              // 对方拒绝了好友申请
+              return (
+                <>
                   <div className={`${_prefix}-flex`}>
-                    <Button
-                      className={`${_prefix}-reject-btn`}
-                      onClick={handleRejectApplyFriendClick}
-                      loading={applyFriendLoading}
-                    >
-                      {t('rejectText')}
-                    </Button>
-                    <Button
-                      onClick={handleAcceptApplyFriendClick}
-                      loading={applyFriendLoading}
-                      type="primary"
-                    >
-                      {t('acceptText')}
-                    </Button>
+                    <ComplexAvatarContainer
+                      account={msg.attach?.fromUser?.account}
+                      prefix={commonPrefix}
+                      afterSendMsgClick={afterSendMsgClick}
+                    />
+                    <span className={`${_prefix}-name`}>
+                      {store.uiStore.getAppellation({
+                        account: msg.attach?.fromUser?.account,
+                      })}{' '}
+                      {t('beRejectResultText')}
+                    </span>
                   </div>
-                )}
-              </>
-            )
-          case 'rejectFriendApply':
-            // 对方拒绝了好友申请
-            return (
-              <>
-                <div className={`${_prefix}-flex`}>
-                  <ComplexAvatarContainer
-                    account={msg.attach?.fromUser?.account}
-                    prefix={commonPrefix}
-                    afterSendMsgClick={afterSendMsgClick}
-                  />
-                  <span className={`${_prefix}-name`}>
-                    {msg.attach?.fromUser?.alias ||
-                      msg.attach?.fromUser?.nick ||
-                      msg.attach?.fromUser?.account}{' '}
-                    {t('beRejectResultText')}
-                  </span>
-                </div>
-                {/* <div className={`${_prefix}-state`}>
+                  {/* <div className={`${_prefix}-state`}>
                   <CloseCircleFilled className={`${_prefix}-state-icon`} />
                   <span>{t('beRejectResultText')}</span>
                 </div> */}
-              </>
-            )
-          case 'passFriendApply':
-            // 对方同意了好友申请
-            return (
-              <>
-                <div className={`${_prefix}-flex`}>
-                  <ComplexAvatarContainer
-                    account={msg.attach?.fromUser?.account}
-                    prefix={commonPrefix}
-                    afterSendMsgClick={afterSendMsgClick}
-                  />
-                  <span className={`${_prefix}-name`}>
-                    {msg.attach?.fromUser?.alias ||
-                      msg.attach?.fromUser?.nick ||
-                      msg.attach?.fromUser?.account}{' '}
-                    {t('passResultText')}
-                  </span>
-                </div>
-              </>
-            )
-          default:
-            return null
+                </>
+              )
+            case 'passFriendApply':
+              // 对方同意了好友申请
+              return (
+                <>
+                  <div className={`${_prefix}-flex`}>
+                    <ComplexAvatarContainer
+                      account={msg.attach?.fromUser?.account}
+                      prefix={commonPrefix}
+                      afterSendMsgClick={afterSendMsgClick}
+                    />
+                    <span className={`${_prefix}-name`}>
+                      {store.uiStore.getAppellation({
+                        account: msg.attach?.fromUser?.account,
+                      })}{' '}
+                      {t('passResultText')}
+                    </span>
+                  </div>
+                </>
+              )
+            default:
+              return null
+          }
         }
+        default:
+          return null
       }
-      default:
-        return null
     }
-  }
 
-  return (
-    <div
-      className={_prefix}
-      onClick={(e) => {
-        e.stopPropagation()
-      }}
-    >
-      {renderMsg()}
-    </div>
-  )
-}
+    return (
+      <div
+        className={_prefix}
+        onClick={(e) => {
+          e.stopPropagation()
+        }}
+      >
+        {renderMsg()}
+      </div>
+    )
+  }
+)
diff --git a/react/src/YXUIKit/conversation-kit-ui/package.json b/react/src/YXUIKit/conversation-kit-ui/package.json
index 7b97c30..dfcd6c2 100644
--- a/react/src/YXUIKit/conversation-kit-ui/package.json
+++ b/react/src/YXUIKit/conversation-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/conversation-kit-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "会话组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -52,11 +52,11 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/core-kit": "^0.7.0",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/core-kit": "^0.8.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/conversation-kit-ui/src/components/ConversationItem.tsx b/react/src/YXUIKit/conversation-kit-ui/src/components/ConversationItem.tsx
index d15552b..3c13d4d 100644
--- a/react/src/YXUIKit/conversation-kit-ui/src/components/ConversationItem.tsx
+++ b/react/src/YXUIKit/conversation-kit-ui/src/components/ConversationItem.tsx
@@ -2,7 +2,12 @@ import React, { FC, ReactElement, useMemo } from 'react'
 import moment from 'moment'
 import { Dropdown } from 'antd'
 import { ExclamationCircleFilled } from '@ant-design/icons'
-import { CommonIcon, ParseSession, useTranslation } from '../../../common-ui/src'
+import {
+  CommonIcon,
+  ParseSession,
+  getMsgContentTipByType,
+  useTranslation,
+} from '../../../common-ui/src'
 import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
 
 export interface ConversationItemProps {
@@ -59,33 +64,8 @@ export const ConversationItem: FC<ConversationItemProps> = ({
     if (status === 'sendFailed' || status === 'refused') {
       return <ExclamationCircleFilled style={{ color: 'red' }} />
     }
-    switch (type) {
-      case 'text':
-        return body || `[${t('textMsgText')}]`
-      case 'audio':
-        return `[${t('audioMsgText')}]`
-      case 'custom':
-        return <ParseSession msg={lastMsg!} prefix={commonPrefix} />
-      case 'file':
-        return `[${t('fileMsgText')}]`
-      case 'g2':
-        return `[${t('callMsgText')}]`
-      case 'geo':
-        return `[${t('geoMsgText')}]`
-      case 'image':
-        return `[${t('imgMsgText')}]`
-      case 'notification':
-        return `[${t('notiMsgText')}]`
-      case 'robot':
-        return `[${t('robotMsgText')}]`
-      case 'tip':
-        return `[${t('tipMsgText')}]`
-      case 'video':
-        return `[${t('videoMsgText')}]`
-      default:
-        return `[${t('unknowMsgText')}]`
-    }
-  }, [lastMsg, commonPrefix, t])
+    return lastMsg ? getMsgContentTipByType(lastMsg, t) : ''
+  }, [lastMsg, t])
 
   return (
     <Dropdown overlay={menuRenderer} trigger={['contextMenu']}>
diff --git a/react/src/YXUIKit/im-kit-ui/package.json b/react/src/YXUIKit/im-kit-ui/package.json
index 6529255..0701f8d 100644
--- a/react/src/YXUIKit/im-kit-ui/package.json
+++ b/react/src/YXUIKit/im-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/im-kit-ui",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "云信即时通讯组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -58,16 +58,16 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@xkit-yx/chat-kit-ui": "^0.5.1",
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/contact-kit-ui": "^0.3.1",
-    "@xkit-yx/conversation-kit-ui": "^0.3.1",
-    "@xkit-yx/core-kit": "^0.7.0",
-    "@xkit-yx/search-kit-ui": "^0.4.1",
-    "@xkit-yx/utils": "^0.4.5",
+    "@xkit-yx/chat-kit-ui": "^0.6.1",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/contact-kit-ui": "^0.4.1",
+    "@xkit-yx/conversation-kit-ui": "^0.3.3",
+    "@xkit-yx/core-kit": "^0.8.0",
+    "@xkit-yx/search-kit-ui": "^0.5.1",
+    "@xkit-yx/utils": "^0.5.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/im-kit-ui/src/index.ts b/react/src/YXUIKit/im-kit-ui/src/index.ts
index e9fd7b9..aca039f 100644
--- a/react/src/YXUIKit/im-kit-ui/src/index.ts
+++ b/react/src/YXUIKit/im-kit-ui/src/index.ts
@@ -20,6 +20,7 @@ import {
   urls,
   FriendSelectContainer,
   Welcome,
+  ReadPercent,
   ParseSession,
   useStateContext,
   useTranslation,
@@ -103,6 +104,7 @@ export {
   urls,
   FriendSelectContainer,
   Welcome,
+  ReadPercent,
   ParseSession,
   useStateContext,
   useTranslation,
diff --git a/react/src/YXUIKit/im-kit-ui/src/style/index.ts b/react/src/YXUIKit/im-kit-ui/src/style/index.ts
index 614d1fd..be17b26 100644
--- a/react/src/YXUIKit/im-kit-ui/src/style/index.ts
+++ b/react/src/YXUIKit/im-kit-ui/src/style/index.ts
@@ -8,11 +8,13 @@ import '../../../common-ui/src/components/Welcome/style'
 import '../../../common-ui/src/components/MyUserCard/style'
 import '../../../common-ui/src/components/UserCard/style'
 import '../../../common-ui/src/components/SearchInput/style'
+import '../../../common-ui/src/components/ReadPercent/style'
 
 import '../../../conversation-kit-ui/src/style'
 import '../../../contact-kit-ui/src/black-list/style'
 import '../../../contact-kit-ui/src/friend-list/style'
 import '../../../contact-kit-ui/src/group-list/style'
+import '../../../contact-kit-ui/src/msg-list/style'
 import '../../../contact-kit-ui/src/contact-list/style'
 import '../../../contact-kit-ui/src/contact-info/style'
 import '../../../chat-kit-ui/src/style'
diff --git a/react/src/YXUIKit/search-kit-ui/package.json b/react/src/YXUIKit/search-kit-ui/package.json
index e9bba84..0c3d0a7 100644
--- a/react/src/YXUIKit/search-kit-ui/package.json
+++ b/react/src/YXUIKit/search-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/search-kit-ui",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "搜索组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -54,12 +54,12 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/core-kit": "^0.7.0",
-    "@xkit-yx/utils": "^0.4.5",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/core-kit": "^0.8.0",
+    "@xkit-yx/utils": "^0.5.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/components/CreateModal/index.tsx b/react/src/YXUIKit/search-kit-ui/src/add/components/CreateModal/index.tsx
index 290ab09..3c5c642 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/components/CreateModal/index.tsx
+++ b/react/src/YXUIKit/search-kit-ui/src/add/components/CreateModal/index.tsx
@@ -46,7 +46,7 @@ const CreateModal: React.FC<CreateModalProps> = ({
       const team = await store.teamStore.createTeamActive({
         accounts: selectedList.map((item) => item.account),
         avatar: avatarUrl,
-        name: groupName,
+        name: groupName.trim(),
       })
       message.success(t('createTeamSuccessText'))
       setTeamId(team.teamId)
@@ -115,7 +115,7 @@ const CreateModal: React.FC<CreateModalProps> = ({
           maxLength={30}
           value={groupName}
           onChange={(e) => {
-            setGroupName(e.target.value.trim())
+            setGroupName(e.target.value)
           }}
         />
       </div>
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/components/JoinTeamModal/index.tsx b/react/src/YXUIKit/search-kit-ui/src/add/components/JoinTeamModal/index.tsx
index 1c05a09..115914d 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/components/JoinTeamModal/index.tsx
+++ b/react/src/YXUIKit/search-kit-ui/src/add/components/JoinTeamModal/index.tsx
@@ -70,7 +70,12 @@ const JoinTeamModal: React.FC<JoinTeamModalProps> = ({
         }
         setAdding(true)
         await store.teamStore.applyTeamActive(searchRes.teamId)
-        setInTeam(true)
+        if (store.teamStore.teams.get(searchRes.teamId)) {
+          setInTeam(true)
+          message.success(t('joinTeamSuccessText'))
+        } else {
+          message.success(t('applyTeamSuccessText'))
+        }
       }
       setAdding(false)
     } catch (error) {
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/style/addItem.less b/react/src/YXUIKit/search-kit-ui/src/add/style/addItem.less
index 44aacb3..322e0d4 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/style/addItem.less
+++ b/react/src/YXUIKit/search-kit-ui/src/add/style/addItem.less
@@ -4,7 +4,6 @@
 
 .@{add-prefix-item-cls} {
   display: flex;
-  width: 76px;
   height: 16px;
   cursor: pointer;
 
@@ -14,7 +13,6 @@
   }
 
   &-content {
-    width: 56px;
     height: 16px;
     margin-left: 6px;
     font-family: 'PingFang SC';
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/style/addList.less b/react/src/YXUIKit/search-kit-ui/src/add/style/addList.less
index 1684121..054fda5 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/style/addList.less
+++ b/react/src/YXUIKit/search-kit-ui/src/add/style/addList.less
@@ -7,6 +7,5 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  width: 76px;
   height: 80px;
 }
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/style/addModal.less b/react/src/YXUIKit/search-kit-ui/src/add/style/addModal.less
index ff6a166..b4de25f 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/style/addModal.less
+++ b/react/src/YXUIKit/search-kit-ui/src/add/style/addModal.less
@@ -22,7 +22,7 @@
   &-empty-content {
     margin-top: 16px;
     position: absolute;
-    width: 70px;
+    width: 200px;
     height: 16px;
     font-family: 'PingFang SC';
     font-style: normal;
diff --git a/react/src/YXUIKit/search-kit-ui/src/add/style/createModal.less b/react/src/YXUIKit/search-kit-ui/src/add/style/createModal.less
index 3f0bb54..5888617 100644
--- a/react/src/YXUIKit/search-kit-ui/src/add/style/createModal.less
+++ b/react/src/YXUIKit/search-kit-ui/src/add/style/createModal.less
@@ -12,13 +12,14 @@
   }
 
   &-group-name {
-    margin-top: 24px;
+    margin-top: 12px;
     display: flex;
     align-items: center;
 
     &-content {
-      width: 42px;
+      width: 80px;
       height: 16px;
+      text-align: center;
       font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 400;
@@ -40,8 +41,9 @@
     align-items: center;
 
     &-content {
-      width: 42px;
+      width: 85px;
       height: 16px;
+      text-align: center;
       font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 400;
diff --git a/react/src/components/IMApp/components/MenuOptions.tsx b/react/src/components/IMApp/components/MenuOptions.tsx
new file mode 100644
index 0000000..84787f3
--- /dev/null
+++ b/react/src/components/IMApp/components/MenuOptions.tsx
@@ -0,0 +1,99 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import { demo_zh } from '../locales/demo_locale'
+import { Modal } from 'antd'
+interface IProps {
+  onLogout?: () => void
+  locale: 'zh' | 'en'
+  changeLanguage?: (value: 'zh' | 'en') => void
+  openSettingModal: () => void
+  resetMenuUI: () => void
+  menuVisible: boolean
+  subMenuVisible: boolean
+  setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>
+  setSubMenuVisible: React.Dispatch<React.SetStateAction<boolean>>
+  t: (str: keyof typeof demo_zh) => string
+}
+const Menu: FC<IProps> = ({
+  onLogout,
+  locale,
+  changeLanguage,
+  openSettingModal,
+  resetMenuUI,
+  menuVisible,
+  subMenuVisible,
+  setMenuVisible,
+  setSubMenuVisible,
+  t,
+}) => {
+  const logout = () => {
+    Modal.confirm({
+      title: t('logoutConfirmText'),
+      onOk: () => {
+        onLogout()
+      },
+    })
+  }
+  return (
+    <div
+      className={classNames('menu-wrapper', {
+        'show-menu': menuVisible,
+      })}
+      onMouseEnter={() => {
+        setMenuVisible(true)
+      }}
+      onMouseLeave={resetMenuUI}
+    >
+      <div className="menu">
+        <div
+          onClick={() => setSubMenuVisible(!subMenuVisible)}
+          className={classNames('menu-item', {
+            'menu-bg': subMenuVisible,
+          })}
+        >
+          <i className="iconfont language">&#xe728;</i>
+          <div>{locale == 'zh' ? '中文' : 'English'}</div>
+          <i className="iconfont arrow">&#xe72d;</i>
+        </div>
+        <div className="menu-item" onClick={() => openSettingModal()}>
+          <i className="iconfont seeting">&#xe6d6;</i>
+          <div>{t('settingText')}</div>
+        </div>
+        <div className="menu-item" onClick={() => logout()}>
+          <i className="iconfont logout">&#xe729;</i>
+          <div>{t('logoutText')}</div>
+        </div>
+      </div>
+      <div
+        className={classNames('sub-menu', {
+          'show-sub-menu': subMenuVisible,
+        })}
+      >
+        <div
+          className={classNames('sub-menu-item', {
+            active: locale === 'zh',
+          })}
+          onClick={() => {
+            changeLanguage?.('zh')
+            resetMenuUI()
+          }}
+        >
+          中文
+        </div>
+        <div
+          className={classNames('sub-menu-item', {
+            active: locale === 'en',
+          })}
+          onClick={() => {
+            changeLanguage?.('en')
+            resetMenuUI()
+          }}
+        >
+          English
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Menu
diff --git a/react/src/components/IMApp/components/Menus.tsx b/react/src/components/IMApp/components/Menus.tsx
new file mode 100644
index 0000000..7c4e5c8
--- /dev/null
+++ b/react/src/components/IMApp/components/Menus.tsx
@@ -0,0 +1,53 @@
+import React, { FC, useState } from 'react'
+import MenuOptions from './MenuOptions'
+import { demo_zh } from '../locales/demo_locale'
+import '../index.less'
+interface IProps {
+  onLogout?: () => void
+  locale: 'zh' | 'en'
+  changeLanguage?: (value: 'zh' | 'en') => void
+  openSettingModal: () => void
+  t: (str: keyof typeof demo_zh) => string
+}
+const MenuIcon: FC<IProps> = ({
+  onLogout,
+  locale,
+  changeLanguage,
+  openSettingModal,
+  t,
+}) => {
+  const [menuVisible, setMenuVisible] = useState<boolean>(false)
+  const [subMenuVisible, setSubMenuVisible] = useState<boolean>(false)
+  const resetMenuUI = () => {
+    setMenuVisible(false)
+    setSubMenuVisible(false)
+  }
+
+  return (
+    <div>
+      <div
+        className="menu-icon"
+        onMouseEnter={() => {
+          setMenuVisible(true)
+          setSubMenuVisible(false)
+        }}
+      >
+        <i className="iconfont expand">&#xe72e;</i>
+      </div>
+      <MenuOptions
+        onLogout={onLogout}
+        locale={locale}
+        changeLanguage={changeLanguage}
+        openSettingModal={openSettingModal}
+        resetMenuUI={resetMenuUI}
+        menuVisible={menuVisible}
+        subMenuVisible={subMenuVisible}
+        setMenuVisible={setMenuVisible}
+        setSubMenuVisible={setSubMenuVisible}
+        t={t}
+      />
+    </div>
+  )
+}
+
+export default MenuIcon
diff --git a/react/src/components/IMApp/components/Setting.tsx b/react/src/components/IMApp/components/Setting.tsx
new file mode 100644
index 0000000..bb27039
--- /dev/null
+++ b/react/src/components/IMApp/components/Setting.tsx
@@ -0,0 +1,105 @@
+import React, { FC } from 'react'
+import { Select, Modal, Form } from 'antd'
+import '../index.less'
+import { demo_zh } from '../locales/demo_locale'
+
+interface IProps {
+  sdkVersion: 1 | 2
+  setSdkVersion: React.Dispatch<React.SetStateAction<1 | 2>>
+  isSettingModalOpen: boolean
+  handleSettingCancel: () => void
+  p2pMsgReceiptVisible: boolean
+  setP2pMsgReceiptVisible: React.Dispatch<React.SetStateAction<boolean>>
+  teamMsgReceiptVisible: boolean
+  setTeamMsgReceiptVisible: React.Dispatch<React.SetStateAction<boolean>>
+  addFriendNeedVerify: boolean
+  setAddFriendNeedVerify: React.Dispatch<React.SetStateAction<boolean>>
+  t: (str: keyof typeof demo_zh) => string
+  locale: 'zh' | 'en'
+}
+const SettingModal: FC<IProps> = ({
+  isSettingModalOpen,
+  handleSettingCancel,
+  sdkVersion,
+  setSdkVersion,
+  p2pMsgReceiptVisible,
+  setP2pMsgReceiptVisible,
+  teamMsgReceiptVisible,
+  setTeamMsgReceiptVisible,
+  addFriendNeedVerify,
+  setAddFriendNeedVerify,
+  t,
+  locale,
+}) => {
+  return (
+    <Modal
+      title={t('settingText')}
+      visible={isSettingModalOpen}
+      onCancel={handleSettingCancel}
+      footer={null}
+      width={locale === 'zh' ? 420 : 460}
+    >
+      <Form labelCol={{ span: locale === 'zh' ? 12 : 14 }}>
+        <Form.Item label={t('sdkVersionSelectionText')}>
+          <Select
+            options={[
+              { label: 'IM SDK', value: 1 },
+              { label: 'IM Elite SDK ', value: 2 },
+            ]}
+            style={{ width: '150px' }}
+            value={sdkVersion}
+            onChange={(value) => {
+              setSdkVersion(value)
+              sessionStorage.setItem('sdkVersion', value.toString())
+            }}
+          />
+        </Form.Item>
+        <Form.Item label={t('p2pMsgVisibleModeText')}>
+          <Select
+            options={[
+              { label: t('yesText'), value: true },
+              { label: t('noText'), value: false },
+            ]}
+            style={{ width: '150px' }}
+            value={p2pMsgReceiptVisible}
+            onChange={(value) => {
+              setP2pMsgReceiptVisible(value)
+              sessionStorage.setItem('p2pMsgReceiptVisible', value.toString())
+            }}
+          />
+        </Form.Item>
+        <Form.Item label={t('teamMsgVisibleModeText')}>
+          <Select
+            options={[
+              { label: t('yesText'), value: true },
+              { label: t('noText'), value: false },
+            ]}
+            style={{ width: '150px' }}
+            value={teamMsgReceiptVisible}
+            onChange={(value) => {
+              setTeamMsgReceiptVisible(value)
+              sessionStorage.setItem('teamMsgReceiptVisible', value.toString())
+            }}
+          />
+        </Form.Item>
+        <Form.Item label={t('addFriendMode')}>
+          <Select
+            options={[
+              { label: t('needVerifyText'), value: true },
+              { label: t('notNeedVerifyText'), value: false },
+            ]}
+            style={{ width: '150px' }}
+            value={addFriendNeedVerify}
+            onChange={(value) => {
+              setAddFriendNeedVerify(value)
+              sessionStorage.setItem('addFriendNeedVerify', value.toString())
+              window.location.reload()
+            }}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default SettingModal
diff --git a/react/src/components/IMApp/iconfont.css b/react/src/components/IMApp/iconfont.css
index 5a4ae9e..d1b6dc3 100644
--- a/react/src/components/IMApp/iconfont.css
+++ b/react/src/components/IMApp/iconfont.css
@@ -1,11 +1,8 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 3835752 */
-  src: url('//at.alicdn.com/t/c/font_3835752_j4c63jj9g5.woff2?t=1671679336205')
-      format('woff2'),
-    url('//at.alicdn.com/t/c/font_3835752_j4c63jj9g5.woff?t=1671679336205')
-      format('woff'),
-    url('//at.alicdn.com/t/c/font_3835752_j4c63jj9g5.ttf?t=1671679336205')
-      format('truetype');
+  font-family: 'iconfont';  /* Project id 3429868 */
+  src: url('//at.alicdn.com/t/c/font_3429868_1tnmbfdv30p.woff2?t=1672901807584') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3429868_1tnmbfdv30p.woff?t=1672901807584') format('woff'),
+       url('//at.alicdn.com/t/c/font_3429868_1tnmbfdv30p.ttf?t=1672901807584') format('truetype');
 }
 
 .iconfont {
diff --git a/react/src/components/IMApp/index.less b/react/src/components/IMApp/index.less
index a31a1f5..055a6a1 100644
--- a/react/src/components/IMApp/index.less
+++ b/react/src/components/IMApp/index.less
@@ -41,6 +41,19 @@
     flex-direction: column;
     align-items: center;
     position: relative;
+
+    .icon-label {
+      font-size: 12px;
+      text-align: center;
+    }
+
+    .expand {
+      color: #c5c9d2;
+    }
+
+    .expand:hover {
+      color: #656a72;
+    }
   }
 
   .avatar-icon {
@@ -48,6 +61,7 @@
     border-radius: 50%;
     border: 1px solid #e8e8e8;
   }
+
   .iconfont {
     font-size: 24px;
   }
@@ -80,9 +94,97 @@
     cursor: pointer;
   }
 
-  .icon-label {
-    font-size: 12px;
-    text-align: center;
+  .menu-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 20px;
+    font-size: 22px;
+    color: rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+  }
+
+  .menu-wrapper {
+    position: absolute;
+    display: none;
+    z-index: 999;
+    width: 300px;
+    height: 102px;
+    left: 10px;
+    top: 510px;
+    padding: 4px 4px 4px 40px;
+    cursor: pointer;
+
+    .menu {
+      width: 122px;
+      padding: 4px;
+      background: #ffffff;
+      border: 1px solid #e6e6e6;
+      box-shadow: 0px 4px 7px rgba(133, 136, 140, 0.25);
+      border-radius: 8px;
+    }
+
+    .language {
+      font-size: 15px;
+      margin-right: 7px;
+      color: #656a72;
+    }
+
+    .arrow {
+      font-size: 15px;
+      position: absolute;
+      left: 130px;
+      color: #656A72;
+    }
+
+    .logout {
+      font-size: 15px;
+      margin-right: 7px;
+      color: #656a72;
+    }
+
+    .seeting {
+      font-size: 15px;
+      margin-right: 7px;
+      color: #95989d;
+    }
+
+    .sub-menu {
+      position: absolute;
+      z-index: 999;
+      width: 132px;
+      height: 72px;
+      left: 170px;
+      top: 5px;
+      background: #ffffff;
+      border: 1px solid #e6e6e6;
+      box-shadow: 0px 4px 7px rgba(133, 136, 140, 0.25);
+      border-radius: 8px;
+      padding: 4px;
+      display: none;
+    }
+
+    .show-sub-menu {
+      display: block;
+    }
+  }
+
+  .menu-bg {
+    background-color: #f7f9fa;
+  }
+
+  .show-menu {
+    display: block;
+  }
+
+  .menu-item,
+  .sub-menu-item {
+    width: 114px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 4px;
   }
 
   .right {
@@ -97,5 +199,6 @@
 
   .right-content {
     flex: 1;
+    width: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/react/src/components/IMApp/index.tsx b/react/src/components/IMApp/index.tsx
index ac017b0..c202208 100644
--- a/react/src/components/IMApp/index.tsx
+++ b/react/src/components/IMApp/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from 'react'
 import {
   Provider, // 全局上下文
   ConversationContainer, // 会话列表组件
@@ -9,42 +9,97 @@ import {
   ContactInfoContainer, // 通讯录——通讯录详情组件，包含好友列表、群组列表以及黑名单列表
   MyAvatarContainer,
   useStateContext, // 用户资料组件
-  ContextManagerTypes,
-} from "../../YXUIKit/im-kit-ui/src";
+} from '@xkit-yx/im-kit-ui/src'
+import { ConfigProvider, Badge } from 'antd'
+import zhCN from 'antd/es/locale/zh_CN'
+import enUS from 'antd/es/locale/en_US'
+import en from './locales/en'
+import zh from './locales/zh'
+import { demo_en, demo_zh } from './locales/demo_locale'
+import classNames from 'classnames'
+import { observer } from 'mobx-react'
 
-import LoginOutlined from "@ant-design/icons/LoginOutlined";
-import { ConfigProvider, Badge } from "antd";
-import zhCN from "antd/es/locale/zh_CN";
-import classNames from "classnames";
-import { observer } from "mobx-react";
+import '@xkit-yx/im-kit-ui/src/style'
+import 'antd/es/badge/style'
+import './iconfont.css'
+import './index.less'
 
-import "antd/es/badge/style";
-import "../../YXUIKit/im-kit-ui/src/style";
-import "./iconfont.css";
-import "./index.less";
+import SettingModal from './components/Setting'
+import Menu from './components/Menus'
 
-export interface IMAppProps {
-  appkey: string; //传入您的App Key
-  account: string; // 传入您的云信IM账号
-  token: string; // 传入您的Token
-  sdkVersion: 1 | 2;
-  onLogout?: () => void;
+interface IMContainerProps {
+  appkey: string //传入您的App Key
+  account: string // 传入您的云信IM账号
+  token: string // 传入您的Tokenx
+  onLogout?: () => void
+  changeLanguage?: (value: 'zh' | 'en') => void
+}
+
+interface IMAppProps {
+  onLogout?: () => void
+  locale: 'zh' | 'en'
+  changeLanguage?: (value: 'zh' | 'en') => void
+  sdkVersion: 1 | 2
+  setSdkVersion: React.Dispatch<React.SetStateAction<1 | 2>>
+  addFriendNeedVerify: boolean
+  setAddFriendNeedVerify: React.Dispatch<React.SetStateAction<boolean>>
 }
 // @ts-ignore: Unreachable code error
 
-const IMApp: React.FC<Pick<IProps, "onLogout">> = observer((props) => {
-  const { onLogout } = props;
-  const [model, setModel] = React.useState<"chat" | "contact">("chat");
-  const { store } = useStateContext();
+const IMApp: React.FC<IMAppProps> = observer((props) => {
+  const {
+    onLogout,
+    locale,
+    changeLanguage,
+    setSdkVersion,
+    sdkVersion,
+    addFriendNeedVerify,
+    setAddFriendNeedVerify,
+  } = props
+  const [model, setModel] = useState<'chat' | 'contact'>('chat')
+  const [isSettingModalOpen, setIsSettingModalOpen] = useState<boolean>(false)
+  const [p2pMsgReceiptVisible, setP2pMsgReceiptVisible] =
+    useState<boolean>(true)
+  const [teamMsgReceiptVisible, setTeamMsgReceiptVisible] =
+    useState<boolean>(true)
+  const handleSettingCancel = () => {
+    setIsSettingModalOpen(false)
+  }
+  const openSettingModal = () => {
+    setIsSettingModalOpen(true)
+  }
+  const { store } = useStateContext()
+  const demoLocaleMap = {
+    zh: demo_zh,
+    en: demo_en,
+  }
+  const t = (str: keyof typeof demo_zh): string => {
+    return demoLocaleMap[locale][str]
+  }
+
+  useEffect(() => {
+    if (sessionStorage.getItem('p2pMsgReceiptVisible')) {
+      const p2pMsgReceiptVisible =
+        sessionStorage.getItem('p2pMsgReceiptVisible') === 'true' ? true : false
+      setP2pMsgReceiptVisible(p2pMsgReceiptVisible)
+    }
+    if (sessionStorage.getItem('teamMsgReceiptVisible')) {
+      const teamMsgReceiptVisible =
+        sessionStorage.getItem('teamMsgReceiptVisible') === 'true'
+          ? true
+          : false
+      setTeamMsgReceiptVisible(teamMsgReceiptVisible)
+    }
+  }, [])
 
   return (
     <>
       <div className="header">
         <div className="search">
-          <SearchContainer />
+          <SearchContainer onClickChat={() => setModel('chat')} />
         </div>
         <div className="add">
-          <AddContainer />
+          <AddContainer onClickChat={() => setModel('chat')} />
         </div>
       </div>
       <div className="content">
@@ -54,85 +109,139 @@ const IMApp: React.FC<Pick<IProps, "onLogout">> = observer((props) => {
           </div>
           <Badge dot={false}>
             <div
-              className={classNames("chat-icon", {
-                active: model === "chat",
+              className={classNames('chat-icon', {
+                active: model === 'chat',
               })}
-              onClick={() => setModel("chat")}
+              onClick={() => setModel('chat')}
             >
-              <i className="iconfont icon-message_fill_light" />
-              <div className="icon-label">会话</div>
+              <i className="iconfont">&#xe6c9;</i>
+              <div className="icon-label">{t('session')}</div>
             </div>
           </Badge>
           <Badge dot={!!store.uiStore.systemMsgUnread}>
             <div
-              className={classNames("contact-icon", {
-                active: model === "contact",
+              className={classNames('contact-icon', {
+                active: model === 'contact',
               })}
-              onClick={() => setModel("contact")}
+              onClick={() => setModel('contact')}
             >
-              <i className="iconfont icon-tongxunlu1" />
-              <div className="icon-label">通讯录</div>
+              <i className="iconfont">&#xe6c4;</i>
+              <div className="icon-label">{t('addressText')}</div>
             </div>
           </Badge>
-          <div className="logout-icon" onClick={() => onLogout?.()}>
-            <LoginOutlined />
-            <div className="icon-label">退出</div>
-          </div>
+          <Menu
+            onLogout={onLogout}
+            t={t}
+            changeLanguage={changeLanguage}
+            locale={locale}
+            openSettingModal={openSettingModal}
+          />
         </div>
-        {model === "chat" && (
+        <SettingModal
+          isSettingModalOpen={isSettingModalOpen}
+          handleSettingCancel={handleSettingCancel}
+          p2pMsgReceiptVisible={p2pMsgReceiptVisible}
+          setP2pMsgReceiptVisible={setP2pMsgReceiptVisible}
+          teamMsgReceiptVisible={teamMsgReceiptVisible}
+          setTeamMsgReceiptVisible={setTeamMsgReceiptVisible}
+          setSdkVersion={setSdkVersion}
+          sdkVersion={sdkVersion}
+          addFriendNeedVerify={addFriendNeedVerify}
+          setAddFriendNeedVerify={setAddFriendNeedVerify}
+          t={t}
+          locale={locale}
+        />
+        {model === 'chat' && (
           <div className="right">
             <div className="right-list">
               <ConversationContainer />
             </div>
             <div className="right-content">
-              <ChatContainer />
+              <ChatContainer
+                p2pMsgReceiptVisible={p2pMsgReceiptVisible}
+                teamMsgReceiptVisible={teamMsgReceiptVisible}
+              />
             </div>
           </div>
         )}
-        {model === "contact" && (
+        {model === 'contact' && (
           <div className="right">
             <div className="right-list">
               <ContactListContainer />
             </div>
             <div className="right-content">
               <ContactInfoContainer
-                afterSendMsgClick={() => setModel("chat")}
-                onGroupItemClick={() => setModel("chat")}
+                afterSendMsgClick={() => setModel('chat')}
+                onGroupItemClick={() => setModel('chat')}
               />
             </div>
           </div>
         )}
       </div>
     </>
-  );
-});
-
-const IMAppContainer: React.FC<IMAppProps> = (props) => {
-  const { appkey, account, token, sdkVersion, onLogout } = props;
+  )
+})
 
+const IMAppContainer: React.FC<IMContainerProps> = (props) => {
+  const { appkey, account, token, onLogout } = props
+  const [curLanguage, setCurLanguage] = useState<'zh' | 'en'>('zh')
+  const [sdkVersion, setSdkVersion] = useState<1 | 2>(2)
+  const [addFriendNeedVerify, setAddFriendNeedVerify] = useState<boolean>(true)
+  const languageMap = { zh, en }
   const initOptions = useMemo(() => {
     return {
       appkey,
       account,
       token,
-      lbsUrls: ["https://lbs.netease.im/lbs/webconf.jsp"],
-      linkUrl: "weblink.netease.im",
+      lbsUrls: ['https://lbs.netease.im/lbs/webconf.jsp'],
+      linkUrl: 'weblink.netease.im',
       needReconnect: true,
       reconnectionAttempts: 5,
-    };
-  }, [appkey, account, token]);
-
+    }
+  }, [appkey, account, token])
+  const localOptions = {
+    addFriendNeedVerify,
+  }
+  const changeLanguage = (value: 'zh' | 'en') => {
+    setCurLanguage(value)
+    sessionStorage.setItem('languageType', value)
+    window.location.reload()
+  }
+  useEffect(() => {
+    const languageType = sessionStorage.getItem('languageType') as 'zh' | 'en'
+    setCurLanguage(languageType || 'zh')
+    const sdkVersion = Number(sessionStorage.getItem('sdkVersion')) as 1 | 2
+    setSdkVersion(sdkVersion || 2)
+    if (sessionStorage.getItem('addFriendNeedVerify')) {
+      const addFriendNeedVerify =
+        sessionStorage.getItem('addFriendNeedVerify') === 'true' ? true : false
+      setAddFriendNeedVerify(addFriendNeedVerify)
+    }
+  }, [])
   return (
-    <ConfigProvider locale={zhCN}>
+    <ConfigProvider locale={curLanguage === 'zh' ? zhCN : enUS}>
       <div className="im-app-example">
         <div className="container">
-          <Provider sdkVersion={sdkVersion} initOptions={initOptions}>
-            <IMApp onLogout={onLogout} />
+          <Provider
+            sdkVersion={sdkVersion}
+            localeConfig={languageMap[curLanguage]}
+            initOptions={initOptions}
+            localOptions={localOptions}
+          >
+            <IMApp
+              onLogout={onLogout}
+              locale={curLanguage}
+              changeLanguage={changeLanguage}
+              addFriendNeedVerify={addFriendNeedVerify}
+              setAddFriendNeedVerify={setAddFriendNeedVerify}
+              sdkVersion={sdkVersion}
+              setSdkVersion={setSdkVersion}
+            />
           </Provider>
         </div>
       </div>
     </ConfigProvider>
-  );
-};
+  )
+}
 
-export default IMAppContainer;
+export default IMAppContainer
diff --git a/react/src/components/IMApp/locales/demo_locale.ts b/react/src/components/IMApp/locales/demo_locale.ts
new file mode 100644
index 0000000..9628ce9
--- /dev/null
+++ b/react/src/components/IMApp/locales/demo_locale.ts
@@ -0,0 +1,31 @@
+export const demo_zh = {
+  session: '会话',
+  addressText: '通讯录',
+  sdkVersionSelectionText: 'sdk版本选择',
+  p2pMsgVisibleModeText: '是否显示p2p消息已读未读',
+  teamMsgVisibleModeText: '是否显示群消息已读未读',
+  addFriendMode: '添加好友模式',
+  logoutText: '退出登录',
+  yesText: '是',
+  noText: '否',
+  needVerifyText: '需要验证',
+  notNeedVerifyText: '不需要验证',
+  settingText: '设置',
+  logoutConfirmText: '确定退出登录吗?',
+}
+
+export const demo_en = {
+  session: 'session',
+  addressText: 'contacts',
+  sdkVersionSelectionText: 'SDK version',
+  p2pMsgVisibleModeText: 'Read receipts for private messages',
+  teamMsgVisibleModeText: 'Read receipts for group messages',
+  addFriendMode: 'Verification for friend requests',
+  logoutText: 'Sign out',
+  yesText: 'Enable',
+  noText: 'Disable',
+  needVerifyText: 'Required',
+  notNeedVerifyText: 'Not required',
+  settingText: 'setting',
+  logoutConfirmText: 'Are you sure you log out?',
+}
diff --git a/react/src/components/IMApp/locales/en.ts b/react/src/components/IMApp/locales/en.ts
new file mode 100644
index 0000000..c74d7b4
--- /dev/null
+++ b/react/src/components/IMApp/locales/en.ts
@@ -0,0 +1,278 @@
+const LocaleConfig = {
+  // common
+  saveText: 'Save',
+  setText: 'Settings',
+  saveSuccessText: 'Settings saved',
+  saveFailedText: 'Failed to save Settings',
+  addFriendSuccessText: 'Friend added',
+  applyFriendSuccessText: 'Friend request sent',
+  addFriendFailedText: 'Failed to add friend',
+  applyFriendFailedText: 'Failed to send friend request',
+  okText: 'OK',
+  cancelText: 'Cancel',
+  deleteText: 'Delete',
+  recallText: 'Recall',
+  you: 'you',
+  deleteFriendText: 'Delete friend',
+  confirmDeleteText: 'Delete friend',
+  confirmDeleteFriendText: 'Are you sure you want to delete the friend?',
+  deleteFriendSuccessText: 'Friend deleted',
+  deleteFriendFailedText: 'Failed to delete friend',
+  blackText: 'Blocked',
+  removeBlackText: 'Remove from blocklist',
+  blackSuccessText: 'Blocked',
+  blackFailedText: 'Failed to block user',
+  removeBlackSuccessText: 'Unblocked',
+  removeBlackFailedText: 'Failed to unblock user',
+  maxSelectedText: 'A maximum of {} friends can be selected',
+  selectedText: 'Selected',
+  friendsText: 'Friends',
+  strangerText: 'stranger(s)',
+  emailErrorText: 'Invalid email address',
+  uploadLimitText: 'A maximum size of {} MB is allowed for upload',
+  uploadLimitUnit: 'M',
+  uploadImgFailedText: 'Upload failed',
+  accountText: 'Account',
+  nickText: 'Nickname',
+  genderText: 'Gender',
+  phoneText: 'Phone',
+  emailText: 'Email',
+  signText: 'Bio',
+  accountPlaceholder: 'Enter your account',
+  teamIdPlaceholder: 'Please enter the group ID',
+  nickPlaceholder: 'Enter your nickname',
+  genderPlaceholder: 'Select your gender',
+  phonePlaceholder: 'Enter mobile phone number',
+  emailPlaceholder: 'Enter email address',
+  signPlaceholder: 'Enter your bio',
+  searchInputPlaceholder: 'Search for friends or groups',
+  man: 'Male',
+  woman: 'Female',
+  unknow: 'Prefer not to Answer',
+  welcomeText: 'Welcome to CommsEase Messenger',
+  notSupportMessageText: 'The type of message is not supported',
+  applyTeamText: 'Join',
+  rejectText: 'Reject',
+  acceptText: 'Accept',
+  inviteTeamText: 'Invite',
+  applyFriendText: 'Add',
+  acceptResultText: 'Accepted',
+  rejectResultText: 'Rejected',
+  beRejectResultText: 'Friend request rejected',
+  passResultText: 'Friend request accepted',
+  rejectTeamInviteText: 'declined group invitation',
+  updateTeamAvatar: 'Updated group avatar',
+  updateTeamName: 'The group name was updated as',
+  updateTeamIntro: 'Updated the group introduction',
+  updateTeamInviteMode: 'Updated the "Invite permission" to',
+  updateTeamUpdateTeamMode: 'Updated the "Edit permission" to​',
+  updateTeamMute: 'group ban',
+  onlyTeamOwner: 'Only the owner',
+  teamAll: 'Everyone',
+  closeText: 'Close',
+  openText: 'Open',
+  inviteText: 'Invite',
+  aliasText: 'Remark',
+  updateAliasSuccessText: 'Remarks modified',
+  updateAliasFailedText: 'Failed to modify remark',
+  sendText: 'Send',
+  noPermission: 'No permission',
+
+  // conversation-kit
+  onDismissTeamText: 'Group dismissed',
+  onRemoveTeamText: 'You were removed',
+  textMsgText: 'Text message',
+  audioMsgText: 'Audio message',
+  videoMsgText: 'Video message',
+  fileMsgText: 'File message',
+  callMsgText: 'CDR message',
+  geoMsgText: 'Location message',
+  imgMsgText: 'Image message',
+  notiMsgText: 'Notification',
+  robotMsgText: 'Chatbot message',
+  tipMsgText: 'Tip',
+  unknowMsgText: 'Unknown message',
+  deleteSessionText: 'Delete',
+  muteSessionText: 'Enable Do-Not-Disturb',
+  unmuteSessionText: 'Disable Do-Not-Disturb',
+  deleteStickTopText: 'Unpin',
+  addStickTopText: 'Pin',
+
+  // contact-kit
+  teamListTitle: 'Groups',
+  friendListTitle: 'Friends',
+  blackListTitle: 'Blocklist',
+  msgListTitle: 'Message Center',
+  blackListDesc:
+    '（You will not receive messages from any contacts in the list）',
+  teamMenuText: 'Groups',
+  friendMenuText: 'Friends',
+  blackMenuText: 'Blocklist',
+  msgMenuText: 'Message Center',
+  acceptedText: 'Request approved',
+  acceptFailedText: 'Failed to approve the request',
+  rejectedText: 'Request rejected',
+  rejectFailedText: 'Failed to reject the request',
+  getApplyMsgFailedText: 'Failed to get the messsage',
+
+  // search-kit
+  addFriendText: 'Add friend',
+  createTeamText: 'Create group',
+  joinTeamText: 'Join group',
+  beRemoveTeamText: 'Removed from the group',
+  addButtonText: 'Add',
+  addSuccessText: 'Added',
+  addFailedText: 'Adding friend failed',
+  createButtonText: 'Create',
+  createTeamSuccessText: 'Group created',
+  createTeamFailedText: 'Failed to create the group',
+  chatButtonText: 'Chat',
+  getRelationFailedText: 'Failed to get relationship',
+  accountNotMatchText: 'No account found',
+  teamIdNotMatchText: 'No such group number found',
+  searchButtonText: 'Search',
+  searchTeamPlaceholder: 'Enter a group name',
+  teamTitle: 'Group name',
+  teamAvatarText: 'Group avatar',
+  addTeamMemberText: 'Add member',
+  searchEmptyText: 'You have not added friends or groups yet',
+  searchNoResText: 'No search results yet',
+  searchFriendTitle: 'Friends',
+  searchTeamTitle: 'Groups',
+  notSupportJoinText:
+    'The discussion group cannot be joined directly, please contact the administrator to add you to the group',
+
+  // chat-kit
+  sendToText: 'To',
+  sendUsageText:
+    '（Send a message by pressing Enter and break a line using Shift+ Enter）',
+  sendEmptyText: 'Unable to send an empty message',
+  teamMutePlaceholder: 'The group owner has muted the group',
+  enterTeamText: 'joined the group chat',
+  leaveTeamText: 'left the group chat',
+  teamMuteText: 'Mute group',
+  muteAllTeamSuccessText: 'Mute all',
+  unmuteAllTeamSuccessText: 'Unmute all',
+  muteAllTeamFailedText: 'Failed to mute all',
+  unmuteAllTeamFailedText: 'Failed to unmute all members',
+  updateTeamSuccessText: 'Edit succeeded',
+  updateTeamFailedText: 'Edit failed',
+  leaveTeamSuccessText: 'You have left the group',
+  leaveTeamFailedText: 'Failed to leave the group',
+  dismissTeamSuccessText: 'Group dismissed',
+  dismissTeamFailedText: 'Failed to dismiss the group',
+  addTeamMemberSuccessText: 'Member added',
+  addTeamMemberFailedText: 'Failed to add member',
+  addTeamMemberConfirmText: 'Select group members',
+  removeTeamMemberText: 'Remove',
+  removeTeamMemberConfirmText: 'Whether to remove the member？',
+  removeTeamMemberSuccessText: 'Member removed',
+  removeTeamMemberFailedText: 'Failed to remove member',
+  teamTitleConfirmText: 'Group name is required',
+  teamAvatarConfirmText: 'Group avatar is required',
+  teamIdText: 'Group ID',
+  teamSignText: 'Introduction',
+  teamTitlePlaceholder: 'Enter group name',
+  teamSignPlaceholder: 'Enter a description',
+  teamOwnerText: 'Group owner',
+  teamManagerText: 'Admin',
+  teamManagerLimitText: 'Only admins can edit group information',
+  teamMemberText: 'Group member',
+  teamInfoText: 'Group information',
+  teamPowerText: 'Permissions',
+  dismissTeamText: 'Dismiss group',
+  dismissTeamConfirmText: 'Are you sure you want to dismiss the group',
+  leaveTeamTitle: 'Leave group',
+  leaveTeamConfirmText: 'Are you sure you want to leave the group',
+  personUnit: 'person',
+  leaveTeamButtonText: 'Delete and leave',
+  sendMsgFailedText: 'Failed to send the message',
+  getHistoryMsgFailedText: 'Failed to get the message history',
+  sendBlackFailedText: 'You were added to blocklist',
+  recallMessageText: 'A message was recalled',
+  reeditText: 'Re-edit',
+  addChatMemberText: 'Add member',
+  chatHistoryText: 'Chat history',
+  noMoreText: 'No more messages',
+  receiveText: 'You have a new message',
+  strangerNotiText:
+    'You are chatting with a non-friend. Be discreet about sharing your personal information.',
+  teamInviteModeText: 'Only administrators can invite other users',
+  nickInTeamText: 'Nickname',
+  editNickInTeamText: 'Edit',
+  replyText: 'Reply',
+  unreadText: 'unread',
+  readText: 'read',
+  // emoji 不能随便填，要用固定 key
+  Laugh: '[Laugh]',
+  Happy: '[Happy]',
+  Sexy: '[Sexy]',
+  Cool: '[Cool]',
+  Mischievous: '[Mischievous]',
+  Kiss: '[Kiss]',
+  Spit: '[Spit]',
+  Squint: '[Squint]',
+  Cute: '[Cute]',
+  Grimace: '[Grimace]',
+  Snicker: '[Snicker]',
+  Joy: '[Joy]',
+  Ecstasy: '[Ecstasy]',
+  Surprise: '[Surprise]',
+  Tears: '[Tears]',
+  Sweat: '[Sweat]',
+  Angle: '[Angle]',
+  Funny: '[Funny]',
+  Awkward: '[Awkward]',
+  Thrill: '[Thrill]',
+  Cry: '[Cry]',
+  Fretting: '[Fretting]',
+  Terrorist: '[Terrorist]',
+  Halo: '[Halo]',
+  Shame: '[Shame]',
+  Sleep: '[Sleep]',
+  Tired: '[Tired]',
+  Mask: '[Mask]',
+  ok: '[ok]',
+  AllRight: '[All right]',
+  Despise: '[Despise]',
+  Uncomfortable: '[Uncomfortable]',
+  Disdain: '[Disdain]',
+  ill: '[ill]',
+  Mad: '[Mad]',
+  Ghost: '[Ghost]',
+  Angry: '[Angry]',
+  Unhappy: '[Unhappy]',
+  Frown: '[Frown]',
+  Broken: '[Broken]',
+  Beckoning: '[Beckoning]',
+  Ok: '[Ok]',
+  Low: '[Low]',
+  Nice: '[Nice]',
+  Applause: '[Applause]',
+  GoodJob: '[Good job]',
+  Hit: '[Hit]',
+  Please: '[Please]',
+  Bye: '[Bye]',
+  First: '[First]',
+  Fist: '[Fist]',
+  GiveMeFive: '[Give me five]',
+  Knife: '[Knife]',
+  Hi: '[Hi]',
+  No: '[No]',
+  Hold: '[Hold]',
+  Think: '[Think]',
+  Pig: '[Pig]',
+  NoListen: '[No listen]',
+  NoLook: '[No look]',
+  NoWords: '[No words]',
+  Monkey: '[Monkey]',
+  Bomb: '[Bomb]',
+  Cloud: '[Cloud]',
+  Rocket: '[Rocket]',
+  Ambulance: '[Ambulance]',
+  Poop: '[Poop]',
+}
+
+const emojiLocaleConfig = {}
+
+export default LocaleConfig
diff --git a/react/src/components/IMApp/locales/zh.ts b/react/src/components/IMApp/locales/zh.ts
new file mode 100644
index 0000000..b820455
--- /dev/null
+++ b/react/src/components/IMApp/locales/zh.ts
@@ -0,0 +1,272 @@
+const LocaleConfig = {
+  // common
+  saveText: '保存',
+  setText: '设置',
+  saveSuccessText: '保存成功',
+  saveFailedText: '保存失败',
+  addFriendSuccessText: '添加好友成功',
+  applyFriendSuccessText: '申请添加好友成功',
+  addFriendFailedText: '添加好友失败',
+  applyFriendFailedText: '申请添加好友失败',
+  okText: '确定',
+  cancelText: '取消',
+  deleteText: '删除',
+  recallText: '撤回',
+  you: '你',
+  deleteFriendText: '删除好友',
+  confirmDeleteText: '确定删除？',
+  confirmDeleteFriendText: '确定删除好友？',
+  deleteFriendSuccessText: '删除好友成功',
+  deleteFriendFailedText: '删除好友失败',
+  blackText: '拉黑好友',
+  removeBlackText: '解除拉黑',
+  blackSuccessText: '拉黑成功',
+  blackFailedText: '拉黑失败',
+  removeBlackSuccessText: '解除拉黑成功',
+  removeBlackFailedText: '解除拉黑失败',
+  maxSelectedText: '最多只能选择',
+  selectedText: '已选',
+  friendsText: '位好友',
+  strangerText: '位陌生人',
+  emailErrorText: '邮箱格式不正确',
+  uploadLimitText: '图片或文件大小最大支持',
+  uploadLimitUnit: 'M',
+  uploadImgFailedText: '上传图片失败',
+  accountText: '账号',
+  nickText: '昵称',
+  genderText: '性别',
+  phoneText: '手机',
+  emailText: '邮箱',
+  signText: '签名',
+  accountPlaceholder: '请输入账号',
+  teamIdPlaceholder: '请输入群组 ID',
+  nickPlaceholder: '请输入昵称',
+  genderPlaceholder: '请选择性别',
+  phonePlaceholder: '请输入手机号',
+  emailPlaceholder: '请输入邮箱',
+  signPlaceholder: '请输入签名',
+  searchInputPlaceholder: '搜索好友或群组',
+  man: '男',
+  woman: '女',
+  unknow: '未知',
+  welcomeText: '欢迎使用云信',
+  notSupportMessageText: '暂不支持该消息',
+  applyTeamText: '申请入群',
+  rejectText: '拒绝',
+  acceptText: '同意',
+  inviteTeamText: '邀请您加入群组',
+  applyFriendText: '添加您为好友',
+  acceptResultText: '已同意',
+  rejectResultText: '已拒绝',
+  beRejectResultText: '拒绝了好友申请',
+  passResultText: '通过了好友申请',
+  rejectTeamInviteText: '拒绝了群邀请',
+  updateTeamAvatar: '更新了群头像',
+  updateTeamName: '更新群名称为',
+  updateTeamIntro: '更新了群介绍',
+  updateTeamInviteMode: '更新了群权限“邀请他人权限”为',
+  updateTeamUpdateTeamMode: '更新了群权限“群资料修改权限”为',
+  updateTeamMute: '群禁言已',
+  onlyTeamOwner: '仅群主',
+  teamAll: '所有人',
+  closeText: '关闭',
+  openText: '开启',
+  inviteText: '邀请',
+  aliasText: '备注',
+  updateAliasSuccessText: '修改备注成功',
+  updateAliasFailedText: '修改备注失败',
+  sendText: '发送消息',
+  noPermission: '您暂无权限操作',
+
+  // conversation-kit
+  onDismissTeamText: '群已被解散',
+  onRemoveTeamText: '您已被移出群组',
+  textMsgText: '文本消息',
+  audioMsgText: '音频消息',
+  videoMsgText: '视频消息',
+  fileMsgText: '文件消息',
+  callMsgText: '话单消息',
+  geoMsgText: '地理位置消息',
+  imgMsgText: '图片消息',
+  notiMsgText: '通知消息',
+  robotMsgText: '机器消息',
+  tipMsgText: '提示消息',
+  unknowMsgText: '未知消息',
+  deleteSessionText: '删除会话',
+  muteSessionText: '开启免打扰',
+  unmuteSessionText: '取消免打扰',
+  deleteStickTopText: '取消置顶',
+  addStickTopText: '置顶消息',
+
+  // contact-kit
+  teamListTitle: '我的群组',
+  friendListTitle: '我的好友',
+  blackListTitle: '黑名单',
+  msgListTitle: '消息中心',
+  blackListDesc: '（你不会收到列表中任何联系人的消息）',
+  teamMenuText: '我的群组',
+  friendMenuText: '我的好友',
+  blackMenuText: '黑名单',
+  msgMenuText: '消息中心',
+  acceptedText: '已同意该申请',
+  acceptFailedText: '同意该申请失败',
+  rejectedText: '已拒绝该申请',
+  rejectFailedText: '拒绝该申请失败',
+  getApplyMsgFailedText: '获取消息失败',
+
+  // search-kit
+  addFriendText: '添加好友',
+  createTeamText: '创建群组',
+  joinTeamText: '加入群组',
+  beRemoveTeamText: '被移出群组',
+  addButtonText: '添加',
+  addSuccessText: '添加成功',
+  addFailedText: '添加失败',
+  createButtonText: '创建',
+  createTeamSuccessText: '创建群组成功',
+  createTeamFailedText: '创建群组失败',
+  chatButtonText: '去聊天',
+  getRelationFailedText: '获取关系失败',
+  accountNotMatchText: '查无此账号',
+  teamIdNotMatchText: '查无此群号',
+  searchButtonText: '查找',
+  searchTeamPlaceholder: '请输入群名称',
+  teamTitle: '群名称',
+  teamAvatarText: '群头像',
+  addTeamMemberText: '添加成员',
+  searchEmptyText: '您暂未添加好友和群组',
+  searchNoResText: '暂无搜索结果',
+  searchFriendTitle: '好友',
+  searchTeamTitle: '群组',
+  notSupportJoinText: '讨论组无法直接加入，请联系管理员拉您入群',
+
+  // chat-kit
+  sendToText: '发送给',
+  sendUsageText: '（按enter直接发送，shift+enter换行）',
+  sendEmptyText: '不能发送空白消息',
+  teamMutePlaceholder: '当前群主设置为禁言',
+  enterTeamText: '进入了群组',
+  leaveTeamText: '离开了群组',
+  teamMuteText: '群禁言',
+  muteAllTeamSuccessText: '开启全员禁言成功',
+  unmuteAllTeamSuccessText: '结束全员禁言成功',
+  muteAllTeamFailedText: '开启全员禁言失败',
+  unmuteAllTeamFailedText: '结束全员禁言失败',
+  updateTeamSuccessText: '修改成功',
+  updateTeamFailedText: '修改失败',
+  leaveTeamSuccessText: '已成功退出此群',
+  leaveTeamFailedText: '退出此群失败',
+  dismissTeamSuccessText: '群解散成功',
+  dismissTeamFailedText: '群解散失败',
+  addTeamMemberSuccessText: '添加成员成功',
+  addTeamMemberFailedText: '添加成员失败',
+  addTeamMemberConfirmText: '请选择要添加的群成员',
+  removeTeamMemberText: '移除成员',
+  removeTeamMemberConfirmText: '是否确认移除该成员？',
+  removeTeamMemberSuccessText: '移除成员成功',
+  removeTeamMemberFailedText: '移除成员失败',
+  teamTitleConfirmText: '群名称不能为空',
+  teamAvatarConfirmText: '群头像不能为空',
+  teamIdText: '群ID',
+  teamSignText: '群介绍',
+  teamTitlePlaceholder: '请输入群名称',
+  teamSignPlaceholder: '请输入内容',
+  teamOwnerText: '群主',
+  teamManagerText: '管理员',
+  teamManagerLimitText: '仅管理员可修改群资料',
+  teamMemberText: '群成员',
+  teamInfoText: '群资料',
+  teamPowerText: '权限设置',
+  dismissTeamText: '解散群组',
+  dismissTeamConfirmText: '是否确认解散该群组',
+  leaveTeamTitle: '离开群组',
+  leaveTeamConfirmText: '是否确认退出该群组',
+  personUnit: '人',
+  leaveTeamButtonText: '删除并退出',
+  sendMsgFailedText: '消息发送失败',
+  getHistoryMsgFailedText: '获取历史消息失败',
+  sendBlackFailedText: '您已被对方拉入黑名单',
+  recallMessageText: '撤回了一条消息',
+  reeditText: '重新编辑',
+  addChatMemberText: '添加聊天成员',
+  chatHistoryText: '聊天记录',
+  noMoreText: '没有更多消息了',
+  receiveText: '您收到了新消息',
+  strangerNotiText: '当前不是您的好友，请注意保护个人隐私安全。',
+  teamInviteModeText: '仅管理员可邀请他人',
+  nickInTeamText: '我在群里的昵称',
+  editNickInTeamText: '编辑我在群里的昵称',
+  replyText: '回复',
+  unreadText: '未读',
+  readText: '已读',
+  // emoji 不能随便填，要用固定 key
+  Laugh: '[大笑]',
+  Happy: '[开心]',
+  Sexy: '[色]',
+  Cool: '[酷]',
+  Mischievous: '[奸笑]',
+  Kiss: '[亲]',
+  Spit: '[伸舌头]',
+  Squint: '[眯眼]',
+  Cute: '[可爱]',
+  Grimace: '[鬼脸]',
+  Snicker: '[偷笑]',
+  Joy: '[喜悦]',
+  Ecstasy: '[狂喜]',
+  Surprise: '[惊讶]',
+  Tears: '[流泪]',
+  Sweat: '[流汗]',
+  Angle: '[天使]',
+  Funny: '[笑哭]',
+  Awkward: '[尴尬]',
+  Thrill: '[惊恐]',
+  Cry: '[大哭]',
+  Fretting: '[烦躁]',
+  Terrorist: '[恐怖]',
+  Halo: '[两眼冒星]',
+  Shame: '[害羞]',
+  Sleep: '[睡着]',
+  Tired: '[冒星]',
+  Mask: '[口罩]',
+  ok: '[OK]',
+  AllRight: '[好吧]',
+  Despise: '[鄙视]',
+  Uncomfortable: '[难受]',
+  Disdain: '[不屑]',
+  ill: '[不舒服]',
+  Mad: '[愤怒]',
+  Ghost: '[鬼怪]',
+  Angry: '[发怒]',
+  Unhappy: '[不高兴]',
+  Frown: '[皱眉]',
+  Broken: '[心碎]',
+  Beckoning: '[心动]',
+  Ok: '[好的]',
+  Low: '[低级]',
+  Nice: '[赞]',
+  Applause: '[鼓掌]',
+  GoodJob: '[给力]',
+  Hit: '[打你]',
+  Please: '[阿弥陀佛]',
+  Bye: '[拜拜]',
+  First: '[第一]',
+  Fist: '[拳头]',
+  GiveMeFive: '[手掌]',
+  Knife: '[剪刀]',
+  Hi: '[招手]',
+  No: '[不要]',
+  Hold: '[举着]',
+  Think: '[思考]',
+  Pig: '[猪头]',
+  NoListen: '[不听]',
+  NoLook: '[不看]',
+  NoWords: '[不说]',
+  Monkey: '[猴子]',
+  Bomb: '[炸弹]',
+  Cloud: '[筋斗云]',
+  Rocket: '[火箭]',
+  Ambulance: '[救护车]',
+  Poop: '[便便]',
+}
+
+export default LocaleConfig
diff --git a/react/src/pages/index.tsx b/react/src/pages/index.tsx
index fec0a79..23afe57 100644
--- a/react/src/pages/index.tsx
+++ b/react/src/pages/index.tsx
@@ -1,11 +1,10 @@
-import IMApp, { IMAppProps } from "../components/IMApp";
+import IMApp from "../components/IMApp";
 
 export default function HomePage() {
-  const initOptions: IMAppProps = {
+  const initOptions = {
     appkey: "", // 请填写你的appkey
     account: "", // 请填写你的account
     token: "", // 请填写你的token
-    sdkVersion: 1, // 请填写你的使用的sdk版本
   };
   return <IMApp {...initOptions}></IMApp>;
 }
diff --git a/vue/package-lock.json b/vue/package-lock.json
index 80c12ad..2d8cade 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -8,7 +8,7 @@
       "name": "vue",
       "version": "0.0.0",
       "dependencies": {
-        "@xkit-yx/im-kit-ui": "^0.2.3",
+        "@xkit-yx/im-kit-ui": "^0.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "vue": "^3.2.45"
@@ -474,9 +474,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1671,13 +1671,13 @@
       }
     },
     "node_modules/@xkit-yx/chat-kit-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.5.1.tgz",
-      "integrity": "sha512-Ma2ALiltf/WuLo468NZJFcTtilXBC2tZhiljX3TORVXH6UH9qoL3rkxkthbyCM807vnVkeCOqT9ZdhFEu9GKAQ==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.6.1.tgz",
+      "integrity": "sha512-DMrHqvE87uUL8YfSlIV6UvZS0nnRItLUIaR2YbU/OP3P2V6zOY3GwxVg8pspUBtiCOiUuzhtwa8h9sM5ZF/fKg==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -1696,12 +1696,12 @@
       }
     },
     "node_modules/@xkit-yx/common-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.5.1.tgz",
-      "integrity": "sha512-7U01KDM3gNE1SyhCUmtFTNcj2UeFlsuWjUU1jvuHZbK182ROmjkaY7qDWbu/zHNY3iyMYUy4O6TLhnzKiz5CTg==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.6.1.tgz",
+      "integrity": "sha512-EfmRzNRyNARtHH6IkP9JlB3WIpWSKbTdEnOnv4kvArJfK9tZBsWN3MDRbTvZ/CiDxxbdvg/5qq5ha2DHUpTJBg==",
       "dependencies": {
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -1719,12 +1719,12 @@
       }
     },
     "node_modules/@xkit-yx/contact-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-Y88CGslikOZ//BdB7kTwG/yHXmzFN7F1dInCMD/3JgAkKwjyugaKvr6JjKD7gMI6CEnrciX3OA8G6WTaYY1pcA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.4.1.tgz",
+      "integrity": "sha512-Lk+qTsWp9lCVzx0lic2B/DrqSJg5xMDE+PENKs0w1XgEOe5cSr48UD1RkftcbpIbmRV+GNx7Xk6fh/4eIdvjZw==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -1740,12 +1740,12 @@
       }
     },
     "node_modules/@xkit-yx/conversation-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-01OXeBhOdIqAZd0r5+IsncDkoWa8xubEeybjNlAMzsijld/c/FiqNyqIHEIAOz4Z8tszr/r9bE0OyTEQoSZiJA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.3.tgz",
+      "integrity": "sha512-rV/d5X/rpFw5Y+EBm95VnOA+S50GeorMR2HBGR1XYbzAFngFKd1AQrlS9f3ORfZAVene2BiFJqkO168IDeN8VQ==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -1761,12 +1761,12 @@
       }
     },
     "node_modules/@xkit-yx/core-kit": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.7.0.tgz",
-      "integrity": "sha512-6PlJUKcuZUnAe9glWM1dcZ3hXxC+htNa1yM76DQqGIlwPDFaP38QDCgQziH0OLvf/bSTaWkijdUR7HAoaV5xpg==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.8.0.tgz",
+      "integrity": "sha512-fQOM0LtXB4jDWRB6/ZmzPvDSrBUE++UvvLe79l6AvvUaPOpE688m1EqD8yfWNZgRtHH471VHQPQo20FLk9Mvtg==",
       "dependencies": {
         "@scaret/nertc-web-sdk": "4.6.252",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/utils": "^0.5.0",
         "@yxim/nim-web-sdk": "9.6.3",
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7",
@@ -1784,17 +1784,17 @@
       }
     },
     "node_modules/@xkit-yx/im-kit-ui": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.2.3.tgz",
-      "integrity": "sha512-hkjgS+3Jkbe83wSCLZzoS5le/lxOcUPiU7P6Q59tCeTdp8knjbMKjH3uVFxAe6J0s2dJWIYoIv6lag3WUhhC4w==",
-      "dependencies": {
-        "@xkit-yx/chat-kit-ui": "^0.5.1",
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/contact-kit-ui": "^0.3.1",
-        "@xkit-yx/conversation-kit-ui": "^0.3.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/search-kit-ui": "^0.4.1",
-        "@xkit-yx/utils": "^0.4.5",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.3.1.tgz",
+      "integrity": "sha512-4VUgYkmgf+9Jcj9S6ncQDzBTsXgrU6+kj5GO5Z7FSmLLaaRHxzEmIbE5QQ20zuBWzzphOvDpyjyumOZRAr/Xhw==",
+      "dependencies": {
+        "@xkit-yx/chat-kit-ui": "^0.6.1",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/contact-kit-ui": "^0.4.1",
+        "@xkit-yx/conversation-kit-ui": "^0.3.3",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/search-kit-ui": "^0.5.1",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -1815,13 +1815,13 @@
       }
     },
     "node_modules/@xkit-yx/search-kit-ui": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.4.1.tgz",
-      "integrity": "sha512-k5wSLyhYTchTEvFq1K5Py0vXPRewiRWGZv/GpGwcD5UXO6Bvc/A/2Si6t2bCWyClBUS3Wgvwn0+xUUiIfCwnHA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.5.1.tgz",
+      "integrity": "sha512-16i+g3ab/Im+M5CgKBelUjBEJ30IHq8TVC64p8gN/DQ8140Nl0BTOlESnjLt2qXDe3FV3tG3kaMbEGy97Q6TIg==",
       "dependencies": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
@@ -1838,9 +1838,9 @@
       }
     },
     "node_modules/@xkit-yx/utils": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.4.5.tgz",
-      "integrity": "sha512-kdG4ywGUQicsTRRwg2E8xqHROf6VC0qlkwEOTDiVxMi4tteqS4I1qR27i5V7cnpu0n/dOFrsnC7QPL2lzdVmmg==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dzDVY0qrQXh1zbzhDN/gAfNbZ5shW33YRqeoXkE064Nwu6HT6ORFETzai1rn9bVf7uDfcOr2FdULXlvsKAj6LA==",
       "dependencies": {
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7"
@@ -1992,9 +1992,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "4.24.6",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.6.tgz",
-      "integrity": "sha512-x4tTXI3aOJukcG/MWQ7PdWHIqGEFInkKPhSHJpSiDvZI5BAvgLicW57WWhnBpJ6m9H9e9FRohC5FRJf0NIwsWQ==",
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.7.tgz",
+      "integrity": "sha512-Qr3AYkeqpd3i/c6M7pjca7Y6XlaIv/p6gD3aqe7/0o8Ueg50G7Aeh+TOaiUfXLGDhnVoNEdaVdDiv8aIaoWB5A==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -2030,7 +2030,7 @@
         "rc-steps": "~5.0.0-alpha.2",
         "rc-switch": "~3.2.0",
         "rc-table": "~7.26.0",
-        "rc-tabs": "~12.4.1",
+        "rc-tabs": "~12.5.0",
         "rc-textarea": "~0.4.5",
         "rc-tooltip": "~5.2.0",
         "rc-tree": "~5.7.0",
@@ -4710,17 +4710,16 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.1.tgz",
-      "integrity": "sha512-179weouypfjWJSRvvoo/vPy+StojsMzK2XC5jRNhL1ryt/N/8wAFESte8K6jZJkNp9DHDLFTe+dCGmikKpiFuA==",
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.2.tgz",
+      "integrity": "sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.2.8",
         "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
+        "rc-util": "^5.27.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -4728,9 +4727,9 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz",
-      "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.3.tgz",
+      "integrity": "sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -4841,13 +4840,13 @@
       }
     },
     "node_modules/rc-resize-observer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz",
-      "integrity": "sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.1.tgz",
+      "integrity": "sha512-g53PnWLeVOmt4XWkt2x+QlIdf/PhJSd7JqHhtMrUY370e7wJ+kxbgXicYqvENUcgFiiOiMCd07YsC2GNsoSbnA==",
       "dependencies": {
-        "@babel/runtime": "^7.10.1",
+        "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.15.0",
+        "rc-util": "^5.27.0",
         "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
@@ -4960,9 +4959,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.4.2.tgz",
-      "integrity": "sha512-FFlGwuTjQUznWzJtyhmHc6KAp5lRQFxKUv9Aj1UtsOYe2e7WGmuzcrd+/LQchuPe0VjhaZPdGkmFGcqGqNO6ow==",
+      "version": "12.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.5.6.tgz",
+      "integrity": "sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -5079,9 +5078,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.0.tgz",
-      "integrity": "sha512-lk9HnxVWdpGzkqs6OpZ+xxAHBefqy6+wT5LjSeBoaxzE0j5Tpq0Mf4TMc29B+Z0QP81yDvfgvp1O8oBxj70kEg==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.1.tgz",
+      "integrity": "sha512-PsjHA+f+KBCz+YTZxrl3ukJU5RoNKoe3KSNMh0xGiISbR67NaM9E9BiMjCwxa3AcCUOg/rZ+V0ZKLSimAA+e3w==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^16.12.0"
@@ -6331,9 +6330,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -7119,13 +7118,13 @@
       "requires": {}
     },
     "@xkit-yx/chat-kit-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.5.1.tgz",
-      "integrity": "sha512-Ma2ALiltf/WuLo468NZJFcTtilXBC2tZhiljX3TORVXH6UH9qoL3rkxkthbyCM807vnVkeCOqT9ZdhFEu9GKAQ==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/chat-kit-ui/-/chat-kit-ui-0.6.1.tgz",
+      "integrity": "sha512-DMrHqvE87uUL8YfSlIV6UvZS0nnRItLUIaR2YbU/OP3P2V6zOY3GwxVg8pspUBtiCOiUuzhtwa8h9sM5ZF/fKg==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -7133,12 +7132,12 @@
       }
     },
     "@xkit-yx/common-ui": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.5.1.tgz",
-      "integrity": "sha512-7U01KDM3gNE1SyhCUmtFTNcj2UeFlsuWjUU1jvuHZbK182ROmjkaY7qDWbu/zHNY3iyMYUy4O6TLhnzKiz5CTg==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/common-ui/-/common-ui-0.6.1.tgz",
+      "integrity": "sha512-EfmRzNRyNARtHH6IkP9JlB3WIpWSKbTdEnOnv4kvArJfK9tZBsWN3MDRbTvZ/CiDxxbdvg/5qq5ha2DHUpTJBg==",
       "requires": {
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2",
@@ -7146,36 +7145,36 @@
       }
     },
     "@xkit-yx/contact-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-Y88CGslikOZ//BdB7kTwG/yHXmzFN7F1dInCMD/3JgAkKwjyugaKvr6JjKD7gMI6CEnrciX3OA8G6WTaYY1pcA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/contact-kit-ui/-/contact-kit-ui-0.4.1.tgz",
+      "integrity": "sha512-Lk+qTsWp9lCVzx0lic2B/DrqSJg5xMDE+PENKs0w1XgEOe5cSr48UD1RkftcbpIbmRV+GNx7Xk6fh/4eIdvjZw==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/conversation-kit-ui": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.1.tgz",
-      "integrity": "sha512-01OXeBhOdIqAZd0r5+IsncDkoWa8xubEeybjNlAMzsijld/c/FiqNyqIHEIAOz4Z8tszr/r9bE0OyTEQoSZiJA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/conversation-kit-ui/-/conversation-kit-ui-0.3.3.tgz",
+      "integrity": "sha512-rV/d5X/rpFw5Y+EBm95VnOA+S50GeorMR2HBGR1XYbzAFngFKd1AQrlS9f3ORfZAVene2BiFJqkO168IDeN8VQ==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/core-kit": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.7.0.tgz",
-      "integrity": "sha512-6PlJUKcuZUnAe9glWM1dcZ3hXxC+htNa1yM76DQqGIlwPDFaP38QDCgQziH0OLvf/bSTaWkijdUR7HAoaV5xpg==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/core-kit/-/core-kit-0.8.0.tgz",
+      "integrity": "sha512-fQOM0LtXB4jDWRB6/ZmzPvDSrBUE++UvvLe79l6AvvUaPOpE688m1EqD8yfWNZgRtHH471VHQPQo20FLk9Mvtg==",
       "requires": {
         "@scaret/nertc-web-sdk": "4.6.252",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/utils": "^0.5.0",
         "@yxim/nim-web-sdk": "9.6.3",
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7",
@@ -7184,39 +7183,39 @@
       }
     },
     "@xkit-yx/im-kit-ui": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.2.3.tgz",
-      "integrity": "sha512-hkjgS+3Jkbe83wSCLZzoS5le/lxOcUPiU7P6Q59tCeTdp8knjbMKjH3uVFxAe6J0s2dJWIYoIv6lag3WUhhC4w==",
-      "requires": {
-        "@xkit-yx/chat-kit-ui": "^0.5.1",
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/contact-kit-ui": "^0.3.1",
-        "@xkit-yx/conversation-kit-ui": "^0.3.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/search-kit-ui": "^0.4.1",
-        "@xkit-yx/utils": "^0.4.5",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/im-kit-ui/-/im-kit-ui-0.3.1.tgz",
+      "integrity": "sha512-4VUgYkmgf+9Jcj9S6ncQDzBTsXgrU6+kj5GO5Z7FSmLLaaRHxzEmIbE5QQ20zuBWzzphOvDpyjyumOZRAr/Xhw==",
+      "requires": {
+        "@xkit-yx/chat-kit-ui": "^0.6.1",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/contact-kit-ui": "^0.4.1",
+        "@xkit-yx/conversation-kit-ui": "^0.3.3",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/search-kit-ui": "^0.5.1",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/search-kit-ui": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.4.1.tgz",
-      "integrity": "sha512-k5wSLyhYTchTEvFq1K5Py0vXPRewiRWGZv/GpGwcD5UXO6Bvc/A/2Si6t2bCWyClBUS3Wgvwn0+xUUiIfCwnHA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/search-kit-ui/-/search-kit-ui-0.5.1.tgz",
+      "integrity": "sha512-16i+g3ab/Im+M5CgKBelUjBEJ30IHq8TVC64p8gN/DQ8140Nl0BTOlESnjLt2qXDe3FV3tG3kaMbEGy97Q6TIg==",
       "requires": {
-        "@xkit-yx/common-ui": "^0.5.1",
-        "@xkit-yx/core-kit": "^0.7.0",
-        "@xkit-yx/utils": "^0.4.5",
+        "@xkit-yx/common-ui": "^0.6.1",
+        "@xkit-yx/core-kit": "^0.8.0",
+        "@xkit-yx/utils": "^0.5.0",
         "antd": "^4.16.3",
         "mobx": "^6.6.1",
         "mobx-react": "^7.5.2"
       }
     },
     "@xkit-yx/utils": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.4.5.tgz",
-      "integrity": "sha512-kdG4ywGUQicsTRRwg2E8xqHROf6VC0qlkwEOTDiVxMi4tteqS4I1qR27i5V7cnpu0n/dOFrsnC7QPL2lzdVmmg==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@xkit-yx/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dzDVY0qrQXh1zbzhDN/gAfNbZ5shW33YRqeoXkE064Nwu6HT6ORFETzai1rn9bVf7uDfcOr2FdULXlvsKAj6LA==",
       "requires": {
         "axios": "^0.27.2",
         "eventemitter3": "^4.0.7"
@@ -7324,9 +7323,9 @@
       }
     },
     "antd": {
-      "version": "4.24.6",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.6.tgz",
-      "integrity": "sha512-x4tTXI3aOJukcG/MWQ7PdWHIqGEFInkKPhSHJpSiDvZI5BAvgLicW57WWhnBpJ6m9H9e9FRohC5FRJf0NIwsWQ==",
+      "version": "4.24.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.24.7.tgz",
+      "integrity": "sha512-Qr3AYkeqpd3i/c6M7pjca7Y6XlaIv/p6gD3aqe7/0o8Ueg50G7Aeh+TOaiUfXLGDhnVoNEdaVdDiv8aIaoWB5A==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -7362,7 +7361,7 @@
         "rc-steps": "~5.0.0-alpha.2",
         "rc-switch": "~3.2.0",
         "rc-table": "~7.26.0",
-        "rc-tabs": "~12.4.1",
+        "rc-tabs": "~12.5.0",
         "rc-textarea": "~0.4.5",
         "rc-tooltip": "~5.2.0",
         "rc-tree": "~5.7.0",
@@ -9301,23 +9300,22 @@
       }
     },
     "rc-menu": {
-      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.1.tgz",
-      "integrity": "sha512-179weouypfjWJSRvvoo/vPy+StojsMzK2XC5jRNhL1ryt/N/8wAFESte8K6jZJkNp9DHDLFTe+dCGmikKpiFuA==",
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.2.tgz",
+      "integrity": "sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.2.8",
         "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
+        "rc-util": "^5.27.0"
       }
     },
     "rc-motion": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz",
-      "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.3.tgz",
+      "integrity": "sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==",
       "requires": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -9391,13 +9389,13 @@
       }
     },
     "rc-resize-observer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz",
-      "integrity": "sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.2.1.tgz",
+      "integrity": "sha512-g53PnWLeVOmt4XWkt2x+QlIdf/PhJSd7JqHhtMrUY370e7wJ+kxbgXicYqvENUcgFiiOiMCd07YsC2GNsoSbnA==",
       "requires": {
-        "@babel/runtime": "^7.10.1",
+        "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.15.0",
+        "rc-util": "^5.27.0",
         "resize-observer-polyfill": "^1.5.1"
       }
     },
@@ -9470,9 +9468,9 @@
       }
     },
     "rc-tabs": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.4.2.tgz",
-      "integrity": "sha512-FFlGwuTjQUznWzJtyhmHc6KAp5lRQFxKUv9Aj1UtsOYe2e7WGmuzcrd+/LQchuPe0VjhaZPdGkmFGcqGqNO6ow==",
+      "version": "12.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.5.6.tgz",
+      "integrity": "sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -9552,9 +9550,9 @@
       }
     },
     "rc-util": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.0.tgz",
-      "integrity": "sha512-lk9HnxVWdpGzkqs6OpZ+xxAHBefqy6+wT5LjSeBoaxzE0j5Tpq0Mf4TMc29B+Z0QP81yDvfgvp1O8oBxj70kEg==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.1.tgz",
+      "integrity": "sha512-PsjHA+f+KBCz+YTZxrl3ukJU5RoNKoe3KSNMh0xGiISbR67NaM9E9BiMjCwxa3AcCUOg/rZ+V0ZKLSimAA+e3w==",
       "requires": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^16.12.0"
diff --git a/vue/package.json b/vue/package.json
index cda6e0b..3eae8fb 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -11,7 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@xkit-yx/im-kit-ui": "^0.2.3",
+    "@xkit-yx/im-kit-ui": "^0.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vue": "^3.2.45"