ok

package-lock.json

@@ -8,6 +8,7 @@
       "name": "chatboard",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/icons": "^5.0.1",
         "antd": "^4.14.1",
         "autosize": "^4.0.2",
         "axios": "^0.21.1",
@@ -71,11 +72,11 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "4.8.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.0.1.tgz",
-      "integrity": "sha512-T89P2jG2vM7OJ0IfGx2+9FC5sQjtTzRSz+mCHTXkFn/ELZc2YpfStmYHmqzq2Jx55J0F7+O6i5/ZKFSVNWCKNg==",
+      "integrity": "sha512-ZyF4ksXCcdtwA/1PLlnFLcF/q8/MhwxXhKHh4oCHDA4Ip+ZzAHoICtyp4wZWfiCVDP0yuz3HsjyvuldHFb3wjA==",
       "dependencies": {
-        "@ant-design/colors": "^6.0.0",
+        "@ant-design/colors": "^7.0.0",
         "@ant-design/icons-svg": "^4.2.1",
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
@@ -94,6 +95,14 @@
       "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
       "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
     },
+    "node_modules/@ant-design/icons/node_modules/@ant-design/colors": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.0.tgz",
+      "integrity": "sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
     "node_modules/@ant-design/react-slick": {
       "version": "0.29.2",
       "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.29.2.tgz",
@@ -4592,6 +4601,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -4686,6 +4707,25 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd/node_modules/@ant-design/icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.8.0.tgz",
+      "integrity": "sha512-T89P2jG2vM7OJ0IfGx2+9FC5sQjtTzRSz+mCHTXkFn/ELZc2YpfStmYHmqzq2Jx55J0F7+O6i5/ZKFSVNWCKNg==",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.9.4"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -21444,10 +21484,12 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
+      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.0.1",
     "antd": "^4.14.1",
     "autosize": "^4.0.2",
     "axios": "^0.21.1",

src/App.tsx

@@ -102,7 +102,7 @@ const ShowUserSpace = ({openHelp}: {openHelp: () => any}) => {
     }
 
     return (
-        <Fragment>
+        <Fragment key={`user-space-${chatting_with_user}`}>
             <div className="contentCenterHeader">
                 <UserNameForm user={chatting_user_info} />
                 <div onClick={openHelp} className="contentCenterHeaderAdmin">
@@ -185,7 +185,7 @@ const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => {
                             :
                             <Col className={'content-chatboard-col'} span={6}>
                                 <div className="contentRight" >
-                                    <h2 className="contentRightHeader">Trợ giúp Admin <CloseOutlined onClick={() => setHelpClose(false)} title={'Đóng'} />  </h2>
+                                    <h2 className="contentRightHeader">Trợ giúp <a onClick={() => setHelpClose(false)}>Đóng</a></h2>
                                     <HelpSideBar />
                                 </div>
                             </Col>

src/components/BadgeStatus/index.tsx

@@ -3,7 +3,7 @@ import React, {FC, ReactNode} from "react";
 
 // import "./styles.css";
 
-const BadgeStatus: FC<{online: boolean, children: ReactNode}> = ({online, children}) => {
+const BadgeStatus: FC<{online: boolean, children?: ReactNode}> = ({online, children}) => {
     return (
         <Badge dot color={online ? 'green' : 'red'}>
             { children }

src/components/ConversationList/index.tsx

@@ -81,8 +81,7 @@ const ConversationListItem = (props: { user: UserInfo, unread: { total: number,
 
             <div className="avatar-cus">
                 <img className="conversation-photo" src={avatar} alt="conversation" />
-                <BadgeStatus online={user.online || false}>
+                <BadgeStatus online={user.online || false} />
-                </BadgeStatus>
             </div>
 
             <div className="info-cus">