perf: 优化消息已读容器逻辑，方便第三方复用

client/shared/event/index.ts

@@ -43,12 +43,7 @@ export interface SharedEventMap {
   replyMessage: (payload: ChatMessage | null) => void;
 
   /**
-   * 消息已读(消息出现在界面上)
+   * 接受到消息(所有的(相对receiveUnmutedMessage来说))
-   */
-  readMessage: (payload: ChatMessage | null) => void;
-
-  /**
-   * 接受到消息(所有的)
    */
   receiveMessage: (payload: ChatMessage) => void;
 

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

@@ -7,7 +7,6 @@ import {
   t,
   useCachedUserInfo,
   MessageHelper,
-  sharedEvent,
   showMessageTime,
   useUserInfoList,
 } from 'tailchat-shared';
@@ -22,7 +21,7 @@ import { TcPopover } from '@/components/TcPopover';
 import { useMessageReactions } from './useMessageReactions';
 import { stopPropagation } from '@/utils/dom-helper';
 import { AutoFolder, Avatar, Icon } from 'tailchat-design';
-import { Intersection } from '@/components/Intersection';
+import { MessageAckContainer } from './MessageAckContainer';
 import './Item.less';
 
 /**
@@ -288,11 +287,12 @@ export function buildMessageItemRow(messages: ChatMessage[], index: number) {
         </Divider>
       )}
 
-      <Intersection
+      <MessageAckContainer
-        onIntersection={() => sharedEvent.emit('readMessage', message)}
+        converseId={message.converseId}
+        messageId={message._id}
       >
         <ChatMessageItem showAvatar={showAvatar} payload={message} />
-      </Intersection>
+      </MessageAckContainer>
     </div>
   );
 }

client/web/src/components/ChatBox/ChatMessageList/MessageAckContainer.tsx

@@ -0,0 +1,27 @@
+import { Intersection } from '@/components/Intersection';
+import React from 'react';
+import { useConverseAck, useMemoizedFn } from 'tailchat-shared';
+
+/**
+ * 消息已读回调容器
+ * 套在消息体外面可以实现消息出现在视野内就发送已读提示
+ */
+interface MessageAckContainerProps extends React.PropsWithChildren {
+  converseId: string;
+  messageId: string;
+}
+export const MessageAckContainer: React.FC<MessageAckContainerProps> =
+  React.memo((props) => {
+    const { updateConverseAck } = useConverseAck(props.converseId);
+
+    const handleIntersection = useMemoizedFn(() => {
+      updateConverseAck(props.messageId);
+    });
+
+    return (
+      <Intersection onIntersection={handleIntersection}>
+        {props.children}
+      </Intersection>
+    );
+  });
+MessageAckContainer.displayName = 'MessageAckContainer';

client/web/src/components/ChatBox/index.tsx

@@ -6,7 +6,6 @@ import { ChatInputBox } from './ChatInputBox';
 import { ChatMessageList } from './ChatMessageList';
 import { ChatReply } from './ChatReply';
 import { preprocessMessage } from './preprocessMessage';
-import { useMessageAck } from './useMessageAck';
 
 type ChatBoxProps =
   | {
@@ -35,7 +34,6 @@ const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
     converseId,
     isGroup,
   });
-  useMessageAck(converseId);
 
   if (loading) {
     return <ChatBoxPlaceholder />;

client/web/src/components/ChatBox/useMessageAck.ts

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { ChatMessage, sharedEvent, useConverseAck } from 'tailchat-shared';
-
-/**
- * 消息已读的回调
- */
-export function useMessageAck(converseId: string) {
-  const { updateConverseAck } = useConverseAck(converseId);
-
-  useEffect(() => {
-    const handleReadMessage = (message: ChatMessage | null) => {
-      const messageId = message?._id;
-      if (messageId && converseId === message.converseId) {
-        updateConverseAck(messageId);
-      }
-    };
-
-    sharedEvent.on('readMessage', handleReadMessage);
-
-    return () => {
-      sharedEvent.off('readMessage', handleReadMessage);
-    };
-  }, [converseId]);
-}

server/packages/sdk/src/services/base.ts

@@ -323,7 +323,8 @@ export abstract class TcService extends Service {
    */
   getPanelNamesWithFeature(panelFeature: PanelFeature) {
     const map =
-      this.getGlobalConfig<Record<string, PanelFeature[]>>('panelFeature');
+      this.getGlobalConfig<Record<string, PanelFeature[]>>('panelFeature') ??
+      {};
 
     const matched = Object.entries(map).filter(([panelName, panelFeatures]) =>
       panelFeatures.includes(panelFeature)