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);
- }}
- >
-
+
+
+
+
>
);
};
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;