feat(admin): add converseID filter and message detail

Author: moonrailgun

server/admin/app/ra/App.tsx

@@ -4,7 +4,7 @@ import { authProvider } from './authProvider';
 import { UserEdit, UserList, UserShow } from './resources/user';
 import React from 'react';
 import { GroupList, GroupShow } from './resources/group';
-import { MessageList } from './resources/chat';
+import { MessageList, MessageShow } from './resources/chat';
 import { FileList } from './resources/file';
 import PersonIcon from '@mui/icons-material/Person';
 import MessageIcon from '@mui/icons-material/Message';
@@ -49,7 +49,7 @@ export const App = () => (
       icon={MessageIcon}
       name="messages"
       list={MessageList}
-      show={ShowGuesser}
+      show={MessageShow}
     />
     <Resource
       icon={GroupIcon}

server/admin/app/ra/i18n/custom.ts

@@ -33,6 +33,7 @@ export const englishCustom = {
     },
     messages: {
       search: 'Search Message Content',
+      searchConverseId: 'Search Converse ID',
     },
     groups: {
       noAvatar: 'No Avatar',
@@ -102,6 +103,7 @@ export const chineseCustom = {
     },
     messages: {
       search: '搜索消息内容',
+      searchConverseId: '搜索会话ID',
     },
     groups: {
       noAvatar: '无头像',

server/admin/app/ra/resources/chat.tsx

@@ -8,9 +8,11 @@ import {
   useTranslate,
   BulkDeleteButton,
   ShowButton,
-  EditButton,
   ReferenceInput,
   SelectInput,
+  Show,
+  SimpleShowLayout,
+  ReferenceField,
 } from 'react-admin';
 import { GroupField } from '../components/GroupField';
 import { PostListActionToolbar } from '../components/PostListActionToolbar';
@@ -26,15 +28,19 @@ export const MessageList: React.FC = () => {
           key="search"
           source="q"
           alwaysOn
-          placeholder={translate('custom.users.search')}
+          placeholder={translate('custom.messages.search')}
         />,
-        <ReferenceInput key="groupID" source="groupId" reference="groups">
+        <ReferenceInput key="groupId" source="groupId" reference="groups">
           <SelectInput optionText="name" />
         </ReferenceInput>,
+        <SearchInput
+          key="search"
+          source="converseId"
+          placeholder={translate('custom.messages.searchConverseId')}
+        />,
       ]}
     >
       <Datagrid
-        rowClick="show"
         bulkActionButtons={<BulkDeleteButton mutationMode="optimistic" />}
       >
         <TextField source="id" sortable={true} sortByOrder="DESC" />
@@ -53,3 +59,19 @@ export const MessageList: React.FC = () => {
   );
 };
 MessageList.displayName = 'MessageList';
+
+export const MessageShow: React.FC = () => (
+  <Show>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <ReferenceField source="groupId" reference="groups" />
+      <TextField source="converseId" />
+      <TextField source="author" />
+      <TextField source="content" />
+      <TextField source="reactions" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+    </SimpleShowLayout>
+  </Show>
+);
+MessageShow.displayName = 'MessageShow';