Feat: List MCP servers #3221 (#8730)

### What problem does this PR solve?

Feat: List MCP servers #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx

@@ -0,0 +1,31 @@
+import { ButtonLoading } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { IModalProps } from '@/interfaces/common';
+import { useTranslation } from 'react-i18next';
+import { EditMcpForm, FormId } from './edit-mcp-form';
+
+export function EditMcpDialog({ hideModal, loading, onOk }: IModalProps<any>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+        </DialogHeader>
+        <EditMcpForm onOk={onOk} hideModal={hideModal}></EditMcpForm>
+        <DialogFooter>
+          <ButtonLoading type="submit" form={FormId} loading={loading}>
+            {t('common.save')}
+          </ButtonLoading>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/profile-setting/mcp/edit-mcp-form.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { IModalProps } from '@/interfaces/common';
+import { buildOptions } from '@/utils/form';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const FormId = 'EditMcpForm';
+
+enum ServerType {
+  SSE = 'sse',
+  StreamableHttp = 'streamable-http',
+}
+
+const ServerTypeOptions = buildOptions(ServerType);
+
+export function EditMcpForm({
+  initialName,
+  hideModal,
+  onOk,
+}: IModalProps<any> & { initialName?: string }) {
+  const { t } = useTranslation();
+
+  const FormSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+    url: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+    server_type: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { name: '', server_type: ServerType.SSE, url: '' },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    const ret = await onOk?.(data);
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  useEffect(() => {
+    if (initialName) {
+      form.setValue('name', initialName);
+    }
+  }, [form, initialName]);
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={FormId}
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.namePlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.url')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.namePlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="server_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.serverType')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  autoComplete="off"
+                  options={ServerTypeOptions}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

web/src/pages/profile-setting/mcp/index.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button';
+import { SearchInput } from '@/components/ui/input';
+import { useListMcpServer } from '@/hooks/use-mcp-request';
+import { Import, Plus } from 'lucide-react';
+import { EditMcpDialog } from './edit-mcp-dialog';
+import { McpCard } from './mcp-card';
+import { useEditMcp } from './use-edit-mcp';
+
+const list = new Array(10).fill('1');
+export default function McpServer() {
+  const { data } = useListMcpServer();
+  const { editVisible, showEditModal, hideEditModal, handleOk } = useEditMcp();
+
+  return (
+    <section className="p-4">
+      <div className="text-text-title text-2xl">MCP Servers</div>
+      <section className="flex items-center justify-between">
+        <div className="text-text-sub-title">自定义 MCP Server 的列表</div>
+        <div className="flex gap-5">
+          <SearchInput className="w-40"></SearchInput>
+          <Button variant={'secondary'}>
+            <Import /> Import
+          </Button>
+          <Button onClick={showEditModal('')}>
+            <Plus /> Add MCP
+          </Button>
+        </div>
+      </section>
+      <section className="flex gap-5 flex-wrap pt-5">
+        {data.mcp_servers.map((item) => (
+          <McpCard key={item.id} data={item}></McpCard>
+        ))}
+      </section>
+      {editVisible && (
+        <EditMcpDialog
+          hideModal={hideEditModal}
+          onOk={handleOk}
+        ></EditMcpDialog>
+      )}
+    </section>
+  );
+}

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -0,0 +1,44 @@
+import { MoreButton } from '@/components/more-button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent } from '@/components/ui/card';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { IMcpServer } from '@/interfaces/database/mcp';
+import { formatDate } from '@/utils/date';
+import { McpDropdown } from './mcp-dropdown';
+
+export type DatasetCardProps = {
+  data: IMcpServer;
+};
+
+export function McpCard({ data }: DatasetCardProps) {
+  const { navigateToAgent } = useNavigatePage();
+
+  return (
+    <Card key={data.id} className="w-64" onClick={navigateToAgent(data.id)}>
+      <CardContent className="p-2.5 pt-2 group">
+        <section className="flex justify-between mb-2">
+          <div className="flex gap-2 items-center">
+            <Avatar className="size-6 rounded-lg">
+              <AvatarImage src={data?.avatar} />
+              <AvatarFallback className="rounded-lg ">CN</AvatarFallback>
+            </Avatar>
+          </div>
+          <McpDropdown>
+            <MoreButton></MoreButton>
+          </McpDropdown>
+        </section>
+        <div className="flex justify-between items-end">
+          <div className="w-full">
+            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
+              {data.name}
+            </h3>
+            <p className="text-xs text-text-sub-title">{data.description}</p>
+            <p className="text-xs text-text-sub-title">
+              {formatDate(data.update_date)}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/profile-setting/mcp/mcp-dropdown.tsx

@@ -0,0 +1,48 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { PenLine, Trash2 } from 'lucide-react';
+import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function McpDropdown({ children }: PropsWithChildren) {
+  const { t } = useTranslation();
+
+  const handleShowAgentRenameModal: MouseEventHandler<HTMLDivElement> =
+    useCallback((e) => {
+      e.stopPropagation();
+    }, []);
+
+  const handleDelete: MouseEventHandler<HTMLDivElement> =
+    useCallback(() => {}, []);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onClick={handleShowAgentRenameModal}>
+          {t('common.rename')} <PenLine />
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <ConfirmDeleteDialog onOk={handleDelete}>
+          <DropdownMenuItem
+            className="text-text-delete-red"
+            onSelect={(e) => {
+              e.preventDefault();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {t('common.delete')} <Trash2 />
+          </DropdownMenuItem>
+        </ConfirmDeleteDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

web/src/pages/profile-setting/mcp/use-edit-mcp.ts

@@ -0,0 +1,49 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  useCreateMcpServer,
+  useGetMcpServer,
+  useUpdateMcpServer,
+} from '@/hooks/use-mcp-request';
+import { useCallback } from 'react';
+
+export const useEditMcp = () => {
+  const {
+    visible: editVisible,
+    hideModal: hideEditModal,
+    showModal: showEditModal,
+  } = useSetModalState();
+  const { createMcpServer, loading } = useCreateMcpServer();
+  const { data, setId, id } = useGetMcpServer();
+  const { updateMcpServer } = useUpdateMcpServer();
+
+  const handleShowModal = useCallback(
+    (id?: string) => () => {
+      if (id) {
+        setId(id);
+      }
+      showEditModal();
+    },
+    [setId, showEditModal],
+  );
+
+  const handleOk = useCallback(
+    async (values: any) => {
+      if (id) {
+        updateMcpServer(values);
+      } else {
+        createMcpServer(values);
+      }
+    },
+    [createMcpServer, id, updateMcpServer],
+  );
+
+  return {
+    editVisible,
+    hideEditModal,
+    showEditModal: handleShowModal,
+    loading,
+    createMcpServer,
+    detail: data,
+    handleOk,
+  };
+};