feat: 增加系统消息的信息渲染

shared/index.tsx

@@ -132,6 +132,7 @@ export type { AppStore, AppState, AppDispatch } from './redux/store';
 
 // utils
 export { joinArray } from './utils/array-helper';
+export { SYSTEM_USERID } from './utils/consts';
 export {
   shouldShowMessageTime,
   getMessageTimeDiff,

shared/utils/consts.ts

@@ -2,3 +2,8 @@
  * 系统语言的常量
  */
 export const LANGUAGE_KEY = 'i18n:language';
+
+/**
+ * 系统用户id
+ */
+export const SYSTEM_USERID = '000000000000000000000000';

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import {
   ChatMessage,
   formatShortTime,
+  SYSTEM_USERID,
   t,
   useCachedUserInfo,
   useChatBoxContext,
@@ -53,12 +54,10 @@ const MessageQuote: React.FC<{ payload: ChatMessage }> = React.memo(
 );
 MessageQuote.displayName = 'MessageQuote';
 
-interface ChatMessageItemProps {
+/**
-  showAvatar: boolean;
+ * 普通消息
-  payload: ChatMessage;
+ */
-}
+const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
-export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
-  (props) => {
   const { showAvatar, payload } = props;
   const userInfo = useCachedUserInfo(payload.author ?? '');
 
@@ -106,6 +105,36 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
       </Dropdown>
     </div>
   );
+});
+NormalMessage.displayName = 'NormalMessage';
+
+/**
+ * 系统消息
+ */
+const SystemMessage: React.FC<ChatMessageItemProps> = React.memo(
+  ({ payload }) => {
+    return (
+      <div className="text-center">
+        <div className="bg-black bg-opacity-20 rounded inline-block py-0.5 px-2 my-1 text-sm">
+          {payload.content}
+        </div>
+      </div>
+    );
+  }
+);
+SystemMessage.displayName = 'SystemMessage';
+
+interface ChatMessageItemProps {
+  showAvatar: boolean;
+  payload: ChatMessage;
+}
+export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
+  (props) => {
+    if (props.payload.author === SYSTEM_USERID) {
+      return <SystemMessage {...props} />;
+    }
+
+    return <NormalMessage {...props} />;
   }
 );
 ChatMessageItem.displayName = 'ChatMessageItem';