Add halt tree, and copy message id features (#1088)

website/src/components/Messages/MessageTableEntry.tsx

@@ -12,9 +12,10 @@ import {
   useBreakpointValue,
   useColorModeValue,
   useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import { ClipboardList, Flag, MessageSquare, MoreHorizontal, Trash, User } from "lucide-react";
+import { ClipboardList, Copy, Flag, MessageSquare, MoreHorizontal, Slash, Trash, User } from "lucide-react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
@@ -22,7 +23,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
-import { del, post } from "src/lib/api";
+import { del, post, put } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
 import { emojiIcons, isKnownEmoji } from "src/types/Emoji";
@@ -142,6 +143,8 @@ const EmojiMenuItem = ({
   );
 };
 
+const CHAR_COUNT = 10;
+
 const MessageActions = ({
   react,
   userEmoji,
@@ -155,16 +158,47 @@ const MessageActions = ({
   onReport: () => void;
   message: Message;
 }) => {
+  const toast = useToast();
   const { t } = useTranslation(["message", "common"]);
-  const { trigger } = useSWRMutation(`/api/admin/delete_message/${message.id}`, del);
-  const { data } = useSession() || {};
-  const role = data?.user?.role;
+  const id = message.id;
+  const displayId = id.slice(0, CHAR_COUNT) + "..." + id.slice(-CHAR_COUNT);
+  const { trigger: deleteMessage } = useSWRMutation(`/api/admin/delete_message/${message.id}`, del);
+
+  const { trigger: stopTree } = useSWRMutation(`/api/admin/stop_tree/${message.id}`, put, {
+    onSuccess: () => {
+      toast({
+        title: t("common:success"),
+        description: t("tree_stopped", { id: displayId }),
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+      });
+    },
+  });
+
+  const { data: session } = useSession();
+  const isAdmin = session?.user?.role === "admin";
 
   const handleDelete = async () => {
-    await trigger();
+    await deleteMessage();
     mutate((key) => typeof key === "string" && key.startsWith("/api/messages"), undefined, { revalidate: true });
   };
 
+  const handleStop = () => {
+    stopTree();
+  };
+
+  const handleCopyId = () => {
+    navigator.clipboard.writeText(message.id);
+    toast({
+      title: t("common:copied"),
+      description: displayId,
+      status: "info",
+      duration: 5000,
+      isClosable: true,
+    });
+  };
+
   return (
     <Menu>
       <MenuButton>
@@ -189,15 +223,21 @@ const MessageActions = ({
         <MenuItem as="a" href={`/messages/${message.id}`} target="_blank" icon={<MessageSquare />}>
           {t("open_new_tab_action")}
         </MenuItem>
-        {role === "admin" && (
+        {!!isAdmin && (
           <>
             <MenuDivider />
+            <MenuItem onClick={handleCopyId} icon={<Copy />}>
+              {t("copy_message_id")}
+            </MenuItem>
             <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>
+            <MenuItem onClick={handleStop} icon={<Slash />}>
+              {t("stop_tree")}
+            </MenuItem>
           </>
         )}
       </MenuList>

website/src/lib/api.ts

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

website/src/lib/oasst_api_client.ts

@@ -167,6 +167,13 @@ export class OasstApiClient {
     return this.delete<void>(`/api/v1/messages/${message_id}`);
   }
 
+  /**
+   * Stop message tree
+   */
+  async stop_tree(message_id: string): Promise<void> {
+    return this.put<void>(`/api/v1/messages/${message_id}/tree/state?halt=true`);
+  }
+
   /**
    * Send a report about a message
    */

website/src/pages/api/admin/stop_tree/[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.stop_tree(id as string);
+    res.status(200).json({ message: `Tree ${id} stopped`, id });
+  } catch (e) {
+    res.status(500).json(e);
+  }
+});
+
+export default handler;