feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

web/app/components/tools/mcp/detail/provider-detail.tsx

@@ -0,0 +1,56 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import Drawer from '@/app/components/base/drawer'
+import MCPDetailContent from './content'
+import type { ToolWithProvider } from '../../../workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: ToolWithProvider
+  onUpdate: () => void
+  onHide: () => void
+  isTriggerAuthorize: boolean
+  onFirstCreate: () => void
+}
+
+const MCPDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+  isTriggerAuthorize,
+  onFirstCreate,
+}) => {
+  const handleUpdate = (isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      {detail && (
+        <MCPDetailContent
+          detail={detail}
+          onHide={onHide}
+          onUpdate={handleUpdate}
+          isTriggerAuthorize={isTriggerAuthorize}
+          onFirstCreate={onFirstCreate}
+        />
+      )}
+    </Drawer>
+  )
+}
+
+export default MCPDetailPanel