diff --git a/website/src/components/UserMessagesCell/UserMessagesCell.tsx b/website/src/components/UserMessagesCell/UserMessagesCell.tsx new file mode 100644 index 0000000000..39120242d6 --- /dev/null +++ b/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 ( + + {isLoading ? : } + + ); +}; + +export { UserMessagesCell }; diff --git a/website/src/components/UserMessagesCell/index.tsx b/website/src/components/UserMessagesCell/index.tsx new file mode 100644 index 0000000000..c32b1c1f6d --- /dev/null +++ b/website/src/components/UserMessagesCell/index.tsx @@ -0,0 +1 @@ +export * from "./UserMessagesCell"; diff --git a/website/src/pages/admin/manage_user/[id].tsx b/website/src/pages/admin/manage_user/[id].tsx index cdd4746e8d..fb2a3b7413 100644 --- a/website/src/pages/admin/manage_user/[id].tsx +++ b/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." /> - - { - trigger(values); - }} - > -
- - - {({ field }) => ( - - Username - - - )} - - - {({ field }) => ( - - Email - - - )} - + + + { + trigger(values); + }} + > + + + + {({ field }) => ( + + Username + + + )} + + + {({ field }) => ( + + Email + + + )} + - - {({ field }) => ( - - Role - - - )} - - - - - + + {({ field }) => ( + + Role + + + )} + + + +
+
+ + ); }; diff --git a/website/src/pages/api/admin/user_messages.ts b/website/src/pages/api/admin/user_messages.ts new file mode 100644 index 0000000000..254bf9c6d0 --- /dev/null +++ b/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;