feat: 增加删除消息功能

shared/contexts/GroupInfoContext.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import type { GroupInfo } from '..';
+
+/**
+ * 群组信息上下文
+ */
+
+interface GroupInfoContextProps {
+  groupInfo: GroupInfo | null;
+}
+const GroupInfoContext = React.createContext<GroupInfoContextProps>({
+  groupInfo: null,
+});
+GroupInfoContext.displayName = 'GroupInfoContext';
+
+export const GroupInfoContextProvider: React.FC<{
+  groupInfo: GroupInfo;
+}> = React.memo((props) => {
+  return (
+    <GroupInfoContext.Provider
+      value={{
+        groupInfo: props.groupInfo,
+      }}
+    >
+      {props.children}
+    </GroupInfoContext.Provider>
+  );
+});
+GroupInfoContextProvider.displayName = 'GroupInfoContextProvider';
+
+export function useGroupInfoContext(): GroupInfoContextProps['groupInfo'] {
+  const context = useContext(GroupInfoContext);
+
+  return context.groupInfo;
+}

shared/index.tsx

@@ -39,6 +39,10 @@ export {
   useChatBoxContext,
 } from './contexts/ChatBoxContext';
 export { useColorScheme } from './contexts/ColorSchemeContext';
+export {
+  GroupInfoContextProvider,
+  useGroupInfoContext,
+} from './contexts/GroupInfoContext';
 
 export { getDMConverseName } from './helper/converse-helper';
 
@@ -102,7 +106,7 @@ export {
   deleteGroupPanel,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
-export { recallMessage } from './model/message';
+export { recallMessage, deleteMessage } from './model/message';
 export type { ChatMessage } from './model/message';
 export type { PluginManifest } from './model/plugin';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';

shared/model/message.ts

@@ -75,6 +75,14 @@ export async function recallMessage(messageId: string): Promise<ChatMessage> {
   return data;
 }
 
+export async function deleteMessage(messageId: string): Promise<boolean> {
+  const { data } = await request.post('/api/chat/message/deleteMessage', {
+    messageId,
+  });
+
+  return data;
+}
+
 /**
  * 基于会话id获取会话最后一条消息的id
  */

shared/redux/hooks/useGroup.ts

@@ -8,8 +8,8 @@ import { useUserId } from './useUserInfo';
 /**
  * 获取群组信息
  */
-export function useGroupInfo(groupId: string): GroupInfo | undefined {
+export function useGroupInfo(groupId: string): GroupInfo | null {
-  return useAppSelector((state) => state.group.groups[groupId]);
+  return useAppSelector((state) => state.group.groups[groupId]) ?? null;
 }
 
 /**

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

@@ -13,6 +13,9 @@ import {
   useAsync,
   getCachedUserInfo,
   useAsyncRequest,
+  deleteMessage,
+  useGroupInfoContext,
+  useUserInfo,
 } from 'tailchat-shared';
 import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
@@ -27,11 +30,20 @@ import './item.less';
  */
 function useChatMessageItemAction(payload: ChatMessage): React.ReactElement {
   const context = useChatBoxContext();
+  const groupInfo = useGroupInfoContext();
+  const userInfo = useUserInfo();
 
   const [, handleRecallMessage] = useAsyncRequest(() => {
     return recallMessage(payload._id);
   }, [payload._id]);
 
+  const [, handleDeleteMessage] = useAsyncRequest(() => {
+    return deleteMessage(payload._id);
+  }, [payload._id]);
+
+  const isGroupOwner = groupInfo && groupInfo.owner === userInfo?._id; //
+  const isMessageAuthor = payload.author === userInfo?._id;
+
   return (
     <Menu>
       {context.hasContext && (
@@ -43,17 +55,35 @@ function useChatMessageItemAction(payload: ChatMessage): React.ReactElement {
           {t('回复')}
         </Menu.Item>
       )}
-      <Menu.Item
+
-        key="recall"
+      {(isGroupOwner || isMessageAuthor) && (
-        icon={<Icon icon="mdi:restore" />}
+        <Menu.Item
-        onClick={handleRecallMessage}
+          key="recall"
-      >
+          icon={<Icon icon="mdi:restore" />}
-        {t('撤回')}
+          onClick={handleRecallMessage}
-      </Menu.Item>
+        >
+          {t('撤回')}
+        </Menu.Item>
+      )}
+
+      {/* 仅群组管理员可见 */}
+      {isGroupOwner && (
+        <Menu.Item
+          key="delete"
+          danger={true}
+          icon={<Icon icon="mdi:delete-outline" />}
+          onClick={handleDeleteMessage}
+        >
+          {t('删除')}
+        </Menu.Item>
+      )}
     </Menu>
   );
 }
 
+/**
+ * 消息引用
+ */
 const MessageQuote: React.FC<{ payload: ChatMessage }> = React.memo(
   ({ payload }) => {
     const quote = useMemo(

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

@@ -2,19 +2,34 @@ import { GroupPluginPanel } from '@/components/Panel/group/PluginPanel';
 import { TextPanel } from '@/components/Panel/group/TextPanel';
 import { Alert } from 'antd';
 import React from 'react';
-import { GroupPanelType, t, useGroupPanel } from 'tailchat-shared';
+import {
+  GroupInfoContextProvider,
+  GroupPanelType,
+  t,
+  useGroupInfo,
+  useGroupPanel,
+} from 'tailchat-shared';
 import { useGroupPanelParams } from './utils';
 
 export const GroupPanelRender: React.FC = React.memo(() => {
   const { groupId, panelId } = useGroupPanelParams();
+  const groupInfo = useGroupInfo(groupId);
   const panelInfo = useGroupPanel(groupId, panelId);
 
+  if (groupInfo === null) {
+    return null;
+  }
+
   if (panelInfo === null) {
     return null;
   }
 
   if (panelInfo.type === GroupPanelType.TEXT) {
-    return <TextPanel groupId={groupId} panelId={panelInfo.id} />;
+    return (
+      <GroupInfoContextProvider groupInfo={groupInfo}>
+        <TextPanel groupId={groupId} panelId={panelInfo.id} />
+      </GroupInfoContextProvider>
+    );
   } else if (panelInfo.type === GroupPanelType.PLUGIN) {
     return <GroupPluginPanel groupId={groupId} panelId={panelInfo.id} />;
   }