Add delete message feature

Remove deleted property from Message

Add dedicated route for delete_message

Pre-commit

Revert change to promp_repository fetch_message

Remove blank line

website/public/locales/en/common.json

@@ -18,5 +18,6 @@
   "sign_out": "Sign Out",
   "terms_of_service": "Terms of Service",
   "title": "Open Assistant",
-  "yes": "Yes"
+  "yes": "Yes",
+  "delete": "Delete"
 }

website/src/components/Messages/MessageTableEntry.tsx

@@ -14,7 +14,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import { ClipboardList, Flag, MessageSquare, MoreHorizontal, User } from "lucide-react";
+import { ClipboardList, Flag, MessageSquare, MoreHorizontal, Trash, User } from "lucide-react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
@@ -22,9 +22,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { getEmojiIcon, MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
-import { post } from "src/lib/api";
+import { del, post } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
+import { mutate } from "swr";
 import useSWRMutation from "swr/mutation";
 
 interface MessageTableEntryProps {
@@ -153,9 +154,16 @@ const MessageActions = ({
   onReport: () => void;
   message: Message;
 }) => {
-  const { t } = useTranslation("message");
+  const { t } = useTranslation(["message", "common"]);
+  const { trigger } = useSWRMutation(`/api/admin/delete_message/${message.id}`, del);
   const { data } = useSession() || {};
   const role = data?.user?.role;
+
+  const handleDelete = async () => {
+    await trigger();
+    mutate((key) => typeof key === "string" && key.startsWith("/api/messages"), undefined, { revalidate: true });
+  };
+
   return (
     <Menu>
       <MenuButton>
@@ -186,6 +194,9 @@ const MessageActions = ({
             <MenuItem as="a" href={`/admin/manage_user/${message.user_id}`} target="_blank" icon={<User />}>
               {t("view_user")}
             </MenuItem>
+            <MenuItem onClick={handleDelete} icon={<Trash />}>
+              {t("common:delete")}
+            </MenuItem>
           </>
         )}
       </MenuList>

website/src/lib/api.ts

@@ -17,6 +17,8 @@ export const get = (url: string) => api.get(url).then((res) => res.data);
 
 export const post = (url: string, { arg: data }) => api.post(url, data).then((res) => res.data);
 
+export const del = (url: string) => api.delete(url).then((res) => res.data);
+
 api.interceptors.response.use(
   (response) => response,
   (error) => {

website/src/lib/oasst_api_client.ts

@@ -89,6 +89,13 @@ export class OasstApiClient {
     return this.get<Message>(`/api/v1/messages/${message_id}?username=${user.id}&auth_method=${user.auth_method}`);
   }
 
+  /**
+   * Delete a message by its id
+   */
+  async delete_message(message_id: string): Promise<void> {
+    return this.delete<void>(`/api/v1/messages/${message_id}`);
+  }
+
   /**
    * Send a report about a message
    */
@@ -202,6 +209,10 @@ export class OasstApiClient {
     return this.request<T>("PUT", path);
   }
 
+  private async delete<T>(path: string) {
+    return this.request<T>("DELETE", path);
+  }
+
   private async get<T>(path: string, query?: Record<string, string | number | boolean | undefined>) {
     if (!query) {
       return this.request<T>("GET", path);
@@ -216,7 +227,11 @@ export class OasstApiClient {
     return this.request<T>("GET", `${path}?${params}`);
   }
 
-  private async request<T>(method: "GET" | "POST" | "PUT", path: string, init?: RequestInit): Promise<T | null> {
+  private async request<T>(
+    method: "GET" | "POST" | "PUT" | "DELETE",
+    path: string,
+    init?: RequestInit
+  ): Promise<T | null> {
     const resp = await fetch(`${this.oasstApiUrl}${path}`, {
       method,
       ...init,

website/src/pages/api/admin/delete_message/[id].ts

@@ -0,0 +1,15 @@
+import { withRole } from "src/lib/auth";
+import { createApiClient } from "src/lib/oasst_client_factory";
+
+const handler = withRole("admin", async (req, res, token) => {
+  const { id } = req.query;
+  try {
+    const client = await createApiClient(token);
+    await client.delete_message(id as string);
+    res.status(200).json({ message: "Message deleted" });
+  } catch (e) {
+    res.status(500).json({ message: "Failed to delete message" });
+  }
+});
+
+export default handler;