hide and delete models by admin

app/ui/src/routes/settings/model.tsx

@@ -1,18 +1,29 @@
-import { Form, Switch, Table, Tag, Modal, notification, Select } from "antd";
+import {
+  Form,
+  Switch,
+  Table,
+  Tag,
+  Modal,
+  notification,
+  Select,
+  Tooltip,
+} from "antd";
 import React from "react";
 import api from "../../services/api";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { SettingsLayout } from "../../Layout/SettingsLayout";
 import { SkeletonLoading } from "../../components/Common/SkeletonLoading";
 import { useNavigate } from "react-router-dom";
 import { GetAllModelResponse } from "../../@types/settings";
+import { EyeIcon, EyeSlashIcon, TrashIcon } from "@heroicons/react/24/outline";
 
 export default function SettingsModelRoot() {
   const navigate = useNavigate();
   const [openAddModel, setOpenAddModel] = React.useState(false);
   const [fetchUrlForm] = Form.useForm();
   const [form] = Form.useForm();
+  const client = useQueryClient();
 
   const [type, setType] = React.useState<"url" | "save">("url");
   const [localModels, setLocalModels] = React.useState<
@@ -75,6 +86,7 @@ export default function SettingsModelRoot() {
         notification.success({
           message: "Model saved successfully",
         });
+        client.invalidateQueries(["fetchAllModels"]);
         setOpenAddModel(false);
         form.resetFields();
         fetchUrlForm.resetFields();
@@ -89,6 +101,50 @@ export default function SettingsModelRoot() {
     }
   );
 
+  const hideModel = async (id: number) => {
+    const response = await api.post(`/admin/models/hide`, {
+      id,
+    });
+    return response.data;
+  };
+
+  const deleteModel = async (id: number) => {
+    const response = await api.post(`/admin/models/delete`, {
+      id,
+    });
+    return response.data;
+  };
+
+  const { mutate: hide, isLoading: isHide } = useMutation(hideModel, {
+    onSuccess: () => {
+      notification.success({
+        message: "Model hidden successfully",
+      });
+      client.invalidateQueries(["fetchAllModels"]);
+    },
+    onError: (e: any) => {
+      const message = e?.response?.data?.message || "Something went wrong";
+      notification.error({
+        message,
+      });
+    },
+  });
+
+  const { mutate: del, isLoading: isDelete } = useMutation(deleteModel, {
+    onSuccess: () => {
+      notification.success({
+        message: "Model deleted successfully",
+      });
+      client.invalidateQueries(["fetchAllModels"]);
+    },
+    onError: (e: any) => {
+      const message = e?.response?.data?.message || "Something went wrong";
+      notification.error({
+        message,
+      });
+    },
+  });
+
   return (
     <SettingsLayout>
       {status === "loading" && <SkeletonLoading />}
@@ -145,6 +201,65 @@ export default function SettingsModelRoot() {
                           </Tag>
                         ),
                       },
+                      {
+                        title: "Action",
+                        render: (record) =>
+                          record.local_model ? (
+                            <div className="flex flex-row gap-2">
+                              <Tooltip title="Hide Model from Users">
+                                <button
+                                  type="button"
+                                  disabled={isHide}
+                                  onClick={() => {
+                                    hide(record.id);
+                                  }}
+                                  className="text-gray-400 hover:text-gray-500"
+                                >
+                                  {record.hide ? (
+                                    <EyeSlashIcon className="h-5 w-5" />
+                                  ) : (
+                                    <EyeIcon className="h-5 w-5" />
+                                  )}
+                                </button>
+                              </Tooltip>
+                              <Tooltip title="Delete Model">
+                                <button
+                                  type="button"
+                                  disabled={isDelete}
+                                  onClick={() => {
+                                    const confirm = window.confirm(
+                                      "Are you sure you want to delete this model?"
+                                    );
+
+                                    if (confirm) {
+                                      del(record.id);
+                                    }
+                                  }}
+                                  className="text-red-400 hover:text-red-500"
+                                >
+                                  <TrashIcon className="h-5 w-5" />
+                                </button>
+                              </Tooltip>
+                            </div>
+                          ) : (
+                            <Tooltip title="Hide Model from Users">
+                              <button
+                                type="button"
+                                disabled={isHide}
+                                onClick={() => {
+                                  hide(record.id);
+                                }}
+                                className="text-gray-400 hover:text-gray-500"
+                              >
+                                {record.hide ? (
+                                  <EyeSlashIcon className="h-5 w-5" />
+                                ) : (
+                                  <EyeIcon className="h-5 w-5" />
+                                )}
+                              </button>
+                            </Tooltip>
+                          ),
+                      },
                     ]}
                   />
                 </div>

server/src/routes/api/v1/admin/handlers/model.handler.ts

@@ -4,6 +4,7 @@ import { FastifyReply, FastifyRequest } from "fastify";
 import {
   FetchModelFromInputedUrlRequest,
   SaveModelFromInputedUrlRequest,
+  ToogleModelRequest,
 } from "./type";
 import axios from "axios";
 
@@ -138,3 +139,106 @@ export const saveModelFromInputedUrlHandler = async (
     });
   }
 };
+
+export const hideModelHandler = async (
+  request: FastifyRequest<ToogleModelRequest>,
+  reply: FastifyReply
+) => {
+  try {
+    const { id } = request.body;
+
+    const user = request.user;
+
+    const prisma = request.server.prisma;
+
+    if (!user.is_admin) {
+      return reply.status(403).send({
+        message: "Forbidden",
+      });
+    }
+
+    const model = await prisma.dialoqbaseModels.findFirst({
+      where: {
+        id: id,
+        deleted: false,
+      },
+    });
+
+    if (!model) {
+      return reply.status(404).send({
+        message: "Model not found",
+      });
+    }
+
+    await prisma.dialoqbaseModels.update({
+      where: {
+        id: id,
+      },
+      data: {
+        hide: !model.hide,
+      },
+    });
+
+    return {
+      message: "success",
+    };
+  } catch (error) {
+    console.log(error);
+    return reply.status(500).send({
+      message: "Internal Server Error",
+    });
+  }
+};
+
+export const deleteModelHandler = async (
+  request: FastifyRequest<ToogleModelRequest>,
+  reply: FastifyReply
+) => {
+  try {
+    const { id } = request.body;
+
+    const user = request.user;
+
+    const prisma = request.server.prisma;
+
+    if (!user.is_admin) {
+      return reply.status(403).send({
+        message: "Forbidden",
+      });
+    }
+
+    const model = await prisma.dialoqbaseModels.findFirst({
+      where: {
+        id: id,
+        deleted: false,
+      },
+    });
+
+    if (!model) {
+      return reply.status(404).send({
+        message: "Model not found",
+      });
+    }
+
+    if (!model.local_model) {
+      return reply.status(400).send({
+        message: "Only local model can be deleted",
+      });
+    }
+
+    await prisma.dialoqbaseModels.delete({
+      where: {
+        id: id,
+      },
+    });
+
+    return {
+      message: "success",
+    };
+  } catch (error) {
+    console.log(error);
+    return reply.status(500).send({
+      message: "Internal Server Error",
+    });
+  }
+};

server/src/routes/api/v1/admin/root.ts

@@ -8,6 +8,8 @@ import {
   fetchModelFromInputedUrlHandler,
   getAllModelsHandler,
   saveModelFromInputedUrlHandler,
+  deleteModelHandler,
+  hideModelHandler
 } from "./handlers";
 import {
   dialoqbaseSettingsSchema,
@@ -21,6 +23,7 @@ import {
   fetchModelFromInputedUrlSchema,
   getAllModelsSchema,
   saveModelFromInputedUrlSchema,
+  toogleModelSchema
 } from "./schema/model";
 
 const root: FastifyPluginAsync = async (fastify, _): Promise<void> => {
@@ -95,6 +98,26 @@ const root: FastifyPluginAsync = async (fastify, _): Promise<void> => {
     },
     fetchModelFromInputedUrlHandler
   );
+
+
+  fastify.post(
+    "/models/delete",
+    {
+      schema: toogleModelSchema,
+      onRequest: [fastify.authenticate],
+    },
+    deleteModelHandler
+  );
+
+
+  fastify.post(
+    "/models/hide",
+    {
+      schema: toogleModelSchema,
+      onRequest: [fastify.authenticate],
+    },
+    hideModelHandler
+  );
 };
 
 export default root;

server/src/routes/api/v1/admin/schema/model.ts

@@ -24,3 +24,13 @@ export const saveModelFromInputedUrlSchema: FastifySchema = {
     required: ["url", "model_id", "name", "stream_available"],
   },
 };
+
+export const toogleModelSchema: FastifySchema = {
+  body: {
+    type: "object",
+    properties: {
+      id: { type: "number" },
+    },
+    required: ["id"],
+  },
+};