Hide chats in the frontend

inference/server/oasst_inference_server/routes/chats.py

@@ -276,7 +276,7 @@ async def handle_update_title(
 @router.put("/{chat_id}/hide")
 async def update_visibility(
     chat_id: str,
-    hidden: bool,
+    hidden: bool = True,
     ucr: UserChatRepository = Depends(deps.create_user_chat_repository),
 ):
     await ucr.update_visibility(chat_id, hidden)

website/public/locales/en/common.json

@@ -22,6 +22,7 @@
   "faq": "FAQ",
   "guidelines": "Guidelines",
   "github": "GitHub",
+  "hide": "Hide",
   "leaderboard": "Leaderboard",
   "legal": "Legal",
   "light_mode": "Light Mode",

website/src/components/Chat/ChatListBase.tsx

@@ -52,6 +52,19 @@ export const ChatListBase = memo(function ChatListBase({
     [mutateChatResponse]
   );
 
+  const handleHide = useCallback(
+    ({ chatId }: { chatId: string }) => {
+      mutateChatResponse(
+        (chatResponse) => ({
+          ...chatResponse,
+          chats: chatResponse?.chats.filter((chat) => chat.id !== chatId) || [],
+        }),
+        false
+      );
+    },
+    [mutateChatResponse]
+  );
+
   return (
     <Card
       py="3"
@@ -90,7 +103,7 @@ export const ChatListBase = memo(function ChatListBase({
         }}
       >
         {response?.chats.map((chat) => (
-          <ChatListItem key={chat.id} chat={chat} onUpdateTitle={handleUpdateTitle}></ChatListItem>
+          <ChatListItem key={chat.id} chat={chat} onUpdateTitle={handleUpdateTitle} onHide={handleHide}></ChatListItem>
         ))}
       </SimpleBar>
     </Card>

website/src/components/Chat/ChatListItem.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, CircularProgress, Flex, Input, Tooltip, useBoolean, useOutsideClick } from "@chakra-ui/react";
-import { Check, LucideIcon, Pencil, Trash2, X } from "lucide-react";
+import { Check, LucideIcon, Pencil, EyeOff, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -12,9 +12,11 @@ import useSWRMutation from "swr/mutation";
 export const ChatListItem = ({
   chat,
   onUpdateTitle,
+  onHide,
 }: {
   chat: ChatItem;
   onUpdateTitle: (params: { chatId: string; title: string }) => void;
+  onHide: (params: { chatId: string }) => void;
 }) => {
   const { query } = useRouter();
   const { t } = useTranslation("chat");
@@ -128,7 +130,7 @@ export const ChatListItem = ({
         {!isEditing && (
           <>
             <EditChatButton onClick={setIsEditing.on} />
-            <DeleteChatButton chatId={chat.id} />
+            <HideChatButton chatId={chat.id} onHide={onHide} />
           </>
         )}
       </Flex>
@@ -142,17 +144,17 @@ const EditChatButton = ({ onClick }: { onClick: () => void }) => {
   return <ChatListItemIconButton label={t("edit")} icon={Pencil} onClick={onClick}></ChatListItemIconButton>;
 };
 
-const DeleteChatButton = ({ chatId, onDelete }: { chatId: string; onDelete?: () => unknown }) => {
-  const { trigger: triggerDelete } = useSWRMutation(`/api/chat?chat_id=${chatId}`, del);
+const HideChatButton = ({ chatId, onHide }: { chatId: string; onHide?: (params: { chatId: string }) => void }) => {
+  const { trigger: triggerHide } = useSWRMutation(API_ROUTES.HIDE_CHAT(chatId), put);
 
   const onClick = useCallback(async () => {
-    await triggerDelete();
-    onDelete?.();
-  }, [onDelete, triggerDelete]);
+    await triggerHide({ chat_id: chatId });
+    onHide?.({ chatId });
+  }, [onHide, triggerHide, chatId]);
 
   const { t } = useTranslation("common");
 
-  return <ChatListItemIconButton label={t("delete")} icon={Trash2} onClick={onClick} />;
+  return <ChatListItemIconButton label={t("hide")} icon={EyeOff} onClick={onClick} />;
 };
 
 type ChatListItemIconButtonProps = {

website/src/lib/oasst_inference_client.ts

@@ -99,6 +99,10 @@ export class OasstInferenceClient {
   update_chat_title({ chat_id, title }: { chat_id: string; title: string }) {
     return this.request(`/chats/${chat_id}/title`, { method: "PUT", data: { title } });
   }
+
+  hide_chat({ chat_id }: { chat_id: string }) {
+    return this.request(`/chats/${chat_id}/hide`, { method: "PUT", data: { hidden: false } });
+  }
 }
 
 export const createInferenceClient = (jwt: JWT) => {

website/src/lib/routes.ts

@@ -61,4 +61,5 @@ export const API_ROUTES = {
     createRoute(`/api/chat/events`, { chat_id, message_id }),
   GET_CHAT_MODELS: "/api/chat/models",
   UPDATE_CHAT_TITLE: (id: string) => `/api/chat/title`,
+  HIDE_CHAT: (id: string) => `/api/chat/hide`,
 };

website/src/pages/api/chat/hide.ts

@@ -0,0 +1,17 @@
+import { withoutRole } from "src/lib/auth";
+import { isChatEnable } from "src/lib/isChatEnable";
+import { createInferenceClient } from "src/lib/oasst_inference_client";
+
+const handler = withoutRole("banned", async (req, res, token) => {
+  if (!isChatEnable()) {
+    return res.status(404).end();
+  }
+  const client = createInferenceClient(token);
+  const { chat_id } = req.body as { chat_id: string };
+
+  await client.hide_chat({ chat_id });
+
+  res.status(200).end();
+});
+
+export default handler;

website/src/types/Chat.ts

@@ -24,6 +24,7 @@ export interface ChatItem {
 
   // those are not available when you first create a chat
   title?: string;
+  hidden?: boolean;
 }
 
 export interface InferenceMessage {