feat: 增加群组所有消息已读

client/shared/i18n/langs/en-US/translation.json

@@ -120,6 +120,7 @@
   "k6c29eece": "Allows members to send message in text channels",
   "k6c75d61f": "Modify group avatar success",
   "k6cc401b0": "No role groups are currently selected",
+  "k6e4e3d7a": "All messages in this group are marked as read",
   "k6eac768d": "Add Members",
   "k6ee71a71": "Global Configuration",
   "k6efe275c": "Mark as read",

client/shared/i18n/langs/zh-CN/translation.json

@@ -120,6 +120,7 @@
   "k6c29eece": "允许成员在文字频道发送消息",
   "k6c75d61f": "修改群组头像成功",
   "k6cc401b0": "当前没有选择任何角色组",
+  "k6e4e3d7a": "已标记该群组所有消息已读",
   "k6eac768d": "添加角色",
   "k6ee71a71": "全局配置",
   "k6efe275c": "标记为已读",

client/shared/index.tsx

@@ -183,6 +183,7 @@ export {
   useGroupUnread,
   useGroupTextPanelUnread,
 } from './redux/hooks/useGroup';
+export { useGroupAck } from './redux/hooks/useGroupAck';
 export { useGroupMemberMute } from './redux/hooks/useGroupMemberMute';
 export {
   useGroupMemberAllPermissions,

client/shared/redux/hooks/useGroupAck.ts

@@ -0,0 +1,31 @@
+import { useMemoizedFn } from '../../hooks/useMemoizedFn';
+import { updateAck } from '../../model/converse';
+import { isConversePanel } from '../../utils/panel-helper';
+import { chatActions } from '../slices';
+import { useAppDispatch, useAppSelector } from './useAppSelector';
+import { useGroupInfo } from './useGroup';
+
+/**
+ * 群组级别的已读管理
+ */
+export function useGroupAck(groupId: string) {
+  const groupInfo = useGroupInfo(groupId);
+  const lastMessageMap = useAppSelector((state) => state.chat.lastMessageMap);
+  const dispatch = useAppDispatch();
+
+  const markGroupAllAck = useMemoizedFn(() => {
+    const conversePanels = (groupInfo?.panels ?? []).filter(isConversePanel);
+
+    for (const converse of conversePanels) {
+      const converseId = converse.id;
+      const lastMessageId = lastMessageMap[converseId];
+
+      if (converseId && lastMessageId) {
+        dispatch(chatActions.setConverseAck({ converseId, lastMessageId }));
+        updateAck(converseId, lastMessageId);
+      }
+    }
+  });
+
+  return { markGroupAllAck };
+}

client/shared/utils/panel-helper.ts

@@ -0,0 +1,16 @@
+import { GroupPanel, GroupPanelType } from '../model/group';
+
+/**
+ * 判断面板是否为会话面板
+ *
+ * 会话面板的属性是带有已读未读属性的(如默认的文本面板)
+ */
+export function isConversePanel(panel: GroupPanel) {
+  // 目前只有文本面板
+
+  if (panel.type === GroupPanelType.TEXT) {
+    return true;
+  }
+
+  return false;
+}

client/web/src/routes/Main/Navbar/GroupNav.tsx

@@ -2,21 +2,59 @@ import { Avatar, Icon } from 'tailchat-design';
 import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
 import React, { useCallback, useMemo } from 'react';
-import { GroupInfo, t, useAppSelector, useGroupUnread } from 'tailchat-shared';
+import {
+  GroupInfo,
+  showSuccessToasts,
+  t,
+  useAppSelector,
+  useGroupAck,
+  useGroupUnread,
+} from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';
+import { Dropdown, Menu } from 'antd';
 
+/**
+ * 群组导航栏栏项
+ */
 const GroupNavItem: React.FC<{ group: GroupInfo }> = React.memo(({ group }) => {
-  const hasUnread = useGroupUnread(group._id);
+  const groupId = group._id;
+  const hasUnread = useGroupUnread(groupId);
+  const { markGroupAllAck } = useGroupAck(groupId);
+
+  const menu = (
+    <Menu
+      items={[
+        {
+          key: 'ack',
+          label: t('标记为已读'),
+          icon: <Icon icon="mdi:message-badge-outline" />,
+          onClick: () => {
+            markGroupAllAck();
+            showSuccessToasts(t('已标记该群组所有消息已读'));
+          },
+        },
+      ]}
+    />
+  );
 
   return (
+    <Dropdown overlay={menu} trigger={['contextMenu']}>
+      <div>
         <NavbarNavItem
           name={group.name}
           to={`/main/group/${group._id}`}
           showPill={true}
           badge={hasUnread}
         >
-      <Avatar shape="square" size={48} name={group.name} src={group.avatar} />
+          <Avatar
+            shape="square"
+            size={48}
+            name={group.name}
+            src={group.avatar}
+          />
         </NavbarNavItem>
+      </div>
+    </Dropdown>
   );
 });
 GroupNavItem.displayName = 'GroupNavItem';

client/web/src/routes/Main/Navbar/NavItem.tsx

@@ -47,7 +47,7 @@ export const NavbarNavItem: React.FC<
   }
 
   return (
-    <div className="w-full px-3 relative group">
+    <div className="px-3 relative group">
       {showPill && (
         <div
           className="absolute w-2 left-0 top-0 bottom-0 flex items-center"