Add Delete Model

Author: Keivan Vosoughi

app/client/src/pages/Settings/SettingsPage.tsx

@@ -1,14 +1,19 @@
-import { Button, Col, Flex, Layout, Row, Table } from "antd";
+import { Button, Col, Flex, Layout, Modal, notification, Row, Table, Tooltip, Tooltip } from "antd";
 import { Content } from "antd/es/layout/layout";
 import styled from "styled-components";
-import { useModelProviders } from "./hooks";
+import { deleteModelProvider, useModelProviders } from "./hooks";
 import get from "lodash/get";
 import { sortItemsByKey } from "../../utils/sortutils";
 import Paragraph from "antd/es/typography/Paragraph";
 import StyledTitle from "../Evaluator/StyledTitle";
 import Toolbar from "./Toolbar";
 import AddModelProviderButton, { ModelProviderType } from "./AddModelProviderButton";
 import DateTime from "../../components/DateTime/DateTime";
+import {
+    EditOutlined,
+    DeleteOutlined
+  } from '@ant-design/icons';
+import { useMutation } from "@tanstack/react-query";
 
 
 
@@ -65,12 +70,42 @@ const StyledParagraph = styled(Paragraph)`
     color:  #5a656d;
 `;
 
+const StyledButton = styled(Button)`
+    margin-left: 8px;
+`;
+
 const SettingsPage: React.FC = () => {
     const filteredModelsReq = useModelProviders();
     console.log('filteredModelsReq', filteredModelsReq);    
     const customModels = get(filteredModelsReq, 'data.endpoints', []);
 
+    const mutation = useMutation({
+        mutationFn: deleteModelProvider
+    });
 
+    const onDelete = (model: CustomModel) => {
+        Modal.confirm({
+          content: (
+            <span>{`Are you sure you want to delete the model ${model}`}</span>
+          ),
+          onOk: async () => {
+            try {
+                mutation.mutate({
+                    model_id: model.model_id,
+                    provider_type: model.provider_type
+                })
+            } catch (error) {
+              notification.error({
+                message: "Error",
+                description: error instanceof Error ? error.message : String(error),
+              });
+            }
+          },
+          title: 'Confirm'
+        });
+      };
+
+    const onEdit = () => {}
 
     const modelProvidersColumns = [{
         key: 'display_name',
@@ -117,6 +152,39 @@ const SettingsPage: React.FC = () => {
         width: 300,
         sorter: sortItemsByKey('endpoint_url'),
         render: (endpoint_url: string) => <StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{endpoint_url}</StyledParagraph>
+    }, {
+        title: 'Actions',
+        width: 100,
+        render: (model: CustomModel) => {
+            console.log('model', model);
+            return (
+                <Flex>
+                    <Tooltip title="Edit">
+                        <Button
+                            type="link"
+                            key={`${model.endpoint_id}-delete`}
+                            onClick={() => onDelete(model)}
+                            data-event-category="User Action"
+                            data-event="Delete"
+                        >
+                            <DeleteOutlined />
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title="Edit">
+                        <StyledButton
+                            type="link"
+                            key={`${model.endpoint_id}-deploy`}
+                            onClick={onEdit}
+                            data-event-category="User Action"
+                            data-event="Edit"
+                        >
+                            <EditOutlined />
+                        </StyledButton>
+                    </Tooltip>
+                </Flex>
+            );
+
+        }
     }];
 
 

app/client/src/pages/Settings/hooks.ts

@@ -12,6 +12,14 @@ const fetchFilteredModels = async () => {
 };
 
 
+export const deleteModelProvider = async ({ model_id, provider_type }) => {
+    const model_filtered_resp = await fetch(`/custom_model_endpoints/${model_id}/${provider_type}`, {    
+        method: 'DELETE'
+      });
+      return await model_filtered_resp.json();
+}
+
+
 export const useModelProviders = () => {
 
     const { data, isLoading, isError, refetch } = useQuery(