Merge pull request #652 from LAION-AI/238-admin-view-user-messages

Displaying a different user's messages in the admin view

website/src/components/UserMessagesCell/UserMessagesCell.tsx

@@ -0,0 +1,40 @@
+import { Box, CircularProgress, useColorModeValue } from "@chakra-ui/react";
+import { MessageTable } from "src/components/Messages/MessageTable";
+import fetcher from "src/lib/fetcher";
+import useSWR from "swr";
+
+interface UserMessagesCellProps {
+  /**
+   * The Web API route to fetch user messages from.  By default is
+   * `/api/messages/users` and fetches the logged in user's messages.
+   */
+  path?: string;
+}
+
+/**
+ * Fetches the messages corresponding to a user and presents them in a table.
+ */
+const UserMessagesCell = ({ path }: UserMessagesCellProps) => {
+  const url = path || "/api/messages/user";
+  const { data: messages, isLoading } = useSWR(url, fetcher, {
+    refreshInterval: 2000,
+  });
+  // TODO(#651): This box coloring and styling is used in multiple places.  We
+  // should factor it into a common ui component.
+  const boxBgColor = useColorModeValue("white", "gray.700");
+  const boxAccentColor = useColorModeValue("gray.200", "gray.900");
+
+  return (
+    <Box
+      backgroundColor={boxBgColor}
+      boxShadow="base"
+      dropShadow={boxAccentColor}
+      borderRadius="xl"
+      className="p-6 shadow-sm"
+    >
+      {isLoading ? <CircularProgress isIndeterminate /> : <MessageTable messages={messages} />}
+    </Box>
+  );
+};
+
+export { UserMessagesCell };

website/src/components/UserMessagesCell/index.tsx

@@ -0,0 +1 @@
+export * from "./UserMessagesCell";

website/src/pages/admin/manage_user/[id].tsx

@@ -1,10 +1,11 @@
-import { Button, Container, FormControl, FormLabel, Input, Select, useToast } from "@chakra-ui/react";
+import { Button, Container, FormControl, FormLabel, Input, Select, Stack, useToast } from "@chakra-ui/react";
 import { Field, Form, Formik } from "formik";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 import { getAdminLayout } from "src/components/Layout";
+import { UserMessagesCell } from "src/components/UserMessagesCell";
 import poster from "src/lib/poster";
 import prisma from "src/lib/prismadb";
 import useSWRMutation from "swr/mutation";
@@ -58,50 +59,53 @@ const ManageUser = ({ user }) => {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      <Container className="oa-basic-theme">
-        <Formik
-          initialValues={user}
-          onSubmit={(values) => {
-            trigger(values);
-          }}
-        >
-          <Form>
-            <Field name="id" type="hidden" />
-            <Field name="name">
-              {({ field }) => (
-                <FormControl>
-                  <FormLabel>Username</FormLabel>
-                  <Input {...field} isDisabled />
-                </FormControl>
-              )}
-            </Field>
-            <Field name="email">
-              {({ field }) => (
-                <FormControl>
-                  <FormLabel>Email</FormLabel>
-                  <Input {...field} isDisabled />
-                </FormControl>
-              )}
-            </Field>
+      <Stack gap="4">
+        <Container className="oa-basic-theme">
+          <Formik
+            initialValues={user}
+            onSubmit={(values) => {
+              trigger(values);
+            }}
+          >
+            <Form>
+              <Field name="id" type="hidden" />
+              <Field name="name">
+                {({ field }) => (
+                  <FormControl>
+                    <FormLabel>Username</FormLabel>
+                    <Input {...field} isDisabled />
+                  </FormControl>
+                )}
+              </Field>
+              <Field name="email">
+                {({ field }) => (
+                  <FormControl>
+                    <FormLabel>Email</FormLabel>
+                    <Input {...field} isDisabled />
+                  </FormControl>
+                )}
+              </Field>
 
-            <Field name="role">
-              {({ field }) => (
-                <FormControl>
-                  <FormLabel>Role</FormLabel>
-                  <Select {...field}>
-                    <option value="banned">Banned</option>
-                    <option value="general">General</option>
-                    <option value="admin">Admin</option>
-                  </Select>
-                </FormControl>
-              )}
-            </Field>
-            <Button mt={4} type="submit">
-              Update
-            </Button>
-          </Form>
-        </Formik>
-      </Container>
+              <Field name="role">
+                {({ field }) => (
+                  <FormControl>
+                    <FormLabel>Role</FormLabel>
+                    <Select {...field}>
+                      <option value="banned">Banned</option>
+                      <option value="general">General</option>
+                      <option value="admin">Admin</option>
+                    </Select>
+                  </FormControl>
+                )}
+              </Field>
+              <Button mt={4} type="submit">
+                Update
+              </Button>
+            </Form>
+          </Formik>
+        </Container>
+        <UserMessagesCell path={`/api/admin/user_messages?user=${user.id}`} />
+      </Stack>
     </>
   );
 };

website/src/pages/api/admin/user_messages.ts

@@ -0,0 +1,16 @@
+import { withRole } from "src/lib/auth";
+
+const handler = withRole("admin", async (req, res) => {
+  const { user } = req.query;
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/frontend_users/local/${user}/messages`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+    },
+  });
+  const messages = await messagesRes.json();
+  res.status(200).json(messages);
+});
+
+export default handler;