feat(frontend): support deleting datasource

frontend/app/src/api/datasources.ts

@@ -1,5 +1,5 @@
 import { type IndexProgress, indexSchema, type IndexTotalStats, totalSchema } from '@/api/rag';
-import { BASE_URL, buildUrlParams, handleResponse, opaqueCookieHeader, type Page, type PageParams, zodPage } from '@/lib/request';
+import { BASE_URL, buildUrlParams, handleErrors, handleResponse, opaqueCookieHeader, type Page, type PageParams, zodPage } from '@/lib/request';
 import { zodJsonDate } from '@/lib/zod';
 import { z, type ZodType } from 'zod';
 
@@ -11,7 +11,7 @@ interface DatasourceBase {
   updated_at: Date;
   user_id: string;
   build_kg_index: boolean;
-  llm_id: number | null
+  llm_id: number | null;
 }
 
 export type Datasource = DatasourceBase & ({
@@ -65,7 +65,7 @@ const baseDatasourceSchema = z.object({
   updated_at: zodJsonDate(),
   user_id: z.string(),
   build_kg_index: z.boolean(),
-  llm_id: z.number().nullable()
+  llm_id: z.number().nullable(),
 });
 
 const datasourceSchema = baseDatasourceSchema
@@ -112,6 +112,13 @@ export async function getDatasource (id: number): Promise<Datasource> {
   }).then(handleResponse(datasourceSchema));
 }
 
+export async function deleteDatasource (id: number): Promise<void> {
+  await fetch(`${BASE_URL}/api/v1/admin/datasources/${id}`, {
+    method: 'DELETE',
+    headers: await opaqueCookieHeader(),
+  }).then(handleErrors);
+}
+
 export async function getDatasourceOverview (id: number): Promise<DataSourceIndexProgress> {
   return fetch(`${BASE_URL}/api/v1/admin/datasources/${id}/overview`, {
     headers: await opaqueCookieHeader(),

frontend/app/src/app/(main)/(admin)/datasources/page.tsx

@@ -1,14 +1,16 @@
 'use client';
 
-import { type Datasource, listDataSources } from '@/api/datasources';
+import { type Datasource, deleteDatasource, listDataSources } from '@/api/datasources';
 import { AdminPageHeading } from '@/components/admin-page-heading';
+import { DangerousActionButton } from '@/components/dangerous-action-button';
 import { DataTableHeading } from '@/components/data-table-heading';
 import { DataTableRemote } from '@/components/data-table-remote';
 import { LlmInfo } from '@/components/llm/LlmInfo';
 import { buttonVariants } from '@/components/ui/button';
+import { useDataTable } from '@/components/use-data-table';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { PlusIcon } from 'lucide-react';
+import { PlusIcon, TrashIcon } from 'lucide-react';
 import Link from 'next/link';
 
 const helper = createColumnHelper<Datasource>();
@@ -21,9 +23,17 @@ const columns = [
     ),
   }),
   helper.accessor('data_source_type', {}),
-  helper.accessor('llm_id', { cell: (ctx) => <LlmInfo reverse id={ctx.getValue()} /> }),
+  helper.accessor('llm_id', { cell: (ctx) => <LlmInfo className="justify-end" reverse id={ctx.getValue()} /> }),
   helper.accessor('build_kg_index', {}),
   helper.accessor('user_id', {}),
+  helper.display({
+    header: 'Actions',
+    cell: ({ row }) => (
+      <span className="flex gap-2 items-center">
+        <DeleteButton datasource={row.original} />
+      </span>
+    ),
+  }),
 ] as ColumnDef<Datasource>[];
 
 export default function ChatEnginesPage () {
@@ -49,3 +59,21 @@ export default function ChatEnginesPage () {
     </>
   );
 }
+
+function DeleteButton ({ datasource }: { datasource: Datasource }) {
+  const { reload } = useDataTable();
+
+  return (
+    <DangerousActionButton
+      action={async () => {
+        await deleteDatasource(datasource.id);
+        reload?.();
+      }}
+      variant="ghost"
+      className="text-xs text-destructive hover:text-destructive hover:bg-destructive/20"
+    >
+      <TrashIcon className="w-3 mr-1" />
+      Delete
+    </DangerousActionButton>
+  );
+}

frontend/app/src/components/llm/LlmInfo.tsx

@@ -6,19 +6,19 @@ import { cn } from '@/lib/utils';
 import { Loader2Icon } from 'lucide-react';
 import Link from 'next/link';
 
-export function LlmInfo ({ reverse = false, id }: { reverse?: boolean, id: number | undefined | null }) {
+export function LlmInfo ({ className, reverse = false, id }: { className?: string, reverse?: boolean, id: number | undefined | null }) {
   const { llm, isLoading } = useLlm(id);
 
   if (isLoading) {
-    return <Loader2Icon className="size-4 animate-spin repeat-infinite" />;
+    return <Loader2Icon className={cn('size-4 animate-spin repeat-infinite', className)} />;
   }
 
   if (!llm) {
-    return <Badge variant='outline' className="text-muted-foreground">Default LLM</Badge>;
+    return <Badge variant="outline" className={cn('text-muted-foreground', className)}>Default LLM</Badge>;
   }
 
   return (
-    <span className={cn('flex gap-1 items-center', reverse && 'flex-row-reverse')}>
+    <span className={cn('flex gap-1 items-center', reverse && 'flex-row-reverse', className)}>
       <Badge variant="secondary"><span className="font-bold">{llm.provider}</span>:<span className="opacity-50">{llm.model}</span></Badge>
       <Link className={badgeVariants()} href={`/llms/${llm.id}`}>{llm.name}</Link>
     </span>