feat: 群组文本面板项右键增加标记为已读

packages/design/components/AvatarWithPreview/index.tsx

@@ -17,6 +17,7 @@ export const AvatarWithPreview: React.FC<AvatarProps> = React.memo((props) => {
       >
         <Avatar {...props} />
       </div>
+
       {hasImage && (
         <div
           style={{

shared/index.tsx

@@ -152,6 +152,7 @@ export {
 // redux
 export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
 export { useDMConverseList } from './redux/hooks/useConverse';
+export { useConverseAck } from './redux/hooks/useConverseAck';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
 export { useDMConverseName } from './redux/hooks/useDMConverseName';
 export {

shared/redux/hooks/useConverseAck.ts

@@ -0,0 +1,59 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from './useAppSelector';
+import _debounce from 'lodash/debounce';
+import { isValidStr } from '../../utils/string-helper';
+import { chatActions } from '../slices';
+import { updateAck } from '../../model/converse';
+
+/**
+ * 会话已读信息管理
+ */
+export function useConverseAck(converseId: string) {
+  const dispatch = useAppDispatch();
+  const converseLastMessage = useAppSelector(
+    (state) => state.chat.lastMessageMap[converseId]
+  );
+
+  const lastMessageIdRef = useRef('');
+  lastMessageIdRef.current = useAppSelector(
+    (state) => state.chat.ack[converseId] ?? ''
+  );
+
+  const setConverseAck = useMemo(
+    () =>
+      _debounce(
+        (converseId: string, lastMessageId: string) => {
+          if (
+            isValidStr(lastMessageIdRef.current) &&
+            lastMessageId <= lastMessageIdRef.current
+          ) {
+            // 更新的数字比较小，跳过
+            return;
+          }
+
+          dispatch(chatActions.setConverseAck({ converseId, lastMessageId }));
+          updateAck(converseId, lastMessageId);
+          lastMessageIdRef.current = lastMessageId;
+        },
+        1000,
+        { leading: true, trailing: true }
+      ),
+    []
+  );
+
+  /**
+   * 更新会话最新消息
+   */
+  const updateConverseAck = useCallback(
+    (lastMessageId: string) => {
+      setConverseAck(converseId, lastMessageId);
+    },
+    [converseId]
+  );
+
+  const markConverseAllAck = useCallback(() => {
+    updateConverseAck(converseLastMessage);
+  }, [converseLastMessage]);
+
+  return { updateConverseAck, markConverseAllAck };
+}

web/src/components/ChatBox/useMessageAck.ts

@@ -1,45 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import {
-  ChatMessage,
-  isValidStr,
-  updateAck,
-  useAppDispatch,
-  useAppSelector,
-  useUpdateRef,
-} from 'tailchat-shared';
-import { chatActions } from 'tailchat-shared/redux/slices';
+import { useEffect } from 'react';
+import { ChatMessage, useConverseAck, useUpdateRef } from 'tailchat-shared';
 import _debounce from 'lodash/debounce';
+import _last from 'lodash/last';
 
 export function useMessageAck(converseId: string, messages: ChatMessage[]) {
+  const { updateConverseAck } = useConverseAck(converseId);
   const messagesRef = useUpdateRef(messages);
-  const dispatch = useAppDispatch();
-
-  const lastMessageIdRef = useRef('');
-  lastMessageIdRef.current = useAppSelector(
-    (state) => state.chat.ack[converseId] ?? ''
-  );
-
-  const setConverseAck = useMemo(
-    () =>
-      _debounce(
-        (converseId: string, lastMessageId: string) => {
-          if (
-            isValidStr(lastMessageIdRef.current) &&
-            lastMessageId <= lastMessageIdRef.current
-          ) {
-            // 更新的数字比较小，跳过
-            return;
-          }
-
-          dispatch(chatActions.setConverseAck({ converseId, lastMessageId }));
-          updateAck(converseId, lastMessageId);
-          lastMessageIdRef.current = lastMessageId;
-        },
-        1000,
-        { leading: true, trailing: true }
-      ),
-    []
-  );
+  const updateConverseAckRef = useUpdateRef(updateConverseAck);
 
   useEffect(() => {
     // 设置当前
@@ -47,20 +14,9 @@ export function useMessageAck(converseId: string, messages: ChatMessage[]) {
       return;
     }
 
-    const lastMessageId =
-      messagesRef.current[messagesRef.current.length - 1]._id;
-    setConverseAck(converseId, lastMessageId);
+    const lastMessageId = _last(messagesRef.current)!._id;
+    updateConverseAckRef.current(lastMessageId);
   }, [converseId]);
 
-  /**
-   * 更新会话最新消息
-   */
-  const updateConverseAck = useCallback(
-    (lastMessageId: string) => {
-      setConverseAck(converseId, lastMessageId);
-    },
-    [converseId]
-  );
-
   return { updateConverseAck };
 }

web/src/routes/Main/Content/Group/SidebarItem.tsx

@@ -7,6 +7,7 @@ import {
   showToasts,
   t,
   useAppDispatch,
+  useConverseAck,
   useGroupInfo,
 } from 'tailchat-shared';
 import { GroupPanelItem } from '@/components/GroupPanelItem';
@@ -17,6 +18,24 @@ import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { Icon } from '@/components/Icon';
 
+const GroupAckMenuItem: React.FC<{
+  panelId: string;
+}> = (props) => {
+  const { markConverseAllAck } = useConverseAck(props.panelId);
+
+  return (
+    <Menu.Item
+      icon={<Icon icon="mdi:message-badge-outline" />}
+      onClick={() => {
+        markConverseAllAck();
+      }}
+    >
+      {t('标记为已读')}
+    </Menu.Item>
+  );
+};
+GroupAckMenuItem.displayName = 'GroupAckMenuItem';
+
 /**
  * 群组面板侧边栏组件
  */
@@ -86,6 +105,10 @@ export const SidebarItem: React.FC<{
           {t('Pin')}
         </Menu.Item>
       )}
+
+      {panel.type === GroupPanelType.TEXT && (
+        <GroupAckMenuItem panelId={panel.id} />
+      )}
     </Menu>
   );